/* Reflections, glows and scroll motion for all three looks.
   --p: 0 entering the screen to 1 leaving it. --v: 1 at screen centre. --h: hero scrolled away.
   --g: each item's own colour, set by the build. */
:root{--p:.5;--v:.7;--h:0}
html{overflow-x:clip}

/* ---------- Shared: glow behind each transparent photo ---------- */
.item .ph{background:radial-gradient(closest-side,rgba(255,150,40,.3),transparent)}
@supports (color:color-mix(in srgb,red,blue)){
  .item .ph{--a:calc(14 + var(--v)*44);background:radial-gradient(closest-side at 50% 46%,
    color-mix(in srgb,var(--g,#ffb040) calc(var(--a)*1%),transparent) 0,
    color-mix(in srgb,var(--g,#ffb040) calc(var(--a)*.62%),transparent) 38%,
    color-mix(in srgb,var(--g,#ffb040) calc(var(--a)*.2%),transparent) 68%,
    transparent 100%)}
}

.chili.on{filter:drop-shadow(0 0 4px rgba(255,50,20,.85))}

.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.motes{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* Mirrored logo */
.hero h1{position:relative}
.hero h1::after{content:"";position:absolute;left:0;right:0;top:100%;margin-top:6px;aspect-ratio:978/258;background:url(../img/logo-full.webp) center/100% 100% no-repeat;transform:scaleY(-1);opacity:.34;-webkit-mask-image:linear-gradient(to top,#000,transparent 72%);mask-image:linear-gradient(to top,#000,transparent 72%);pointer-events:none}

/* Glossy buttons with a floor reflection */
.btns{gap:34px}
.btn{position:relative;background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);background-size:260% 100%;background-repeat:no-repeat;background-position:130% 0}
.btn::before{content:"";position:absolute;left:0;right:0;top:100%;height:62%;margin-top:3px;background:inherit;background-image:none;transform:scaleY(-1);opacity:.3;-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent);pointer-events:none}
.btn-wa::before{background:#25d366}

/* ---------- Scroll motion (nothing here applies with reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn{animation:sheen 4.2s ease-in-out infinite}
  @keyframes sheen{0%,55%{background-position:130% 0}100%{background-position:-30% 0}}

  .js .item,.js .extras,.js .avail,.js .btns{transition:opacity .6s ease var(--d,0s),transform .75s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
  .js .item:not(.in),.js .extras:not(.in),.js .avail:not(.in),.js .btns:not(.in){opacity:0;transform:translateY(34px)}

  .js .chili{transition:fill .25s ease calc(var(--d,0s) + .4s + var(--c,0s)),stroke .25s ease calc(var(--d,0s) + .4s + var(--c,0s))}
  .chili:nth-child(2){--c:.11s}.chili:nth-child(3){--c:.22s}.chili:nth-child(4){--c:.33s}
  .js .item:not(.in) .chili.on{fill:none;stroke:#8c8c8c;filter:none}

  .js .cat-head h2{transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
  .js .cat-head:not(.in) h2{opacity:0;transform:translateY(40px)}
}

/* ---------- Black glass ---------- */
.look-black-glass .item .ph{background-color:transparent}
.look-black-glass .prog{background:#ffb81c;box-shadow:0 0 12px 1px rgba(255,184,28,.8)}
.look-black-glass .cats a[aria-current]{text-shadow:0 0 16px rgba(255,184,28,.85)}
.look-black-glass .logo{filter:drop-shadow(0 0 26px rgba(255,184,28,.42))}
.look-black-glass .hero::before{content:"";position:absolute;left:50%;bottom:-8svh;width:min(150vw,1400px);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,132,24,.5),rgba(255,90,10,.14) 58%,transparent)}
.look-black-glass .hero::after{content:"";position:absolute;left:0;right:0;bottom:15svh;height:2px;background:linear-gradient(90deg,transparent,rgba(255,200,120,.8),transparent);box-shadow:0 0 34px 6px rgba(255,160,60,.4);pointer-events:none}
.look-black-glass .hero-burger,.look-black-glass .hero-brand{position:relative}
.look-black-glass .hero-burger{z-index:1}
.look-black-glass .cat-head h2{text-shadow:0 0 44px rgba(255,255,255,.2)}
.look-black-glass .cat-head h2::after{display:flex;flex-direction:column;justify-content:flex-end;text-shadow:none}
.look-black-glass #beef .cat-head h2::after,.look-black-glass #chicken .cat-head h2::after,.look-black-glass #meal .cat-head h2::after,.look-black-glass #loaded .cat-head h2::after{display:flex}
.look-black-glass .item h3{text-shadow:0 0 22px var(--g,transparent)}
.look-black-glass .price b{text-shadow:0 0 18px rgba(255,184,28,.6)}
.look-black-glass .extras li{border-color:rgba(255,184,28,.55);box-shadow:0 0 18px rgba(255,184,28,.2),inset 0 0 12px rgba(255,184,28,.1)}
.look-black-glass .order{background:radial-gradient(ellipse 70% 90% at 50% 100%,rgba(255,150,30,.22),transparent)}
.look-black-glass .btn-order{box-shadow:0 0 34px rgba(255,184,28,.5)}
.look-black-glass .btn-wa{box-shadow:0 0 26px rgba(37,211,102,.35),inset 0 0 18px rgba(37,211,102,.12)}
@media (prefers-reduced-motion:no-preference){
  .look-black-glass .hero::before{animation:breathe 4.5s ease-in-out infinite alternate}
  @keyframes breathe{from{opacity:.68}to{opacity:1}}
  .look-black-glass .hero-burger{scale:calc(1 + var(--h)*.3);translate:0 calc(var(--h)*-9%)}
  .look-black-glass .hero-brand{translate:0 calc(var(--h)*22vh);opacity:calc(1 - var(--h)*1.5)}
  .look-black-glass .item .ph{translate:0 calc((.5 - var(--p))*70px);scale:calc(.86 + var(--v)*.16)}
  .look-black-glass .cat-head h2{translate:calc((.55 - var(--p))*9vw) 0}
}

/* ---------- Cheese poster ---------- */
.look-cheese-poster{--drip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 90' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpath id='d' d='M0 0h480v12c-16 0-22 6-25 22-3 22-27 22-30 0-2-14-9-20-24-20s-22 8-26 40c-3 30-30 30-33-3-2-22-11-34-30-34s-26 10-30 22c-3 12-22 12-25-2-2-12-10-20-26-20s-24 10-27 52c-3 28-29 28-32-2-2-32-10-50-34-50s-30 8-33 20c-4 14-23 14-27 0-3-14-11-22-29-22s-22 3-29 3z'/%3E%3C/defs%3E%3Cuse href='%23d' fill='%23ffb81c'/%3E%3Cuse href='%23d' fill='none' stroke='%23ffe9a8' stroke-width='2.4' transform='translate(0 -3.5)'/%3E%3C/svg%3E")}
.look-cheese-poster .hero-drip,.look-cheese-poster .cat-head::after{filter:drop-shadow(0 8px 22px rgba(255,184,28,.5))}
.look-cheese-poster .hero-burger{position:relative;z-index:1;background:radial-gradient(closest-side at 50% 52%,rgba(255,170,30,.46),transparent)}
.look-cheese-poster .cats{box-shadow:0 6px 26px rgba(255,184,28,.45)}
.look-cheese-poster .cats a[aria-current]{box-shadow:0 0 16px rgba(0,0,0,.45)}
.look-cheese-poster .prog{background:#000;height:3px}
.look-cheese-poster .cat-head,.look-cheese-poster .hero-brand,.look-cheese-poster .order{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);background-size:260% 100%;background-repeat:no-repeat;background-position:calc(120% - var(--p)*140%) 0}
.look-cheese-poster .cat-mini .item h3{margin-top:12px}
.look-cheese-poster .cat-head h2{position:relative;z-index:1}
.look-cheese-poster .cat-head h2::after{content:attr(data-t);position:absolute;left:0;right:0;top:100%;margin-top:.03em;height:.62em;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;transform:scaleY(-1);color:rgba(120,62,0,.5);-webkit-mask-image:linear-gradient(to top,#000,transparent 90%);mask-image:linear-gradient(to top,#000,transparent 90%);pointer-events:none}
.look-cheese-poster .price>b,.look-cheese-poster .price.two>span{box-shadow:0 0 20px rgba(255,184,28,.5)}
.look-cheese-poster .price.two>span:nth-child(2){box-shadow:0 0 20px rgba(255,255,255,.3)}
.look-cheese-poster .extras li{box-shadow:0 0 18px rgba(255,255,255,.3)}
.look-cheese-poster .logo{filter:brightness(0) drop-shadow(0 3px 0 rgba(255,235,170,.65))}
.look-cheese-poster .hero h1::after{filter:brightness(0);opacity:.2}
.look-cheese-poster .btn-wa{box-shadow:0 0 26px rgba(255,255,255,.4)}
.look-cheese-poster .btn-wa::before{background:#fff}
.look-cheese-poster .btn-order{box-shadow:0 0 26px rgba(0,0,0,.35)}
.tel{display:inline-flex;align-items:center;gap:8px}
.tel svg{width:17px;height:17px;flex:none;fill:currentColor}
.order p a{font-weight:700;text-underline-offset:3px}
.look-cheese-poster .order,.look-cheese-poster .foot{text-align:center}
.look-cheese-poster .order p{margin:14px auto 32px}
.look-cheese-poster .btns,.look-cheese-poster .foot img{margin-inline:auto}
@media (prefers-reduced-motion:no-preference){
  .look-cheese-poster .cat-head::after{transform:scaleY(calc(.5 + var(--p)*1.15));transform-origin:50% 0}
  .look-cheese-poster .hero-burger{translate:0 calc(var(--h)*-10%);rotate:calc(var(--h)*-5deg);scale:calc(1 + var(--h)*.16)}
  .js .look-cheese-poster .cat-feature .item:nth-child(odd):not(.in),.js .look-cheese-poster .cat-grid .item:nth-child(odd):not(.in){transform:translateX(-56px) rotate(-2.5deg)}
  .js .look-cheese-poster .cat-feature .item:nth-child(even):not(.in),.js .look-cheese-poster .cat-grid .item:nth-child(even):not(.in){transform:translateX(56px) rotate(2.5deg)}
  .js .look-cheese-poster .price>b,.js .look-cheese-poster .price.two>span{transition:transform .42s cubic-bezier(.3,1.7,.5,1) calc(var(--d,0s) + .32s),opacity .15s ease calc(var(--d,0s) + .32s)}
  .js .look-cheese-poster .item:not(.in) .price>b,.js .look-cheese-poster .item:not(.in) .price.two>span{transform:scale(1.7) rotate(-7deg);opacity:0}
  .look-cheese-poster .item .ph{rotate:calc((.5 - var(--p))*7deg)}
}

/* ---------- Printed menu ---------- */
.look-printed-menu .prog{background:#e8e8e8;box-shadow:0 0 10px rgba(255,255,255,.75)}
.look-printed-menu .cats a[aria-current]{box-shadow:0 0 16px rgba(255,255,255,.45)}
.look-printed-menu .hero{box-shadow:inset 0 0 0 7px #000,inset 0 0 0 8px var(--frame),0 0 44px rgba(255,255,255,.14),inset 0 0 130px rgba(255,255,255,.07)}
.look-printed-menu .logo{filter:drop-shadow(0 0 20px rgba(255,255,255,.4))}
.look-printed-menu .menu-word{text-shadow:0 0 22px rgba(255,255,255,.55)}
.look-printed-menu .cat,.look-printed-menu .order{box-shadow:inset 0 0 0 6px #000,inset 0 0 0 7px var(--frame),0 0 36px rgba(255,255,255,.11),inset 0 0 90px rgba(255,255,255,.04)}
.look-printed-menu .cat-head h2{background-image:linear-gradient(105deg,#979797 28%,#fff 48%,#979797 68%);background-size:260% 100%;background-position:calc(100% - var(--p)*100%) 0;filter:drop-shadow(0 0 14px rgba(255,255,255,.22));-webkit-box-reflect:below 3px linear-gradient(transparent 62%,rgba(255,255,255,.3));margin-bottom:34px}
.look-printed-menu .price b{text-shadow:0 0 12px rgba(255,255,255,.45)}
.look-printed-menu .extras li{box-shadow:0 0 14px rgba(255,255,255,.2)}
.look-printed-menu .btn-order{box-shadow:0 0 30px rgba(255,255,255,.35)}
.look-printed-menu .btn-order::before{background:#f0f0f0}
.look-printed-menu .btn-wa{box-shadow:0 0 24px rgba(37,211,102,.3)}
@media (prefers-reduced-motion:no-preference){
  .look-printed-menu .hero h1,.look-printed-menu .menu-word{translate:0 calc(var(--h)*14vh);opacity:calc(1 - var(--h)*1.4)}
  .js .look-printed-menu .cat,.js .look-printed-menu .order{transition:box-shadow 1.1s ease}
  .js .look-printed-menu .cat:not(.in),.js .look-printed-menu .order:not(.in){box-shadow:inset 0 0 0 6px #000,inset 0 0 0 7px #2a2a2a}
  .js .look-printed-menu .cat-grid .item:not(.in),.js .look-printed-menu .cat-mini .item:not(.in),.js .look-printed-menu .cat-list .item:not(.in){transform:translateX(-30px)}
  .look-printed-menu .cat-feature .ph{translate:0 calc((.5 - var(--p))*34px);scale:calc(.9 + var(--v)*.12)}
  .js .look-printed-menu .cat-head h2::before,.js .look-printed-menu .cat-head h2::after{transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s}
  .js .look-printed-menu .cat-head:not(.in) h2::before,.js .look-printed-menu .cat-head:not(.in) h2::after{transform:scaleX(0)}
}