/* splash.css: the first-visit intro on the landing page (docs/landing/motion.md). Loaded only there.
   Hidden unless the head script in landing.html added html.splash-on. Only transform and opacity move. */
@layer components {
  .splash { display: none; }
  html.splash-on .splash {
    display: block;
    position: fixed; inset: 0; z-index: 1000;
    background: var(--brand-deep);
    translate: 0 0;
    transition: translate 700ms var(--ease-out);
  }
  html.splash-on .splash.is-lifting { translate: 0 -100%; }

  .splash-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .splash-bar {
    position: absolute; z-index: 1;
    right: var(--space-5);
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    display: flex; gap: var(--space-3);
  }
  .splash-ico-sound { display: none; }
  .splash-sound[aria-pressed="true"] .splash-ico-muted { display: none; }
  .splash-sound[aria-pressed="true"] .splash-ico-sound { display: block; }
}

/* the same layer as the hero's load animations (their `animation` shorthand resets play-state), later in
   source order: hold them until the splash lifts, so the page animates in as it is revealed */
@layer utilities {
  html.splash-on {
    overflow: hidden;
    scrollbar-gutter: stable; /* no layout jump when the scrollbar returns */
  }
  html.splash-on:not(.splash-done) { background: var(--brand-deep); } /* the gutter strip matches the splash */
  html.splash-on:not(.splash-done) :is(.hero .laptop, .hero .phone--hero, .hero-ticket, .hero-aside) {
    animation-play-state: paused;
  }
}