/* Gridiron Online Ordering: hero phone + scroll scene (phone flips 360, Suggested card pops out of the screen) */

/* ---------- hero ---------- */
.hero-ordering{position:relative;max-width:520px;margin:0 auto;padding:10px 0 20px;font-size:clamp(11px,3.4vw,13.5px)}
.ho-glow{position:absolute;left:50%;top:46%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(229,55,42,.42),rgba(229,55,42,.08) 55%,transparent);filter:blur(10px);pointer-events:none}
.ho-float{position:relative;width:min(23em,76%);margin:0 auto 0 8%}
.ho-phone{position:relative;border-radius:3em;padding:.62em;background:linear-gradient(145deg,#3a3d3c,#111312 35%,#050606 70%,#2a2d2c);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px -20px rgba(0,0,0,.75),0 18px 40px -18px rgba(229,55,42,.55)}
.ho-island{position:absolute;z-index:3;left:50%;top:1.25em;width:6.4em;height:1.7em;margin-left:-3.2em;border-radius:1em;background:#050606}
.ho-screen{position:relative;border-radius:2.45em;overflow:hidden;background:#f7f5f0;color:#171a19}
.ho-photo{position:relative;height:13.2em;overflow:hidden}
.ho-photo img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:60% 50%}
.ho-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 38%,transparent 62%,rgba(247,245,240,.9) 96%)}
.ho-top{position:absolute;z-index:1;left:1.1em;right:1.1em;top:3.4em;display:flex;justify-content:space-between;align-items:center;color:#fff}
.ho-shop{font:800 1.45em/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.ho-eta{font-size:.78em;font-weight:700;padding:.35em .7em;border-radius:99px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ho-body{position:relative;padding:.2em 1em 1.2em;display:grid;gap:.75em;margin-top:-1.4em}
.ho-hi{font:800 1.6em/1 var(--display);text-transform:uppercase}
.ho-usual,.ho-sugg{position:relative;display:flex;align-items:center;gap:.8em;background:#fff;border-radius:1.1em;padding:.6em;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 20px -10px rgba(0,0,0,.25)}
.ho-usual img,.ho-sugg img{width:4.4em;height:4.4em;border-radius:.8em;object-fit:cover;flex:none}
.ho-usual-t,.ho-sugg-t{display:grid;line-height:1.2;min-width:0}
.ho-usual-t small,.ho-sugg-t small{font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c22a1e}
.ho-usual-t b,.ho-sugg-t b{font-size:1.05em}
.ho-usual-t span,.ho-sugg-t span{font-size:.82em;color:#6b706d}
.ho-reorder{position:relative;overflow:hidden;height:3.4em;border-radius:99px;background:#e5372a;color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 10px 22px -10px rgba(229,55,42,.9)}
.ho-reorder>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.4em}
.ho-r2{opacity:0}
.ho-sugg{padding-right:3.6em}
.ho-add{position:absolute;right:.7em;top:50%;width:2.3em;height:2.3em;margin-top:-1.15em;border-radius:50%;display:grid;place-items:center;border:2px solid #e5372a;color:#e5372a;background:#fff}
.ho-add svg{grid-area:1/1}
.ho-check{opacity:0}
.ho-tap{position:absolute;left:62%;top:50%;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(255,255,255,.75);opacity:0;pointer-events:none}
.ho-tap2{left:auto;right:.55em;background:rgba(229,55,42,.35)}
.ho-total{display:flex;justify-content:space-between;align-items:baseline;padding:.1em .3em 0;font-weight:600;color:#6b706d}
.ho-total b{display:grid;font:800 1.5em/1 var(--display);color:#171a19}
.ho-total b span{grid-area:1/1;text-align:right}
.ho-t2{opacity:0}
.ho-ticket{position:absolute;right:-20%;top:auto;bottom:-8%;width:11.5em;font-size:.78em!important;padding:1em 1em 1.3em;background:#fffdf7;color:#1b1d1c;font:600 .86em/1.45 ui-monospace,Menlo,Consolas,monospace;border-radius:.3em;box-shadow:0 24px 40px -16px rgba(0,0,0,.6);transform:rotate(5deg);opacity:0;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - .5em) no-repeat,radial-gradient(circle at 50% 100%,transparent .3em,#000 .32em) bottom/.8em .55em repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - .5em) no-repeat,radial-gradient(circle at 50% 100%,transparent .3em,#000 .32em) bottom/.8em .55em repeat-x}
.ho-tk-h{display:flex;justify-content:space-between;gap:.5em;padding-bottom:.4em;margin-bottom:.4em;border-bottom:1px dashed #b9b5aa}
.ho-tk-s{color:#6b706d;margin:-.2em 0 .3em}
.ho-tk-f{display:flex;justify-content:space-between;margin-top:.5em;padding-top:.4em;border-top:1px dashed #b9b5aa}
@media(min-width:900px){.hero-ordering{font-size:14px}.ho-float{margin-left:12%}.ho-ticket{right:-36%;top:30%;bottom:auto}}

@media(prefers-reduced-motion:no-preference){
  .ho-float{animation:ho-bob 7s ease-in-out infinite}
  .ho-photo img{animation:ho-ken 18s ease-in-out infinite alternate}
  .ho-reorder .ho-tap{animation:ho-tap 9s ease-out infinite}
  .ho-r1{animation:ho-r1 9s ease infinite}
  .ho-r2{animation:ho-r2 9s ease infinite}
  .ho-sugg{animation:ho-sugg 9s cubic-bezier(.2,.9,.25,1.25) infinite}
  .ho-tap2{animation:ho-tap2 9s ease-out infinite}
  .ho-add{animation:ho-addbg 9s ease infinite}
  .ho-plus{animation:ho-r1b 9s ease infinite}
  .ho-check{animation:ho-r2b 9s ease infinite}
  .ho-t1{animation:ho-r1b 9s ease infinite}
  .ho-t2{animation:ho-r2b 9s ease infinite}
  .ho-ticket{animation:ho-print 9s cubic-bezier(.2,.8,.2,1) infinite}
}
@media(prefers-reduced-motion:reduce){
  .ho-r1,.ho-plus,.ho-t1{opacity:0}.ho-r2,.ho-check,.ho-t2,.ho-ticket{opacity:1}
  .ho-add{background:#e5372a;color:#fff}
}
@keyframes ho-bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-10px) rotate(.6deg)}}
@keyframes ho-ken{from{transform:scale(1.04)}to{transform:scale(1.16) translateX(-3%)}}
@keyframes ho-tap{0%,13%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(.6)}22%{opacity:0;transform:scale(2.4)}100%{opacity:0}}
@keyframes ho-r1{0%,16%{opacity:1;transform:none}20%,90%{opacity:0;transform:translateY(-.8em)}96%,100%{opacity:1;transform:none}}
@keyframes ho-r2{0%,17%{opacity:0;transform:translateY(.8em)}21%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ho-sugg{0%,26%{opacity:0;transform:translateY(1.6em) scale(.94)}34%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(.6em)}}
@keyframes ho-tap2{0%,48%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(.6)}57%{opacity:0;transform:scale(2.2)}100%{opacity:0}}
@keyframes ho-addbg{0%,51%{background:#fff;color:#e5372a}54%,90%{background:#e5372a;color:#fff}96%,100%{background:#fff;color:#e5372a}}
@keyframes ho-r1b{0%,51%{opacity:1}54%,90%{opacity:0}96%,100%{opacity:1}}
@keyframes ho-r2b{0%,51%{opacity:0}54%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes ho-print{0%,60%{opacity:0;transform:translate(-30%,0) rotate(0)}68%,90%{opacity:1;transform:translate(0,0) rotate(5deg)}97%,100%{opacity:0;transform:translate(6%,-4%) rotate(7deg)}}

/* ---------- scene ---------- */
.scene-ordering{--ph:min(60svh,560px);background:
  radial-gradient(60% 50% at 70% 55%,rgba(229,55,42,.28),transparent 70%),
  radial-gradient(40% 40% at 15% 20%,rgba(229,55,42,.10),transparent 70%),#0b0d0c;color:var(--chalk);overflow-x:clip}
.so-track{height:330vh}
.so-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;padding:84px 16px 20px;max-width:1180px;margin:0 auto}
.so-copy{position:relative;z-index:2}
.so-copy .kicker{color:#e98a82;margin-bottom:10px}
.so-beats{list-style:none;margin:0;padding:0;display:grid}
.so-beats li{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.so-beats li.on{opacity:1;transform:none}
.so-beats h3{font:800 clamp(2.3rem,9vw,4.6rem)/.92 var(--display);text-transform:uppercase;margin-bottom:10px}
.so-beats h3 em{font-style:normal;color:#ff5b4f}
.so-beats p{color:#c6cbc7;font-size:1.05rem;max-width:34ch}
.so-dots{display:flex;gap:6px;margin-top:16px}
.so-dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.18);transition:background .3s,width .3s}
.so-dots i.on{background:#e5372a;width:40px}
.so-3d{position:relative;display:grid;place-items:center;perspective:1300px;perspective-origin:50% 40%;min-height:0}
.so-floor{position:absolute;left:50%;bottom:2%;width:calc(var(--ph)*.6);height:calc(var(--ph)*.07);margin-left:calc(var(--ph)*-.3);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(6px)}
.so-phone{position:relative;width:calc(var(--ph)*.485);height:var(--ph);transform-style:preserve-3d;font-size:calc(var(--ph)/46);will-change:transform}
.so-face{position:absolute;inset:0;border-radius:3em;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d}
.so-front{transform:translateZ(.55em);padding:.6em;background:linear-gradient(145deg,#454847,#121413 30%,#060707 70%,#303332);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.so-back{transform:rotateY(180deg) translateZ(.55em);background:linear-gradient(120deg,#2b1210,#7a1a12 40%,#c42b1f 70%,#5a130e);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 60px rgba(0,0,0,.4) inset}
.so-back::before{content:"";position:absolute;left:1.3em;top:1.3em;width:7.4em;height:7.4em;border-radius:2em;background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(0,0,0,.25));box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.so-lens{position:absolute;width:2.7em;height:2.7em;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a4a63,#0b0d12 55%,#000);box-shadow:0 0 0 .32em #1a1a1a,0 0 0 .4em rgba(255,255,255,.15)}
.so-lens.l1{left:2em;top:2em}.so-lens.l2{left:5.2em;top:2em}.so-lens.l3{left:3.6em;top:5em}
.so-back-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 2.2em/1 var(--display);letter-spacing:.12em;color:rgba(255,255,255,.85);text-transform:uppercase}
.so-edge{position:absolute;top:3%;bottom:3%;width:1.1em;background:linear-gradient(180deg,#2a2d2c,#555958 20%,#1b1d1c 50%,#555958 80%,#2a2d2c);border-radius:.5em}
.so-edge.r{right:-.55em;transform:rotateY(90deg)}
.so-edge.l{left:-.55em;transform:rotateY(-90deg)}
.so-screen{position:relative;height:100%;border-radius:2.45em;overflow:hidden;background:#f7f5f0;color:#171a19}
.so-island{position:absolute;z-index:5;left:50%;top:.9em;width:6.4em;height:1.8em;margin-left:-3.2em;border-radius:1em;background:#050606}
.so-scr{position:absolute;inset:0;display:flex;flex-direction:column}
.so-cart{opacity:0}
.so-glare{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);background-size:250% 100%;background-position:100% 0;mix-blend-mode:screen}
/* menu screen */
.so-mhero{position:relative;height:38%;flex:none}
.so-mhero img{width:100%;height:100%;object-fit:cover;display:block}
.so-mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 35%,transparent 55%,rgba(0,0,0,.65))}
.so-mtop{position:absolute;z-index:1;left:1.2em;right:1.2em;top:3.6em;display:flex;justify-content:space-between;color:#fff;font-weight:700;font-size:.9em}
.so-mtitle{position:absolute;z-index:1;left:1.2em;bottom:1em;color:#fff}
.so-mtitle b{display:block;font:800 2.2em/1 var(--display);text-transform:uppercase}
.so-mtitle span{font-size:.9em;opacity:.85}
.so-chips{display:flex;gap:.5em;padding:1em 1.2em .6em;font-size:.86em;font-weight:700}
.so-chips span{padding:.45em .9em;border-radius:99px;background:#ebe8e1;color:#555a57;white-space:nowrap}
.so-chips span:first-child{background:#171a19;color:#fff}
.so-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8em;padding:.4em 1.2em}
.so-item{background:#fff;border-radius:1.1em;overflow:hidden;box-shadow:0 6px 16px -10px rgba(0,0,0,.3)}
.so-item img{display:block;width:100%;height:6.6em;object-fit:cover}
.so-item p{padding:.55em .7em .7em;line-height:1.2;font-size:.92em}
.so-item b{display:block}
.so-item span{color:#6b706d}
.so-bar{margin:auto 1.2em 1.6em;height:3.8em;border-radius:99px;background:#171a19;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 1.4em;font-weight:800}
/* cart screen */
.so-cart{padding:4.2em 1.2em 1.6em;gap:.9em}
.so-c-hi small{display:block;font-size:.8em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c22a1e}
.so-c-hi b{font:800 2.2em/1 var(--display);text-transform:uppercase}
.so-usual{position:relative;background:#fff;border-radius:1.3em;overflow:hidden;box-shadow:0 10px 24px -14px rgba(0,0,0,.4)}
.so-usual img{display:block;width:100%;height:9.5em;object-fit:cover}
.so-usual-b{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.8em .9em}
.so-usual-b p{line-height:1.2}
.so-usual-b b{display:block}
.so-usual-b p span{font-size:.86em;color:#6b706d}
.so-rbtn{position:relative;overflow:hidden;flex:none;display:grid;place-items:center;height:2.9em;padding:0 1.1em;border-radius:99px;background:#e5372a;color:#fff;font-weight:800;font-size:.92em}
.so-rbtn>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.3em}
.so-rbtn .b2{opacity:0}
.so-rtap{position:absolute;left:50%;top:50%;width:3em;height:3em;margin:-1.5em;border-radius:50%;background:rgba(255,255,255,.8);opacity:0}
.so-slot{height:7.6em;border-radius:1.3em;border:2px dashed rgba(229,55,42,.45);background:rgba(229,55,42,.05);flex:none}
.so-sum{margin-top:auto;display:grid;gap:.7em}
.so-sum-row{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;color:#6b706d;padding:0 .3em}
.so-sum-row b{display:grid;font:800 1.7em/1 var(--display);color:#171a19}
.so-sum-row b span{grid-area:1/1;text-align:right}
.so-sum-row .t2{opacity:0}
.so-place{height:3.8em;border-radius:99px;background:#e5372a;color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 12px 26px -12px rgba(229,55,42,.9)}
/* the card that pops out */
.so-pop{position:absolute;left:1.8em;right:1.8em;top:0;height:7.6em;backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:0;will-change:transform;transform-origin:50% 50%}
.so-pop-in{position:relative;height:100%;display:flex;align-items:center;gap:.9em;padding:.7em;border-radius:1.3em;background:#fff;color:#171a19;box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.so-pop-in img{width:6.2em;height:6.2em;border-radius:.95em;object-fit:cover;flex:none}
.so-pop-t{display:grid;line-height:1.18;min-width:0}
.so-pop-t small{font-size:.74em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#c22a1e}
.so-pop-t b{font:800 1.55em/1 var(--display);text-transform:uppercase;margin:.15em 0}
.so-pop-t span{font-size:.84em;color:#6b706d}
.so-pop-add{margin-left:auto;flex:none;display:grid;place-items:center;width:2.9em;height:2.9em;border-radius:50%;background:#e5372a;color:#fff}
.so-pop-add svg{grid-area:1/1}
.so-pop-add .ck{opacity:0}
.so-pop-sh{position:absolute;left:2.4em;right:2.4em;top:0;height:7.6em;border-radius:1.3em;background:rgba(0,0,0,.55);filter:blur(14px);opacity:0;transform:translateZ(1px)}
.so-pop-glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,91,79,.45),transparent);opacity:0;transform:translateZ(-1px);pointer-events:none}
/* kitchen ticket */
.so-ticket{position:absolute;right:-1.5em;top:1em;width:12.5em;padding:1em 1em 1.4em;background:#fffdf7;color:#1b1d1c;font:600 .95em/1.45 ui-monospace,Menlo,Consolas,monospace;border-radius:.3em;box-shadow:0 30px 50px -20px rgba(0,0,0,.7);opacity:0;transform-origin:50% 100%;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - .5em) no-repeat,radial-gradient(circle at 50% 100%,transparent .3em,#000 .32em) bottom/.8em .55em repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - .5em) no-repeat,radial-gradient(circle at 50% 100%,transparent .3em,#000 .32em) bottom/.8em .55em repeat-x}
.so-ticket .h{display:flex;justify-content:space-between;padding-bottom:.4em;margin-bottom:.4em;border-bottom:1px dashed #b9b5aa}
.so-ticket .f{display:flex;justify-content:space-between;margin-top:.5em;padding-top:.4em;border-top:1px dashed #b9b5aa}

@media(min-width:900px){
  .scene-ordering{--ph:min(74vh,680px)}
  .so-track{height:420vh}
  .so-stage{grid-template-rows:1fr;grid-template-columns:.9fr 1.1fr;align-items:center;padding:64px 16px 0}
  .so-beats p{font-size:1.2rem}
  .so-ticket{right:-9em;top:4em}
}

/* reduced motion: static, complete final state */
@media(prefers-reduced-motion:reduce){
  .so-track{height:auto}
  .so-stage{position:relative;height:auto;padding-top:56px;padding-bottom:56px;gap:32px}
  .so-beats{gap:22px}
  .so-beats li{grid-area:auto;opacity:1;transform:none}
  .so-beats h3{font-size:clamp(2rem,7vw,3rem)}
  .so-dots{display:none}
  .so-3d{padding:40px 0 20px}
}