/* Hover/focus states and entrance pre-states (html.pre is set inline in <head>
   and removed by js/entrance.js once the timeline finishes). */

a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

@media (prefers-reduced-motion:no-preference){
  .cta,.meet{transition:translate .35s var(--ease-expo),box-shadow .35s var(--ease-expo),background-color .35s ease}
  .cta:hover,.meet:hover{translate:0 -2px}
  .cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 32px var(--brand-glow)}
  .play{transition:background-color .35s ease,scale .35s var(--ease-expo)}
  .play:hover{scale:1.06}
}

@media (prefers-reduced-motion:reduce){
  .conic-ring::before,.text-shimmer,.stars{animation:none}
  .bd-aurora{animation-duration:60s}
}

/* ── Entrance pre-states ── */
html.pre :is(.brand,.nav,.cta,.burger,.eyebrow,.play,.tag,.panel,.feats li > span:last-child,.lbl,.meet,.credit){opacity:0}
html.pre :is(.hero-h .line,.num){clip-path:inset(-20% -5% 100% -5%)}
html.pre :is(.slash,.dot,.p-icon){scale:0}
html.pre .n-div{scale:1 0}