/* All major motions respond directly to the native CSS scroll timeline. */
@keyframes heroImageShift{from{transform:scale(1.08) translateY(0%)}to{transform:scale(1) translateY(-3%)}}
@keyframes heroTypeLift{from{transform:translateY(0);opacity:1}to{transform:translateY(-55px);opacity:.56}}
@keyframes revealSection{from{opacity:.65;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes productScale{from{transform:scale(1.13)}to{transform:scale(1)}}
@keyframes guideLine{from{background-size:0 2px}to{background-size:100% 2px}}
@keyframes progressRail{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline:scroll()) {
  .site-header:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;animation:progressRail linear both;animation-timeline:scroll(root block)}
  .hero-photo{animation:heroImageShift linear both;animation-timeline:scroll(root block);animation-range:0px 800px}
  .hero h1{animation:heroTypeLift linear both;animation-timeline:scroll(root block);animation-range:100px 830px}
  .menu-visual img{animation:productScale linear both;animation-timeline:view(block);animation-range:entry 0% cover 55%}
  .menu-row h3,.kitchen-heading h2,.guide-left h2,.locations-heading h2,.order-copy h2{animation:revealSection linear both;animation-timeline:view(block);animation-range:entry 0% cover 38%}
  .guide-right{background:linear-gradient(var(--orange),var(--orange)) left top / 0 2px no-repeat;animation:guideLine linear both;animation-timeline:view(block);animation-range:entry 0% cover 70%}
}
/* No motion is required to read, navigate, or order. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important;transform:none!important} .site-header:after{display:none}}
