/* USMenuz — home.css (front page only) */

/* ---------- loader (max ~0.9 s, first visit only) ---------- */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:2500;background:var(--accent);color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;animation:curtain .7s var(--ease-io) 1.1s forwards}
.js.no-intro .loader{display:none}
.loader__logo{font:400 clamp(64px,12vw,160px)/.9 var(--f-display)}
.loader__lines{position:relative;height:24px;width:300px;font-weight:700;font-size:15px}
.loader__lines span{position:absolute;inset:0;text-align:center;opacity:0}
.loader__bar{width:220px;height:3px;background:rgba(18,16,14,.2);overflow:hidden}
.loader__bar span{display:block;height:100%;background:var(--bg);transform-origin:0 50%;transform:scaleX(0)}
@keyframes curtain{to{transform:translateY(-100%);visibility:hidden}}
@media (prefers-reduced-motion:reduce){.js .loader{display:none}}

/* ---------- progress + cursor ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1500;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.cursor{position:fixed;left:0;top:0;z-index:2400;pointer-events:none;display:none}
@media (pointer:fine){.js .cursor{display:block}}
.cursor__dot{position:fixed;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0}
.cursor__ring{position:fixed;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:1px solid var(--text);mix-blend-mode:difference;opacity:0;display:flex;align-items:center;justify-content:center;transition:width .35s var(--ease),height .35s var(--ease),left .35s var(--ease),top .35s var(--ease),background-color .35s}
.cursor.is-link .cursor__ring{width:84px;height:84px;left:-42px;top:-42px;background:var(--text)}
.cursor.is-label .cursor__ring{width:92px;height:92px;left:-46px;top:-46px;background:var(--accent);border-color:var(--accent);mix-blend-mode:normal}
.cursor__txt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--bg);opacity:0;transition:opacity .25s}
.cursor.is-label .cursor__txt{opacity:1}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:center;padding-block:clamp(36px,6vw,80px) clamp(40px,5vw,64px)}
.hero__copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.hero__h1{font:400 clamp(58px,9.4vw,138px)/.9 var(--f-display);text-transform:uppercase}
.hero__line{display:block}
.hero__rot{position:relative;display:block;height:1.06em;overflow:hidden;font-family:var(--f-serif);font-style:italic;text-transform:none;color:var(--accent);letter-spacing:-.025em;font-size:.88em;line-height:1.1}
.hero__rot-item{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
.hero__rot-item.is-on{opacity:1}
.hero__rot-item .char{display:inline-block}
.hero__trend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.hero__trend a{color:var(--text)}
.hero__trend a:hover{color:var(--accent)}
.hero__art{position:relative;display:flex;align-items:center;justify-content:center;min-height:540px}
.hero__disc{position:absolute;width:min(470px,92%);aspect-ratio:1;border-radius:50%;background:var(--accent)}
.hero__ring{position:absolute;width:min(560px,100%);aspect-ratio:1;border-radius:50%;border:1px dashed #4A423B;animation:spin 60s linear infinite}
.hero__para{position:relative;width:min(430px,86%)}
.hero__burger{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;animation:bob 6s ease-in-out infinite}
.hero__burger svg{width:100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
.hero__bubble{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);background:var(--cream);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;z-index:2}
.hero__badge{position:absolute;top:2%;left:0;width:132px;animation:spin 18s linear infinite}
.hero__badge svg{font-family:var(--f-body)}
.hero__c1{position:absolute;right:0;top:20%;display:flex;align-items:center;gap:10px}
.hero__c2{position:absolute;left:0;top:58%;display:flex;align-items:center;gap:10px}
.callout-el .line{width:52px;height:1px;background:var(--text)}
.callout--dark{background:var(--bg);color:var(--text);border:1px solid var(--text);font-weight:600;font-size:12px;line-height:1.4}
.hero__sticker{position:absolute;right:4%;bottom:14%}
@media (max-width:980px){.hero__in{grid-template-columns:minmax(0,1fr)}.hero__art{min-height:420px}}
@media (max-width:760px){.callout-el{display:none!important}.hero__art{min-height:340px}}

/* ---------- clock ---------- */
.clock{border-bottom:1px solid var(--line)}
.clock__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.clock__head,.clock__z{padding:22px 20px;display:flex;flex-direction:column;justify-content:center;gap:6px;border-right:1px solid var(--line)}
.clock__head{padding-left:0}
.live{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--green)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
.clock__t{font-style:italic;font-size:26px;line-height:1.1}
.clock__time{font:400 40px/1 var(--f-display);min-height:40px}
.clock__meal{font-size:13px;font-weight:600;color:var(--accent-soft);min-height:1.6em}
@media (max-width:520px){.clock__head,.clock__z{border-right:0;border-bottom:1px solid var(--line);padding-left:0}}

/* ---------- big marquee (speed follows scroll) ---------- */
.bigmq{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);padding:18px 0;display:flex;flex-direction:column;gap:6px}
.bigmq__track{display:inline-flex;align-items:center;gap:36px;width:max-content;will-change:transform}
.bigmq__row--a .bigmq__track{font:400 clamp(56px,8vw,110px)/1 var(--f-display);text-transform:uppercase}
.bigmq__row--b .bigmq__track{font:italic 400 clamp(40px,5vw,72px)/1.1 var(--f-serif);color:var(--muted)}
.bigmq__row--a .bigmq__track{animation:mq 40s linear infinite}
.bigmq__row--b .bigmq__track{animation:mq 46s linear infinite reverse}
.gsap-on .bigmq__track{animation:none!important}

