/* =========================================================
   PROJECT: BLACK PRISM — DESIGN SYSTEM TOKENS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ---- BACKGROUNDS ---- */
  --bg-primary:   #0a0a0f;
  --bg-secondary: #0d0e1a;
  --bg-tertiary:  #121324;
  --bg-overlay:   rgba(10, 10, 15, 0.85);

  /* ---- BRS (BLACK RABBIT SYNDICATE) ---- */
  --brs-primary:   #d946ef;
  --brs-secondary: #ec4899;
  --brs-accent:    #dc2626;
  --brs-glow:      0 0 24px rgba(217, 70, 239, 0.55);
  --brs-line:      rgba(217, 70, 239, 0.30);

  /* ---- FW (FROST WRAITH) ---- */
  --fw-primary:    #06b6d4;
  --fw-secondary:  #3b82f6;
  --fw-accent:     #f1f5f9;
  --fw-glow:       0 0 24px rgba(6, 182, 212, 0.55);
  --fw-line:       rgba(6, 182, 212, 0.30);

  /* ---- UNIVERSAL ---- */
  --prism-core:    #8b5cf6;
  --warning:       #fde047;
  --danger:        #ef4444;
  --text-primary:  #f8fafc;
  --text-muted:    #64748b;
  --text-dim:      #475569;
  --hairline:      rgba(248, 250, 252, 0.12);
  --hairline-hot:  rgba(248, 250, 252, 0.32);

  /* ---- TYPE ---- */
  --font-display: 'Anton', 'Bebas Neue', 'Pretendard', sans-serif;
  --font-header:  'Oswald', 'Pretendard', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-sans:    'Inter', 'Pretendard', sans-serif;
  --font-kr:      'Pretendard', 'Inter', sans-serif;

  /* ---- RADII (직각 원칙) ---- */
  --r-0: 0px;
  --r-1: 1px;
  --r-2: 2px;
}

/* =========================================================
   RESET + BASE
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
  /* Korean: never break inside a word */
  word-break: keep-all;
  overflow-wrap: break-word;
}

::selection { background: var(--brs-primary); color: var(--bg-primary); }

/* =========================================================
   GLOBAL TEXTURES — scanlines + noise + vignette
   ========================================================= */
.fx-scanlines::before,
.fx-noise::after,
.fx-vignette > .vignette-layer {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.fx-scanlines::before {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}

.fx-noise::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.07;
  mix-blend-mode: overlay;
}

.fx-vignette { position: relative; }
.fx-vignette > .vignette-layer {
  background: radial-gradient(ellipse at center,
    transparent 35%,
    rgba(0,0,0,0.55) 80%,
    rgba(0,0,0,0.9) 100%);
}

/* =========================================================
   GLITCH TEXT — RGB split + slice shift
   ========================================================= */
.glitch {
  position: relative;
  display: inline-block;
  color: var(--text-primary);
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch::before {
  color: var(--brs-primary);
  transform: translate(-2px, 0);
  mix-blend-mode: screen;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitchA 4.2s steps(1) infinite;
}
.glitch::after {
  color: var(--fw-primary);
  transform: translate(2px, 0);
  mix-blend-mode: screen;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitchB 5.6s steps(1) infinite;
}
@keyframes glitchA {
  0%, 88%, 100% { transform: translate(-2px, 0); opacity: .85; }
  90%           { transform: translate(-7px, 1px); opacity: 1; }
  92%           { transform: translate(2px, -1px); opacity: .6; }
  94%           { transform: translate(-3px, 2px); opacity: 1; }
}
@keyframes glitchB {
  0%, 80%, 100% { transform: translate(2px, 0); opacity: .85; }
  82%           { transform: translate(6px, -2px); opacity: 1; }
  84%           { transform: translate(-2px, 1px); opacity: .55; }
  86%           { transform: translate(3px, -1px); opacity: 1; }
}

/* =========================================================
   HAIRLINE / CORNER BRACKETS
   ========================================================= */
.bracket-frame { position: relative; }
.bracket-frame::before,
.bracket-frame::after,
.bracket-frame > .bk-tr,
.bracket-frame > .bk-bl {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--hairline-hot);
  pointer-events: none;
}
.bracket-frame::before  { top: -1px;    left: -1px;    border-right: 0; border-bottom: 0; }
.bracket-frame::after   { bottom: -1px; right: -1px;   border-left: 0;  border-top: 0;    }
.bracket-frame > .bk-tr { top: -1px;    right: -1px;   border-left: 0;  border-bottom: 0; }
.bracket-frame > .bk-bl { bottom: -1px; left: -1px;    border-right: 0; border-top: 0;    }

/* =========================================================
   STAMPS — sealed classified labels
   ========================================================= */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  border-radius: 0;
}
.stamp--classified { color: var(--warning); }
.stamp--danger     { color: var(--danger); border-style: double; border-width: 4px; }
.stamp--heresy     { color: var(--fw-primary); }
.stamp--restricted { color: var(--brs-primary); }

/* Slightly rotated rubber-stamp variant */
.stamp.rotate { transform: rotate(-6deg); }

/* =========================================================
   BARCODE
   ========================================================= */
.barcode {
  display: inline-block;
  height: 22px;
  width: 120px;
  background-image: repeating-linear-gradient(
    to right,
    var(--text-primary) 0px, var(--text-primary) 2px,
    transparent 2px, transparent 4px,
    var(--text-primary) 4px, var(--text-primary) 5px,
    transparent 5px, transparent 9px,
    var(--text-primary) 9px, var(--text-primary) 12px,
    transparent 12px, transparent 14px,
    var(--text-primary) 14px, var(--text-primary) 15px,
    transparent 15px, transparent 18px
  );
  opacity: 0.85;
}

/* =========================================================
   HUD CHIP — small mono data tag
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  padding: 4px 8px;
  border: 1px solid var(--hairline);
  background: rgba(10, 10, 15, 0.6);
}
.chip .dot {
  width: 6px; height: 6px;
  background: var(--warning);
  display: inline-block;
}
.chip.live .dot {
  background: var(--danger);
  animation: blink 1.2s steps(2) infinite;
}
.chip.brs .dot { background: var(--brs-primary); }
.chip.fw .dot  { background: var(--fw-primary); }

@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

/* =========================================================
   BUTTON — primary enter
   ========================================================= */
.btn-enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 20px 36px;
  background: rgba(10, 10, 15, 0.55);
  border: 1px solid var(--warning);
  color: var(--warning);
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, letter-spacing .25s ease;
}
.btn-enter:hover {
  background: var(--warning);
  color: var(--bg-primary);
  letter-spacing: 0.36em;
  box-shadow: 0 0 28px rgba(253, 224, 71, 0.55);
}
.btn-enter:hover .btn-arrow path { stroke: var(--bg-primary); }
/* on hover: kill the glitch RGB-split so the label reads as solid dark on yellow */
.btn-enter:hover .glitch        { color: var(--bg-primary); }
.btn-enter:hover .glitch::before,
.btn-enter:hover .glitch::after { opacity: 0; animation: none; }
.btn-enter .btn-arrow { width: 28px; height: 12px; }
.btn-enter .btn-arrow path { stroke: var(--warning); stroke-width: 1.5; fill: none; }

/* danger striped underline */
.btn-enter::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 4px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--warning) 0 6px,
    transparent 6px 12px
  );
  opacity: 0.7;
}

/* =========================================================
   UTILITY
   ========================================================= */
.mono   { font-family: var(--font-mono); }
.header { font-family: var(--font-header); }
.kr     { font-family: var(--font-kr); }
.upper  { text-transform: uppercase; letter-spacing: 0.18em; }
.dim    { color: var(--text-muted); }
.warn   { color: var(--warning); }
.brs    { color: var(--brs-primary); }
.fw     { color: var(--fw-primary); }