/* ============================================================
   Intro overlay — cinematic GSAP intro for the landing page.
   Palette is intentionally inverted (black veil, white spotlight,
   black text) but every value comes from the design system tokens
   in design-system.css. Motion/timing is driven by intro.js.
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--dark-bg);          /* near-black stage */
  overflow: hidden;
  /* subtle depth so the spotlight reads as a light in the dark */
  background-image: radial-gradient(120% 120% at 50% 50%, #141414 0%, var(--dark-bg) 60%);
  /* shared terminal-phase type size (prompt + command + caret) */
  --intro-term-fs: clamp(20px, 4vw, 40px);
}

/* The whole scene is scaled by intro.js to fake the distant→near zoom. */
.intro__scene {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform;
}

.intro__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The morphing spotlight: circle → pill → full-cover → swipe. */
.intro__spot {
  fill: #ffffff;
  filter: drop-shadow(0 0 6vmin rgba(255, 255, 255, 0.45));
  will-change: filter;
}

/* Text rides above the spotlight, dead-centre, black on white. */
.intro__text-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4ch;
  pointer-events: none;
  padding: 0 var(--margin-page);
  white-space: nowrap;
}

/* Terminal command text — DM Sans Light Display (design system display style). */
.intro__text {
  color: var(--color-fg);
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-optical-sizing: auto;
  font-size: var(--intro-term-fs);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  white-space: pre;              /* preserve leading/inner spaces (nowrap trims them) */
  text-align: center;
}

/* Static `root\` prompt — same DM Sans Light Display, sits before the command. */
.intro__prompt {
  color: var(--color-fg);
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-optical-sizing: auto;
  font-size: var(--intro-term-fs);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  white-space: pre;              /* keep the trailing space after `root\:~$ ` */
}

/* Blinking terminal caret — terminal phase only; intro.js hides it at the morph. */
.intro__cursor {
  color: var(--color-fg);
  font-family: var(--font-primary);
  font-size: var(--intro-term-fs);
  line-height: 1;
  animation: introBlink 1s steps(1) infinite;
}
@keyframes introBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Hello-in-many-languages phase: the design system's doodle voice.
   Sized in vmin so it tracks the spotlight pill (pill height = 16vmin, set in
   intro.js CONFIG.pillHalfHeight) instead of staying fixed when the pill shrinks
   on smaller screens. ~9.5vmin ≈ 60% of the pill height. No px clamp on purpose
   — a fixed floor/ceiling is exactly what froze it before. */
.intro__text--cursive {
  font-family: var(--font-doodle);
  font-weight: var(--weight-doodle);
  font-size: 9.5vmin;
  letter-spacing: 0;
}

/* Skip — design system caps micro-label, light on the dark veil. */
.intro__skip {
  position: absolute;
  bottom: var(--space-5);
  right: var(--margin-page);
  z-index: 2;
  background: none;
  border: 0;
  padding: var(--space-2) 0;
  color: var(--dark-muted);
  font-family: var(--font-primary);
  font-weight: var(--weight-regular);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-expo);
}
.intro__skip:hover { color: var(--dark-fg); }

/* Reduced motion: intro.js skips straight to the landing; keep the veil
   from animating in the meantime. */
@media (prefers-reduced-motion: reduce) {
  .intro__spot { filter: none; }
  .intro__cursor { animation: none; }
}