/* ---------- popular ---------- */
.home-filter{margin:-8px 0 24px}
.popular .tile[hidden]{display:none}
.small-link{margin-top:18px;font-size:14px}

/* ---------- hungry now (pinned horizontal) ---------- */
.hs{margin-top:clamp(56px,8vw,88px)}
.hs__pin{display:flex;flex-direction:column;justify-content:center;gap:28px;overflow:hidden}
.hs__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;width:100%}
.hs__arrows{display:flex;gap:8px}
.hs__arrows .icon-btn{width:52px;height:52px;font-size:20px}
.hs__arrows .btn--accent{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.hs__viewport{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.hs__viewport::-webkit-scrollbar{display:none}
.hs__track{display:flex;gap:16px;width:max-content;padding:6px var(--gut) 6px max(var(--gut),calc((100vw - var(--wrap)) / 2 + 40px))}
.hs__track[hidden]{display:none}
.gsap-pin .hs__viewport{overflow:visible;scroll-snap-type:none}
.gsap-pin .hs__arrows{display:none}
.ncard{flex:0 0 300px;height:420px;scroll-snap-align:start;position:relative;overflow:hidden;border-radius:var(--r);padding:22px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;background:var(--bg-c);color:var(--fg-c);transition:transform .5s var(--ease)}
.ncard:hover{color:var(--fg-c)}
.ncard__top{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ncard__art{display:flex;justify-content:center;align-items:center;height:160px}
.ncard__art svg{height:150px;width:auto;max-width:190px;transition:transform .6s var(--ease)}
.ncard:hover .ncard__art svg{transform:scale(1.1) rotate(-6deg)}
.ncard__bot{display:flex;flex-direction:column;gap:10px}
.ncard__name{font:400 34px/.95 var(--f-display);text-transform:uppercase}
.ncard__row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid currentColor;padding-top:10px;font-size:14px;font-weight:600}
.ncard__price{font:400 26px/1 var(--f-display)}
.ncard--more{--bg-c:transparent;--fg-c:var(--text);border:1px dashed #4A423B;align-items:center;justify-content:center;gap:14px;text-align:center}
.ncard__go{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:26px;transition:transform .4s var(--ease)}
.ncard--more:hover .ncard__go{transform:rotate(45deg) scale(1.1)}
@media (max-width:600px){.ncard{flex-basis:260px;height:380px}}

/* ---------- craving ---------- */
.crave{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));grid-auto-rows:200px}
.crave .ccard{min-height:0}
.also{margin-top:18px;font-size:14px;color:var(--muted);line-height:1.9}

/* ---------- healthy split ---------- */
.split-sec{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;border-top:1px solid var(--line);padding-top:40px}
.split-sec__l{flex:1 1 380px}
.split-sec__r{flex:1.3 1 460px;display:flex;flex-direction:column}
.serif-h{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:-.02em;font-size:clamp(44px,5.5vw,76px);line-height:.95}
.serif-h .c-green{font-family:var(--f-display);font-style:normal;text-transform:uppercase;letter-spacing:0}

/* ---------- deals band ---------- */
.deals-band{margin-top:clamp(64px,9vw,96px);padding-block:clamp(56px,8vw,80px)}
.deals-band .sh__link{color:var(--bg)}
.home-tickets .ticket{border:0}

/* ---------- recipes ---------- */
.rec-grid{display:flex;flex-wrap:wrap;gap:16px}
.rec-feature{flex:1.4 1 480px;min-height:440px;position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;color:var(--text);text-decoration:none}
.rec-feature:hover{color:var(--text)}
.rec-feature__disc{position:absolute;right:-20px;top:20px;width:300px;height:300px;border-radius:50%;background:var(--accent)}
.rec-feature__art{position:absolute;right:10px;top:56px;width:260px;transition:transform .7s var(--ease)}
.rec-feature:hover .rec-feature__art{transform:rotate(-8deg) scale(1.06)}
.rec-feature>*:not([aria-hidden]){position:relative}
.rec-feature__t{font-size:clamp(38px,4.5vw,60px);line-height:.95;letter-spacing:-.02em}
.rec-side{flex:1 1 340px;display:flex;flex-direction:column;gap:16px}
.rec-side .ccard{flex:1 1 200px}

/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:32px}
.trust__i{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);padding-top:22px;font-size:15px;line-height:1.6}
.trust__i strong{font-size:19px}
.trust__n{font:400 88px/.85 var(--f-display)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){.hero__rot-item{position:static;opacity:1;display:none}.hero__rot-item.is-on{display:inline}}

/* ---------- hero intro (CSS, so the headline never waits for JS = good LCP) ---------- */
.home{--hero-delay:0s}
.js:not(.no-intro) .home{--hero-delay:.95s}
.js .hero__h1 .w>span{animation:wordUp .95s var(--ease) calc(var(--i)*70ms + var(--hero-delay)) both}
.js .hero__fade{animation:fadeUp .9s var(--ease) calc(var(--hero-delay) + .3s) both}
.js .hero__art{animation:fadeUp 1.1s var(--ease) calc(var(--hero-delay) + .1s) both}
.js .hero__rot{animation:fadeUp .8s var(--ease) calc(var(--hero-delay) + .3s) both}
.gsap-pin .hs__pin{height:100vh;height:100svh}
.gsap-pin .hs{margin-top:clamp(24px,4vw,40px)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
@media (max-width:600px){
  .clock__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clock__head{grid-column:1/-1}
  .clock__z{padding:14px 0;border-right:0;border-bottom:1px solid var(--line)}
  .clock__time{font-size:28px;min-height:28px}
  .clock__meal{font-size:12px}
  .hero__art{min-height:300px}
}