/* Hero variant B — Scroll story: the stage pins while scrolling steps
   through the four slides (coffee → grounds → material → pellets), then
   releases. Timer slideshow is the fallback. Loads after hero-variants.css. */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
  .hero__track { height: 260vh; height: 260svh; }

  :is(.hero__mould img, .hero__label span) {
    animation-timeline: scroll(root);
    animation-range: 0 160vh;
    animation-duration: auto;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-delay: 0s !important;
    animation-iteration-count: 1;
  }
  :is(.hero__mould img, .hero__label span):nth-child(1) { animation-name: b-1; }
  :is(.hero__mould img, .hero__label span):nth-child(2) { animation-name: b-2; }
  :is(.hero__mould img, .hero__label span):nth-child(3) { animation-name: b-3; }
  :is(.hero__mould img, .hero__label span):nth-child(4) { animation-name: b-4; }

  .hero__mould {
    animation: b-turn linear both;
    animation-timeline: scroll(root);
    animation-range: 0 160vh;
  }
}
}
@keyframes b-1 { 0%, 18% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes b-2 { 0%, 18% { opacity: 0; } 28%, 43% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes b-3 { 0%, 43% { opacity: 0; } 53%, 68% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes b-4 { 0%, 68% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes b-turn { to { rotate: 6deg; } }

/* Labels swap without overlapping: old one is gone before the next appears */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
  .hero__label span:nth-child(1) { animation-name: bl-1; }
  .hero__label span:nth-child(2) { animation-name: bl-2; }
  .hero__label span:nth-child(3) { animation-name: bl-3; }
  .hero__label span:nth-child(4) { animation-name: bl-4; }
}
}
@keyframes bl-1 { 0%, 19% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes bl-2 { 0%, 23% { opacity: 0; } 27%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes bl-3 { 0%, 48% { opacity: 0; } 52%, 69% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes bl-4 { 0%, 73% { opacity: 0; } 77%, 100% { opacity: 1; } }