@supports (animation-timeline: view()) {
  .sequence-scroll {
    view-timeline-name: --slerfa-sequence;
    view-timeline-axis: block;
  }

  .sequence-scroll__deck {
    animation: static-sequence-deck linear both;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 8% exit 92%;
  }

  .sequence-scroll__frame {
    opacity: 0;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 8% exit 92%;
  }

  .sequence-scroll__frame:nth-child(1) {
    animation-name: static-sequence-frame-1;
  }

  .sequence-scroll__frame:nth-child(2) {
    animation-name: static-sequence-frame-2;
  }

  .sequence-scroll__frame:nth-child(3) {
    animation-name: static-sequence-frame-3;
  }

  .sequence-scroll__frame:nth-child(4) {
    animation-name: static-sequence-frame-4;
  }

  .sequence-scroll__frame:nth-child(5) {
    animation-name: static-sequence-frame-5;
  }

  .sequence-scroll__progress span:nth-child(1) {
    animation: static-sequence-dot-1 linear both;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 8% exit 92%;
  }

  .sequence-scroll__progress span:nth-child(2) {
    animation: static-sequence-dot-2 linear both;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 8% exit 92%;
  }

  .sequence-scroll__progress span:nth-child(3) {
    animation: static-sequence-dot-3 linear both;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 8% exit 92%;
  }

  .sequence-scroll__progress span:nth-child(4) {
    animation: static-sequence-dot-4 linear both;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 8% exit 92%;
  }

  .sequence-scroll__progress span:nth-child(5) {
    animation: static-sequence-dot-5 linear both;
    animation-timeline: --slerfa-sequence;
    animation-range: entry 8% exit 92%;
  }
}

@keyframes static-sequence-deck {
  0% {
    transform: translateZ(0) rotateX(8deg) rotateY(-9deg);
  }

  50% {
    transform: translateZ(42px) rotateX(2deg) rotateY(0deg);
  }

  100% {
    transform: translateZ(0) rotateX(-3deg) rotateY(9deg);
  }
}

@keyframes static-sequence-frame-1 {
  0%, 18% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  }

  34%, 100% {
    opacity: 0;
    transform: translate3d(-54px, 0, 80px) rotateY(8deg) scale(1.04);
  }
}

@keyframes static-sequence-frame-2 {
  0%, 14% {
    opacity: 0;
    transform: translate3d(42px, 0, -92px) rotateY(-8deg) scale(.96);
  }

  26%, 40% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  }

  55%, 100% {
    opacity: 0;
    transform: translate3d(-46px, 0, 80px) rotateY(8deg) scale(1.04);
  }
}

@keyframes static-sequence-frame-3 {
  0%, 34% {
    opacity: 0;
    transform: translate3d(54px, 0, -120px) rotateY(-10deg) scale(.94);
  }

  48%, 62% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  }

  78%, 100% {
    opacity: 0;
    transform: translate3d(-38px, 0, 72px) rotateY(7deg) scale(1.03);
  }
}

@keyframes static-sequence-frame-4 {
  0%, 56% {
    opacity: 0;
    transform: translate3d(58px, 0, -132px) rotateY(-11deg) scale(.93);
  }

  70%, 84% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  }

  98%, 100% {
    opacity: 0;
    transform: translate3d(-28px, 0, 60px) rotateY(6deg) scale(1.02);
  }
}

@keyframes static-sequence-frame-5 {
  0%, 78% {
    opacity: 0;
    transform: translate3d(62px, 0, -140px) rotateY(-12deg) scale(.92);
  }

  92%, 100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
  }
}

@keyframes static-sequence-dot-1 {
  0%, 18% { background: var(--yellow); box-shadow: 0 0 18px rgba(255,187,18,.32); }
  34%, 100% { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
}

@keyframes static-sequence-dot-2 {
  0%, 14%, 55%, 100% { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
  26%, 40% { background: var(--yellow); box-shadow: 0 0 18px rgba(255,187,18,.32); }
}

@keyframes static-sequence-dot-3 {
  0%, 34%, 78%, 100% { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
  48%, 62% { background: var(--yellow); box-shadow: 0 0 18px rgba(255,187,18,.32); }
}

@keyframes static-sequence-dot-4 {
  0%, 56%, 98%, 100% { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
  70%, 84% { background: var(--yellow); box-shadow: 0 0 18px rgba(255,187,18,.32); }
}

@keyframes static-sequence-dot-5 {
  0%, 78% { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
  92%, 100% { background: var(--yellow); box-shadow: 0 0 18px rgba(255,187,18,.32); }
}

/* The mobile header (<=900px) now uses the site's built-in hamburger that opens
   the full-screen overlay menu, wired up by assets/header-scroll.js. The previous
   no-JS inline-nav fallback (which rendered cramped/broken) has been removed so the
   intended overlay styling from the main stylesheet applies. */

@media (max-width: 620px) {
  body {
    padding-bottom: 84px;
  }

  .brand span small {
    display: none;
  }

  .mobile-order {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}