/* HeroScene. Set --ui-hero-offset to the height of an in-flow nav so the hero fits the first screen.
   Use --hero-accent (not --accent) for accent text over photos: it must clear contrast on the scrim.
   Pairs with motion.js (fallback driver) and the brand tokens in tokens/brands.css. */
.ui-scene { position: relative; timeline-scope: --ui-next; }
.ui-hero { position: relative; }
.ui-hero__stage {
  position: relative; overflow: clip; transform-origin: 50% 35%;
  min-height: calc(100vh - var(--ui-hero-offset, 0px)); min-height: calc(100svh - var(--ui-hero-offset, 0px));
  background: linear-gradient(135deg, var(--hero-from, #111), var(--hero-to, #333));
}
.ui-hero__layer { position: absolute; inset: 0 0 calc(var(--plx-speed, 0.2) * -30vh) 0; will-change: transform; }
.ui-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-hero__logo { position: absolute; inset: 0; margin: auto; width: 46%; max-width: 520px; height: auto; max-height: 60%; object-fit: contain; opacity: 0.9; }
.ui-hero__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 62% 40%, color-mix(in srgb, var(--accent, #fff) 30%, transparent), transparent 70%); }
.ui-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--hero-from, #000) 45%, transparent), color-mix(in srgb, var(--hero-from, #000) 80%, transparent));
}
.ui-hero__content { --reveal-dur: 420ms; /* hero text is usually the LCP element: keep its entrance short */ position: relative; z-index: 2; min-height: inherit; display: grid; place-content: center; padding: 72px 16px 96px; text-align: center; color: #fff; }
.ui-hero__cue { position: absolute; z-index: 2; pointer-events: none; left: 50%; bottom: 24px; width: 22px; height: 36px; margin-left: -11px; border: 2px solid #fff8; border-radius: 12px; }
.ui-hero__cue::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fffc; }
.ui-scene__next {
  position: relative; z-index: 3; min-height: 100vh; background: var(--bg, #fff); color: var(--fg, #111);
  border-radius: 28px 28px 0 0; view-timeline: --ui-next block; box-shadow: 0 -24px 60px #0004;
}

/* Short screens: the cue would sit on the buttons. */
@media (max-height: 700px) { .ui-hero__cue { display: none; } }

/* motion.js sets [data-tall] when the hero content is taller than one screen. A pinned hero that tall
   would clip its own text, so it scrolls normally instead and the curtain effects are off. */
@media (prefers-reduced-motion: no-preference) {
  .ui-scene:not([data-tall]) .ui-hero { position: sticky; top: 0; }
  .ui-hero__cue::after { animation: ui-cue 1.8s var(--ease, ease) infinite; }

  /* Native: the next section's entry drives the hero. */
  @supports (animation-timeline: view()) {
    html:not(.plx-js) .ui-scene:not([data-plx-js]):not([data-tall]) .ui-hero__stage {
      animation: ui-hero-recede linear both; animation-timeline: --ui-next; animation-range: entry 0% entry 100%;
    }
    html:not(.plx-js) .ui-scene:not([data-plx-js]):not([data-tall]) .ui-hero__layer {
      animation: ui-hero-drift linear both; animation-timeline: --ui-next; animation-range: entry 0% entry 100%;
    }
  }
  /* Fallback: motion.js writes --curtain (0 to 1) on the scene. */
  .ui-scene[data-plx-js]:not([data-tall]) .ui-hero__stage {
    transform: scale(calc(1 - var(--curtain, 0) * 0.08)); opacity: calc(1 - var(--curtain, 0) * 0.8);
  }
  .ui-scene[data-plx-js]:not([data-tall]) .ui-hero__layer {
    transform: translate3d(0, calc(var(--curtain, 0) * var(--plx-speed, 0.2) * -30vh), 0);
  }
}
@keyframes ui-hero-recede { to { transform: scale(0.92); opacity: 0.2; } }
@keyframes ui-hero-drift { to { transform: translate3d(0, calc(var(--plx-speed, 0.2) * -30vh), 0); } }
@keyframes ui-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }