/* ════════════════════════════════════════════════════════════════
   hero-intro.css — random intro video on the index hero.

   Flow: page loads with `.idx-hero.is-intro` (content hidden) → a
   random video plays full-screen on top → on `ended`, a subtle golden
   star shower fires while the video fades out and the hero content
   (title / sub / CTA / route-bar) fades in. End state is identical to
   the static hero. Controlled by hero-intro.js.
   ════════════════════════════════════════════════════════════════ */

/* Intro overlay sits above the scrim (z1) and content (z2) */
.hero-intro{position:absolute;inset:0;z-index:3;pointer-events:none;}

.hero-intro__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .7s ease;
  will-change:opacity;
}
.hero-intro__video.is-playing{opacity:1;}

.hero-intro__stars{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}

/* Hero content + route bar: hidden during intro, fade in on reveal */
.idx-hero__content,
.idx-hero .route-bar{
  transition:opacity 1.1s ease .15s, transform 1.1s ease .15s;
  will-change:opacity, transform;
}
.idx-hero.is-intro .idx-hero__content,
.idx-hero.is-intro .route-bar{
  opacity:0;
  transform:translateY(14px);
}

/* No motion preference / no JS → never hide the hero */
@media (prefers-reduced-motion: reduce){
  .idx-hero.is-intro .idx-hero__content,
  .idx-hero.is-intro .route-bar{opacity:1;transform:none;}
  .hero-intro{display:none;}
}