/* Tap2Order motion layer ("Rush Hour").
   Rules: content is never hidden without JS; anything already on screen at load shows instantly;
   only content that scrolls into view animates, fast (≈0.5–0.8s); visitors who turn off motion see
   final states. Hidden states apply only under html.m-armed, which js/motion.js sets. */
:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-ease-io:cubic-bezier(.77,0,.175,1);--m-dim:#5b7473}

/* ---------- Scroll reveals ---------- */
.m-armed [data-m]:not(.m-in){opacity:0}
.m-armed [data-m].m-in{animation:m-rise .56s var(--m-ease) backwards;animation-delay:calc(var(--d,0) * 55ms)}
@keyframes m-rise{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}

/* Headline words rise from a mask. */
.m-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em .03em .14em;margin:-.08em -.03em -.14em}
.m-wi{display:inline-block}
.m-armed [data-ms]:not(.m-in) .m-wi{transform:translateY(112%)}
.m-armed [data-ms].m-in .m-wi{animation:m-word .62s var(--m-ease) backwards;animation-delay:calc(var(--wi) * 28ms)}
@keyframes m-word{from{transform:translateY(112%)}to{transform:none}}

/* Photos open like a curtain while the image settles. */
/* The curtain sits on the image, not the frame: an element fully clipped by its own clip-path is
   invisible to IntersectionObserver in Chrome, so the frame must stay unclipped to trigger on time. */
