/* Ancaire Labs pre-lab intro loop.
   A full-screen overlay that plays before the chooser launch screen and then hands off to
   it by fading away. Tokens are scoped to #intro-root so the intro palette (lime, off-white,
   evergreen) does not leak into the rest of the lab. --sans (Hanken) and --disp (Bricolage)
   resolve from the page root; --ink is overridden here to the intro off-white. */

#intro-root{
  --lime:#9ad84f;
  --dim:#9fb0a4;
  --rule-2:rgba(243,248,241,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
  --radius-pill:999px;
  --ink:#f3f8f1;
  position:fixed; inset:0; z-index:100000;
  display:none;
  opacity:1;
  background:#0a1310;
  color:var(--ink);
  font-family:var(--sans);
  transition:opacity .7s var(--ease);
}

/* First paint: shown only when the head script arms it for a first-time visitor.
   Returning visitors never render the overlay, so there is no flash. */
html.intro-armed #intro-root{ display:block; }
#intro-root.intro-hidden{ opacity:0; pointer-events:none; }

/* Keep the small lime eyebrows legible over the live strands field: a soft dark halo behind
   the thin glyphs so a bright strand passing behind them cannot wash them out. Scoped to the
   eyebrows alone, so the large display headlines stay clean (no outline) and the canvas and
   card surfaces are untouched. */
#intro-root .intro-eyebrow{ text-shadow:0 1px 14px rgba(6,13,10,.85), 0 0 3px rgba(6,13,10,.7); }

/* Scenes. Pre-JS default keeps only scene 0 visible so the six do not stack before the
   controller runs; the controller then drives opacity/transform/filter inline. */
#intro-root [data-scene]{
  opacity:0; transform:translateY(26px); filter:blur(8px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
#intro-root [data-scene="0"]{ opacity:1; transform:none; filter:none; }

#intro-overlay, #intro-handoff{ transition:opacity 1.1s var(--ease); }
#intro-handoff{ opacity:0; }
#intro-pill{ transition:color .2s var(--ease), opacity .5s var(--ease); }

/* Hover affordances (the DC authored these as inline style-hover hooks). */
#intro-root .intro-textbtn:hover{ color:var(--lime); }
#intro-root .intro-darkbtn:hover{ background:#0e3a32; transform:translateY(-2px); }
#intro-root .intro-limebtn:hover{ transform:translateY(-2px); }

@keyframes anc-orbit{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes anc-breathe{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.06); opacity:1; } }

@media (prefers-reduced-motion:reduce){
  #intro-root, #intro-root [data-scene], #intro-overlay, #intro-handoff{ transition:none; }
}