/* ============================================================
   14 — INTRO LOADER (typewriter + % counter + FLIP to hero)
   ============================================================ */

body.intro-pending .home-copy{ opacity:0; }
body.intro-pending .home-copy.intro-released{ opacity:1; }

.intro-loader{
  position:fixed; inset:0; z-index:2000;
  background:#000;
  overflow:hidden;
  transition:opacity .35s ease;
  /* --intro-accent is set at runtime from a random sector color */
  --intro-accent:#FFB22C;
}
.intro-loader.is-leaving{ background:transparent; }
.intro-loader.is-done{ opacity:0; pointer-events:none; }

/* --- Title block: kicker + headline, CENTERED during load --- */
.intro-title{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(46%,560px);
  will-change:transform;
}

/* Mirror the hero styles WITHOUT reusing the class names that
   content-loader.js targets (.copy-kicker / .home-headline) —
   otherwise it wipes these elements mid-type and the chain stalls. */
.intro-kicker{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--gold);
  font-size:clamp(10px,.9vw,13px);
  font-weight:700; letter-spacing:.22em;
}
.intro-kicker::before{
  content:""; width:clamp(24px,2.6vw,44px); height:2px;
  background:var(--gold); border-radius:2px;
}
.intro-headline{
  font-size:clamp(34px, 5.2vw, 84px);
  font-weight:800; line-height:1.0;
  margin:clamp(10px,1.4vh,18px) 0;
}

/* --- Fun fact, directly under the title --- */
.intro-fact{
  margin-top:clamp(18px,3vh,34px);
  font-size:clamp(12px,1vw,15px);
  line-height:1.6;
  color:var(--intro-accent);
  opacity:.85;
  min-height:2.6em;
}

/* Blinking underscore caret — terminal style */
.intro-caret{
  display:inline-block;
  margin-left:1px;
  font-weight:inherit;
  color:currentColor;
  animation:introCaret .75s steps(1) infinite;
}
@keyframes introCaret{ 50%{ opacity:0; } }

/* --- Big loading percentage, bottom-right --- */
.intro-pct{
  position:absolute; right:2vw; bottom:2vh;
  font-weight:800; line-height:1;
  font-size:clamp(120px, 10vw, 420px);
  color:var(--intro-accent);
  opacity:.16;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  user-select:none; pointer-events:none;
  transition:opacity .4s ease;
}
.intro-pct.is-out{ opacity:0; }

/* FLIP movement into hero position */
.intro-title.is-flip{ transition:transform .9s cubic-bezier(.65,0,.2,1); }
.intro-fact.is-out{ opacity:0; transition:opacity .35s ease; }
.intro-kicker.is-out{ opacity:0; transition:opacity .3s ease; }

/* ------------------------------------------------------------
   Category sequence banner — top edge of the loading screen.
   A traveling pulse draws a colored line through four category
   markers (Education → Industry → Government → Community),
   illustrating the "natural sequence" from the design rationale.
   Purely decorative: it loops on its own clock, independent of
   the % / typing milestones, and is torn down at handoff.
   ------------------------------------------------------------ */
.intro-flow{
  position:absolute; left:50%; top:clamp(20px,5vh,52px);
  transform:translateX(-50%);
  width:min(84vw,920px);
  text-align:center;
  opacity:1;
  transition:opacity .5s ease;
  pointer-events:none; user-select:none;
}
.intro-flow.is-out{ opacity:0; }
.intro-flow svg{ width:100%; height:auto; display:block; }

.flow-label{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  text-anchor:middle; opacity:0; transition:opacity .35s ease;
}
.flow-label.on{ opacity:1; }

.flow-peak{
  opacity:.22;
  transition:opacity .4s ease, transform .4s ease;
}
.flow-peak.on{ opacity:1; transform:translateY(-3px); }

.flow-ring{
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
}
.flow-ring.pulse{ animation:introRingPulse .8s ease-out; }
@keyframes introRingPulse{
  0%{ opacity:.7; transform:scale(1); }
  100%{ opacity:0; transform:scale(3.2); }
}

.flow-comet{ filter:blur(.2px); }
.flow-comet-glow{ opacity:.55; }

.flow-caption{
  min-height:1.5em; margin:6px 0 0;
  font-size:12px; color:var(--gold-bright,#e3b855);
  opacity:0; transition:opacity .35s ease;
}
.flow-caption.show{ opacity:.85; }
.flow-caption.dim{ opacity:.4; font-size:11px; }

@media (max-width:760px){
  .intro-title{ width:min(84%,460px); }
  .intro-flow{ width:92vw; top:14px; }
  .flow-label{ font-size:9px; }
  .flow-caption{ font-size:11px; }
}

@media (prefers-reduced-motion:reduce){
  .intro-loader{ display:none; }
  body.intro-pending .home-copy{ opacity:1; }
}