[data-mc]{display:block;overflow:hidden}
.m-armed [data-mc]:not(.m-in) img{clip-path:inset(0 0 100% 0)}
.m-armed [data-mc].m-in img{animation:m-curtain .85s var(--m-ease-io) backwards;animation-delay:calc(var(--d,0) * 60ms)}
@keyframes m-curtain{from{clip-path:inset(0 0 100% 0);transform:scale(1.12)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes m-clip-only{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* Shown at load because it was already on screen: no animation. */
.m-now,.m-now .m-wi,.m-now img{animation:none!important}

/* Photos beside text drift slightly while on screen. */
.m-par img{transform:translate3d(0,var(--py,0px),0) scale(1.1)}
.m-armed .m-par[data-mc].m-in img{animation-name:m-clip-only}

/* Counting numbers: the real number stays in the page; an overlay counts up, then hands back. */
@property --m-n{syntax:'<integer>';inherits:false;initial-value:0}
.m-count{position:relative;color:transparent!important}
.m-count::after{content:attr(data-pre) counter(m-n);counter-reset:m-n var(--m-n);position:absolute;left:0;top:0;color:var(--m-count-color,var(--amber))}
.m-count.m-in{animation:m-count .9s var(--m-ease) forwards}
@keyframes m-count{to{--m-n:var(--m-to)}}

/* ---------- Homepage hero: pure CSS, starts on the first frame (no JS, no flash) ---------- */
.hero-editorial .hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .03em .12em;margin:-.06em -.03em -.12em}
.hero-editorial .hw>span{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .hero-editorial .hero-photo img{animation:m-hero-photo 1.3s var(--m-ease) backwards}
  .hero-editorial .kicker{animation:m-rise .5s var(--m-ease) backwards}
  .hero-editorial .hw>span{animation:m-word .7s var(--m-ease) backwards;animation-delay:calc(60ms + var(--i) * 38ms)}
  .hero-editorial .hero-sub{animation:m-rise .6s var(--m-ease) .22s backwards}
  .hero-editorial .hero-copy>div{animation:m-rise .6s var(--m-ease) .3s backwards}
  .hero-editorial .fl{animation:m-hero-phone .9s var(--m-ease) .16s backwards}
}
@keyframes m-hero-photo{from{transform:scale(1.1)}to{transform:none}}
@keyframes m-hero-phone{from{opacity:0;transform:translate3d(48px,24px,0) rotate(3deg)}to{opacity:1;transform:none}}

/* Hero scroll-out: the photo sinks and darkens, the copy lifts away (native scroll timeline). */
@supports (animation-timeline: scroll()){
  @media(prefers-reduced-motion:no-preference){
    .hero-editorial .hero-photo{animation:m-out linear both;animation-timeline:scroll(root);animation-range:0 95vh}
  }
}
/* The copy lifts away only when the sample order sits beside it (hero not stacked). On stacked
   layouts the sample is below the fold, and fading it would leave it dim when people scroll to it. */
@supports (animation-timeline: scroll()){
  @media(prefers-reduced-motion:no-preference) and (min-width:1101px){
    .hero-editorial .hero-inner{animation:m-out-copy linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  }
}
@keyframes m-out{to{transform:translate3d(0,16%,0);filter:brightness(.4)}}
/* No fade on the copy: a scroll-linked fade leaves the hero button and links under 4.5:1 while they are still
   fully on screen at rest (a11y pass 2026-09-29, measured from 250px of scroll at 1200 and 1440 wide). */
@keyframes m-out-copy{to{transform:translate3d(0,-10%,0)}}

/* ---------- Pinned scene: tap -> order -> kitchen (built by motion.js around the existing steps) ---------- */
.sc-scene{position:relative;margin-top:clamp(2rem,4vw,3rem)}
.sc-sticky{display:grid;gap:1.5rem}
.sc-stage{position:relative;height:430px;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(90% 70% at 50% 100%,rgb(255 138 26/.2),transparent 62%),linear-gradient(180deg,#0e1d1f,#0b1719);box-shadow:var(--ring)}
.sc-col{position:relative;padding-left:26px}
.sc-rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--line)}
.sc-rail i{position:absolute;inset:0;border-radius:2px;background:var(--amber);transform-origin:top;transform:scaleY(var(--p,0));box-shadow:0 0 14px rgb(255 138 26/.6)}
.sc-col .steps{grid-template-columns:1fr;gap:.9rem}
.sc-col .step{min-height:0;padding:1.4rem 1.5rem;display:grid;grid-template-columns:4.4rem minmax(0,1fr);column-gap:1.2rem;align-items:start;transition:transform .45s var(--m-ease),box-shadow .3s ease,background-color .3s ease}
.sc-col .step-num{grid-row:span 2;font-size:3.4rem;margin:0;transition:-webkit-text-stroke-color .3s ease,color .3s ease}
.sc-col .step h3{margin:.15rem 0 .35rem;grid-column:2}
.sc-col .step p{margin:0;grid-column:2}
.sc-col .step.is-on{transform:translateX(8px);background:var(--surface-2);box-shadow:inset 0 0 0 1px rgb(255 138 26/.4)}
.sc-col .step.is-on .step-num{color:var(--amber);-webkit-text-stroke-color:var(--amber)}
@media(min-width:900px){
  .m-armed .sc-scene{height:250vh}
  .sc-sticky{position:sticky;top:calc(var(--head-h) + 3vh);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center;min-height:calc(100vh - var(--head-h) - 6vh)}
  .sc-stage{height:min(580px,74vh)}
}
.sc-table{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,#1a2b2d,#0f1c1e);border-top:1px solid rgb(255 255 255/.07)}
.sc-card{position:absolute;left:50%;bottom:9%;width:170px;height:104px;margin-left:-85px;border-radius:14px;padding:13px;display:grid;grid-template-columns:1fr 46px;gap:10px;align-items:end;background:#f4efe6;color:#0a1517;transform:perspective(700px) rotateX(42deg);box-shadow:0 24px 34px -14px rgb(0 0 0/.75)}
.sc-card b{display:block;font:700 17px/1.02 var(--font-display);letter-spacing:-.02em}
.sc-card small{display:block;margin-top:5px;font-size:10.5px;color:#46585a}
.sc-qr{width:46px;height:46px;border-radius:5px;background:repeating-conic-gradient(#0a1517 0 25%,#f4efe6 0 50%) 0 0/11.5px 11.5px;box-shadow:0 0 0 3px #f4efe6,0 0 0 4px #0a1517}
.sc-ring{position:absolute;left:50%;bottom:14%;width:150px;height:150px;margin-left:-75px;border-radius:50%;border:2px solid var(--amber);opacity:0;pointer-events:none}
.m-armed .sc-scene[data-step="1"] .sc-ring{animation:sc-ring 1.5s var(--m-ease) infinite}
.m-armed .sc-scene[data-step="1"] .sc-ring.r2{animation-delay:.5s}
@keyframes sc-ring{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.9)}}
.sc-phone{position:absolute;left:50%;top:5%;width:200px;height:380px;margin-left:-100px;border-radius:36px;background:#081113;box-shadow:0 0 0 7px #1f2e30,0 0 0 8px rgb(255 255 255/.1),0 40px 70px -24px rgb(0 0 0/.9);transition:transform .7s var(--m-ease)}
.sc-screen{position:absolute;inset:8px;border-radius:29px;overflow:hidden;background:#f4efe6;color:#0a1517}
.sc-scene[data-step="1"] .sc-phone{transform:translate3d(-2%,-3%,0) rotate(-9deg) scale(.94)}
.m-armed .sc-scene[data-step="1"] .sc-phone{animation:sc-tap 1.5s cubic-bezier(.45,0,.2,1) infinite}
@keyframes sc-tap{0%,100%{transform:translate3d(-2%,-3%,0) rotate(-9deg) scale(.94)}45%{transform:translate3d(-2%,6%,0) rotate(-7deg) scale(.94)}}
.sc-scene[data-step="3"] .sc-phone{transform:translate3d(-46%,2%,0) rotate(-4deg) scale(.88)}
.sc-s1,.sc-s2,.sc-s3{position:absolute;inset:0;padding:30px 14px 14px;transition:opacity .35s ease,transform .5s var(--m-ease)}
.sc-s1{display:grid;place-content:center;justify-items:center;text-align:center;background:linear-gradient(160deg,#ff8a1a,#e98b43)}
.sc-s1 b{font:700 26px/1 var(--font-display);letter-spacing:-.02em}
.sc-s1 small{margin-top:6px;font-size:12px;opacity:.75}
.sc-dot{width:44px;height:44px;border-radius:50%;margin-bottom:12px;background:#0a1517;box-shadow:0 0 0 8px rgb(10 21 23/.14)}
.sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.sc-top b{font:700 15px/1 var(--font-display)}
.sc-top em,.sc-tk-top em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:99px;box-shadow:inset 0 0 0 1px currentColor;opacity:.6}
.sc-item{display:grid;grid-template-columns:1fr auto 20px;gap:8px;align-items:center;padding:10px;margin-bottom:7px;border-radius:12px;background:#fff;font-size:12.5px;font-weight:600;box-shadow:0 1px 0 rgb(0 0 0/.06);transition:background-color .25s ease,transform .35s var(--m-ease)}
.sc-item span:nth-child(2){color:#5a6a6b;font-weight:500}
.sc-item i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #0a1517;transition:background-color .2s ease,box-shadow .2s ease}
.sc-item.added{background:#fff3e6;transform:translateX(3px)}
.sc-item.added i{background:#0a1517;box-shadow:inset 0 0 0 5px #0a1517,inset 0 0 0 10px #ff8a1a}
.sc-cart{position:absolute;left:12px;right:12px;bottom:14px;display:flex;justify-content:space-between;padding:12px 14px;border-radius:14px;background:#0a1517;color:#f4efe6;font-size:12px;font-weight:700}
.sc-total{color:var(--amber);font-variant-numeric:tabular-nums}
.sc-s3{display:grid;place-content:center;justify-items:center;text-align:center;background:#0a1517;color:#f4efe6}
.sc-s3 b{font:700 24px/1 var(--font-display);margin-top:14px}
.sc-s3 small{margin-top:6px;font-size:12px;color:var(--text-3)}
.sc-check{width:58px;height:58px;border-radius:50%;background:var(--ok);position:relative}
.sc-check::after{content:"";position:absolute;left:21px;top:14px;width:13px;height:24px;border:solid #0a1517;border-width:0 4px 4px 0;transform:rotate(45deg)}
.sc-scene .sc-s2,.sc-scene .sc-s3{opacity:0;transform:translateY(12px)}
.sc-scene[data-step="2"] .sc-s1,.sc-scene[data-step="3"] .sc-s1{opacity:0}
.sc-scene[data-step="2"] .sc-s2{opacity:1;transform:none}
.sc-scene[data-step="3"] .sc-s3{opacity:1;transform:none}
.m-armed .sc-scene[data-step="3"] .sc-check{animation:sc-pop .5s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes sc-pop{from{transform:scale(.4);opacity:0}}
.sc-ticket{position:absolute;right:7%;top:14%;width:210px;padding:16px 16px 14px;border-radius:14px;background:#f4efe6;color:#0a1517;box-shadow:0 30px 50px -20px rgb(0 0 0/.8);transform:translate3d(130%,0,0) rotate(8deg);opacity:0;transition:transform .75s var(--m-ease),opacity .4s ease}
.sc-ticket::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:radial-gradient(circle at 6px 0,transparent 6px,#f4efe6 6.5px) -6px 0/12px 12px repeat-x}
.sc-tk-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:8px;border-bottom:1.5px dashed #b9c2c0}
.sc-tk-top b{font:700 15px/1 var(--font-display)}
.sc-ticket p{color:#0a1517;margin:0 0 5px;font:600 13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.sc-ticket small{display:block;margin-top:8px;font-size:11px;color:#4f5f60}
.sc-scene[data-step="3"] .sc-ticket{transform:rotate(3deg);opacity:1}
.sc-caption{position:absolute;left:0;right:0;top:18px;text-align:center;font:600 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.sc-caption span{position:absolute;left:0;right:0;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .4s var(--m-ease)}
.sc-scene[data-step="1"] [data-c="1"],.sc-scene[data-step="2"] [data-c="2"],.sc-scene[data-step="3"] [data-c="3"]{opacity:1;transform:none;color:var(--amber)}
@media(max-width:899px){
  .sc-stage{height:440px}
  .sc-scene[data-step="3"] .sc-phone{transform:translate3d(-36%,4%,0) rotate(-4deg) scale(.8)}
  .sc-ticket{right:4%;width:180px;top:20%}
}

/* ---------- Pinned statement that lights up word by word ---------- */
.m-lit .m-wi{color:var(--m-dim);transition:color .2s ease}
.m-lit .m-wi.on{color:var(--text)}
.m-armed .m-statement{height:170vh;padding:0}
.m-armed .m-statement .shell{position:sticky;top:0;min-height:100vh;display:flex;align-items:center}
.m-statement p{font-size:clamp(3rem,7.6vw,7.8rem);max-width:13ch}
@media(max-width:760px){.m-armed .m-statement{height:110vh}}

@media(prefers-reduced-motion:reduce){.sc-ring{display:none}}