/* 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); }

/* What's inside cards. Three across by default with a hairline divider before the 2nd and 3rd.
   This beat is dropped on the abbreviated mobile arc, but if the scene is ever shown on a
   narrow viewport (for example a desktop window narrowed mid-play), repeat(3,1fr) cannot
   shrink its columns below their content and would overflow right, so below 760px the cards
   stack into a single column and the dividers move from the left edge to the top. */
#intro-root .intro-cards{ grid-template-columns:repeat(3, 1fr); }
#intro-root .intro-card{ border-left:1px solid var(--rule-2); }
@media (max-width:760px){
  #intro-root .intro-cards{ grid-template-columns:1fr; }
  #intro-root .intro-card{ border-left:0; border-top:1px solid var(--rule-2); }
}

/* 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); pointer-events:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
#intro-root [data-scene="0"]{ opacity:1; transform:none; filter:none; pointer-events:auto; }

#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; }
}