/* ============================================================
   INTRO SPLASH (index only)
   A short cinematic line that reframes the pitch, then dissolves
   into the hero. Theme-aware. CSS-driven (works without JS).
   ============================================================ */

.intro{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:var(--bg);                 /* white in light, ink-900 in dark */
  text-align:center;
  /* dissolve out, then stop intercepting */
  animation:intro-out .9s var(--ease,cubic-bezier(.22,.61,.36,1)) 3.5s forwards;
}
/* a faint breathing glow keeps it feeling alive */
.intro::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%,rgba(33,188,238,.10),transparent 70%);
  opacity:0;animation:intro-glow 3.6s ease-in-out forwards;
}

.intro__text{
  position:relative;
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.9rem,1.2rem + 4.4vw,4.25rem);
  line-height:1.08;
  letter-spacing:-.01em;
  text-wrap:balance;
  display:flex;flex-direction:column;gap:.12em;
}
.intro__l1,.intro__l2{display:block;will-change:opacity,transform,filter;}

/* Line 1 — appears slowly, blur-in */
.intro__l1{
  color:var(--fg-strong);
  opacity:0;
  animation:intro-in 1.15s var(--ease,cubic-bezier(.22,.61,.36,1)) .35s both;
}
/* Line 2 — the reframe, lands after a beat, accent emphasis */
.intro__l2{
  color:var(--accent);
  opacity:0;
  animation:intro-in .85s var(--ease,cubic-bezier(.22,.61,.36,1)) 2s both;
}
.intro__dots{animation:intro-dots 1.6s ease-in-out .9s 2;}

/* ---- theme-specific text colours ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .intro__l1{color:#21BCEE;}
  :root:not([data-theme="light"]) .intro__l2{color:#ffffff;}
}
[data-theme="dark"] .intro__l1{color:#21BCEE;}
[data-theme="dark"] .intro__l2{color:#ffffff;}
[data-theme="light"] .intro__l1{color:var(--fg-strong);}
[data-theme="light"] .intro__l2{color:var(--accent);}

/* lock page scroll while the splash is up */
.intro-lock{overflow:hidden;}

/* skip on interaction (JS adds this) */
.intro--skip{animation:intro-out .42s ease forwards !important;}

/* ---- keyframes ---- */
@keyframes intro-in{
  0%   { opacity:0; transform:translateY(16px); filter:blur(7px); }
  100% { opacity:1; transform:none;             filter:blur(0); }
}
@keyframes intro-out{
  0%   { opacity:1; }
  100% { opacity:0; visibility:hidden; pointer-events:none; }
}
@keyframes intro-glow{
  0%{opacity:0;} 35%{opacity:1;} 100%{opacity:.6;}
}
@keyframes intro-dots{
  0%,100%{opacity:.4;} 50%{opacity:1;}
}

/* ---- reduced motion: no movement/blur or timed fade ---- */
@media (prefers-reduced-motion: reduce){
  .intro{animation:none;opacity:0;visibility:hidden;pointer-events:none;}
  .intro::before{animation:none;opacity:.5;}
  .intro__l1,.intro__l2{animation:none;opacity:1;transform:none;filter:none;}
  .intro__dots{animation:none;}
}