/* Hero variant A — Parallax: the hero is a normal screen that scrolls
   away; layers leave at different speeds so it feels deep, never stops.
   Loads after hero-variants.css. */
.hero__stage { position: relative; }

@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
  .hero__mould, .hero__label {
    animation: a-sink linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  .hero__stage .hero__wordmark {
    animation: a-lift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  .bean {
    animation: float 6s ease-in-out infinite alternate, a-bean linear both;
    animation-delay: var(--d, 0s), 0s;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 100vh;
  }
  .bean:nth-of-type(odd)  { --py: -45vh; }
  .bean:nth-of-type(even) { --py: 25vh; }
}
}
@keyframes a-sink { to { transform: translateY(30vh) scale(.92); opacity: .3; } }
@keyframes a-lift { to { transform: translateY(-5vh); } }
@keyframes a-bean { to { translate: 0 var(--py); } }