/* ============================================================
   CINEMATIC INTRO — Spyglass → FREEDOM → SOVEREIGNTY → UNLOCK → BOOM
   ============================================================ */

#intro-stage {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #080015;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#intro-stage.done { display: none; }

/* ── Skip button ─────────────────────────────────────────── */
#intro-skip {
  position: absolute;
  bottom: 2rem; right: 2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(246,241,232,0.3);
  border: 1px solid rgba(246,241,232,0.12);
  background: transparent;
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  z-index: 10;
}
#intro-skip:hover { color: var(--lime); border-color: var(--lime); }

/* ── Spyglass ────────────────────────────────────────────── */
#spyglass-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#spyglass-lens {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: 50%; left: 20%;
  transform: translate(-50%, -50%);
  /* Outer dark mask with hole in center */
  box-shadow:
    0 0 0 200vmax rgba(8,0,21,0.97),
    inset 0 0 0 3px rgba(255,194,51,0.7),
    inset 0 0 0 7px rgba(255,194,51,0.1),
    0 0 50px rgba(255,194,51,0.4);
  background: transparent;
}

/* Crosshair inside lens */
#spyglass-lens::before,
#spyglass-lens::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: rgba(255,194,51,0.25);
}
#spyglass-lens::before {
  width: 1px; height: 100%;
  transform: translate(-50%, -50%);
}
#spyglass-lens::after {
  width: 100%; height: 1px;
  transform: translate(-50%, -50%);
}

/* Lens found state */
#spyglass-lens.found {
  box-shadow:
    0 0 0 200vmax rgba(8,0,21,0.97),
    inset 0 0 0 3px rgba(170,255,0,0.9),
    inset 0 0 0 7px rgba(170,255,0,0.15),
    0 0 80px rgba(170,255,0,0.7);
}

#spyglass-label {
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  color: rgba(255,194,51,0.6);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
}

#spyglass-target-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
}

/* ── Word reveals ────────────────────────────────────────── */
.intro-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.intro-word-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(5rem, 18vw, 18rem);
  letter-spacing: -0.04em;
  line-height: 1;
  text-align: center;
  transform: translateY(120px) scale(0.85);
  opacity: 0;
}

#word-freedom .intro-word-text {
  color: transparent;
  -webkit-text-stroke: 3px var(--kraken-hot);
  text-shadow:
    0 0 60px rgba(212,32,128,0.8),
    0 0 120px rgba(212,32,128,0.4),
    0 0 200px rgba(212,32,128,0.2);
}

#word-sovereignty .intro-word-text {
  color: var(--lime);
  text-shadow:
    0 0 40px rgba(170,255,0,0.9),
    0 0 80px rgba(170,255,0,0.5),
    0 0 160px rgba(170,255,0,0.2);
  font-size: clamp(3rem, 10vw, 11rem);
  letter-spacing: -0.03em;
}

#word-unlock .intro-word-text {
  color: var(--white);
  text-shadow:
    0 0 20px rgba(255,255,255,0.9),
    0 0 60px rgba(170,255,0,0.6),
    0 0 100px rgba(170,255,0,0.3);
}

/* Glitch layers for UNLOCK */
.glitch-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.glitch-layer .intro-word-text {
  position: absolute;
}

.glitch-r .intro-word-text {
  color: var(--kraken-hot);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.glitch-g .intro-word-text {
  color: var(--lime);
  clip-path: polygon(0 33%, 100% 33%, 100% 66%, 0 66%);
}

/* ── Shatter canvas ──────────────────────────────────────── */
#shatter-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
}

/* ── Flash overlay ───────────────────────────────────────── */
#intro-flash {
  position: absolute;
  inset: 0;
  background: var(--lime);
  opacity: 0;
  pointer-events: none;
}

/* Scanlines texture on intro */
#intro-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.15) 2px,
    rgba(0,0,0,0.15) 4px
  );
  pointer-events: none;
  z-index: 5;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #intro-stage { display: none !important; }
}