/* Johnny’s Burritos motion layer 2 (v2.0.0) + v2 sections (stats, marquee, catering band, footer stores,
   portal store filter). Everything still looks right with no JS and with "reduce motion". */

/* ---------- scroll progress + header ---------- */
.jb-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:200;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--green),var(--gold),var(--clay));pointer-events:none}
header.site{transition:padding .3s ease,box-shadow .3s ease,background-color .3s ease}
header.site .brand-logo{transition:height .3s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
header.site.scrolled{box-shadow:0 8px 24px rgba(58,35,24,.14);background:rgba(255,253,247,.94);backdrop-filter:saturate(1.4) blur(8px)}
header.site.scrolled .header-inner{padding-top:6px;padding-bottom:6px}

/* ---------- hero v2: papel picado, floating ingredients, salsa drip ---------- */
.hero-v2{position:relative;overflow:hidden;padding-top:92px}
.hero-v2 .wrap{position:relative;z-index:2}
.picado{position:absolute;left:-2%;right:-2%;top:0;height:74px;display:flex;justify-content:space-between;z-index:1;pointer-events:none}
.picado::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(58,35,24,.35);border-radius:2px}
.picado .flag{position:relative;top:7px;width:calc(100%/12 - 6px);max-width:84px;height:62px;background:var(--c);opacity:.92;
  clip-path:polygon(0 0,100% 0,100% 78%,88% 100%,75% 84%,62% 100%,50% 84%,38% 100%,25% 84%,12% 100%,0 78%);
  -webkit-mask:radial-gradient(circle at 50% 42%,transparent 7px,#000 7.5px) ,radial-gradient(circle at 25% 26%,transparent 4px,#000 4.5px);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transform-origin:50% 0}
.jb-motion2 .picado .flag{animation:jb-sway 3.6s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.37s)}
@keyframes jb-sway{from{transform:rotate(-5deg) skewX(2deg)}to{transform:rotate(5deg) skewX(-2deg)}}
@media(max-width:640px){.picado .flag:nth-child(n+8){display:none}.picado .flag{width:calc(100%/7 - 6px)}.hero-v2{padding-top:84px}}

.floaters{position:absolute;inset:0;z-index:1;pointer-events:none}
.fl{position:absolute;width:56px;height:56px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.9;
  transform:translate(var(--px,0),var(--py,0));filter:drop-shadow(0 8px 10px rgba(58,35,24,.18))}
.fl > *{display:none}
.jb-motion2 .fl{animation:jb-bob 6s ease-in-out infinite}
.fl-chile{left:6%;top:30%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M46 10c4-6 10-6 12-4-5 0-8 3-9 7' stroke='%233d6b35' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M49 14c6 6 2 22-12 33C24 57 9 60 6 56c-2-3 10-6 20-16S38 18 49 14z' fill='%23b34a2a'/%3E%3Cpath d='M44 20c3 4 0 12-6 18' stroke='%23fff' stroke-opacity='.35' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.fl-avo{right:7%;top:24%;width:70px;height:70px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4c10 0 16 14 20 26 5 16-6 30-20 30S7 46 12 30C16 18 22 4 32 4z' fill='%233d6b35'/%3E%3Cpath d='M32 10c7 0 12 11 15 21 4 12-5 23-15 23s-19-11-15-23c3-10 8-21 15-21z' fill='%23d8e48f'/%3E%3Ccircle cx='32' cy='38' r='9' fill='%2386331d'/%3E%3C/svg%3E")}
.fl-lime{left:14%;bottom:20%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='26' fill='%2368a83a'/%3E%3Ccircle cx='32' cy='32' r='21' fill='%23d9f0a3'/%3E%3Cg stroke='%2368a83a' stroke-width='2.5'%3E%3Cpath d='M32 11v42M11 32h42M17 17l30 30M47 17L17 47'/%3E%3C/g%3E%3C/svg%3E")}
.fl-leaf{right:16%;bottom:16%;width:44px;height:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 54C8 30 24 10 54 8c2 28-18 46-44 46z' fill='%233d6b35'/%3E%3Cpath d='M12 52C24 40 34 28 50 12' stroke='%23d8e48f' stroke-width='3' fill='none'/%3E%3C/svg%3E")}
.fl-b{width:34px;height:34px;opacity:.55;filter:blur(.6px)}
.fl-chile.fl-b{left:auto;right:30%;top:12%}
.fl-leaf.fl-b{left:30%;right:auto;top:18%;bottom:auto}
.fl-avo.fl-b{left:3%;right:auto;top:auto;bottom:8%;width:40px;height:40px}
.fl:nth-child(2){animation-delay:-1.4s;animation-duration:7.5s}.fl:nth-child(3){animation-delay:-2.6s;animation-duration:5.4s}
.fl:nth-child(4){animation-delay:-3.1s}.fl:nth-child(5){animation-delay:-.8s;animation-duration:8s}.fl:nth-child(6){animation-delay:-4s}.fl:nth-child(7){animation-delay:-2s;animation-duration:9s}
@keyframes jb-bob{0%,100%{translate:0 0;rotate:-6deg}50%{translate:0 -14px;rotate:8deg}}
@media(max-width:760px){.fl{width:38px;height:38px;opacity:.7}.fl-avo{width:46px;height:46px}.fl-b{display:none}.fl-chile{top:auto;bottom:10%;left:4%}.fl-avo{top:auto;bottom:6%;right:4%}.fl-lime,.fl-leaf{display:none}}

.hero .clay-word{background:linear-gradient(100deg,var(--clay) 0%,var(--clay) 40%,#e98a4f 50%,var(--clay) 60%,var(--clay) 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jb-motion2 .hero .clay-word{animation:jb-shine 5s ease-in-out 2s infinite}
@keyframes jb-shine{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}

.hero-v2{border-bottom:6px solid var(--clay)!important}
.gallery{position:relative}
.salsa-drip{position:absolute;left:0;right:0;top:0;height:40px;z-index:2;line-height:0;pointer-events:none}
.salsa-drip svg{width:100%;height:100%;display:block}
.salsa-drip path{fill:var(--clay)}
.jb-motion2 .salsa-drip svg{animation:jb-drip 7s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes jb-drip{from{transform:scaleY(.86)}to{transform:scaleY(1.08)}}

/* open-now pulse on the hours badge */
.hours-badge{position:relative}
.jb-motion2 .hours-badge:not(.closed-now){animation:jb-glow 2.4s ease-out infinite}
@keyframes jb-glow{0%{box-shadow:0 0 0 0 rgba(61,107,53,.35)}80%,100%{box-shadow:0 0 0 12px rgba(61,107,53,0)}}

/* ---------- steam over the food photos ---------- */
.steam{position:absolute;left:0;right:0;top:0;height:60%;pointer-events:none;z-index:2;display:flex;justify-content:center;gap:16%}
.steam span{width:18px;height:90px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));filter:blur(7px);opacity:0;margin-top:30%}
.jb-motion2 .steam span{animation:jb-steam 4.2s ease-in infinite}
.steam span:nth-child(2){animation-delay:1.3s!important}.steam span:nth-child(3){animation-delay:2.6s!important}
@keyframes jb-steam{0%{opacity:0;transform:translateY(30px) scaleX(.6)}25%{opacity:.8}100%{opacity:0;transform:translateY(-90px) scaleX(1.6) rotate(12deg)}}

/* ---------- flavor marquee ---------- */
.marquee{background:var(--ink);color:#fbeed3;overflow:hidden;padding:14px 0;border-top:4px solid var(--gold);border-bottom:4px solid var(--clay);transform:rotate(-1.2deg) scale(1.03);margin:6px 0 -6px}
.marquee-track{display:flex;gap:28px;white-space:nowrap;width:max-content;font-family:var(--font-display);font-weight:800;font-style:italic;font-size:clamp(1.3rem,3.6vw,2rem);align-items:center}
.marquee-track i{color:var(--gold);font-style:normal;font-size:.8em}
.jb-motion2 .marquee-track{animation:jb-marquee 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes jb-marquee{to{transform:translateX(-50%)}}

/* ---------- stats band ---------- */
.stats-band{background:var(--paper);padding:54px 0 40px}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:980px}
@media(min-width:760px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-box{text-align:center;padding:18px 10px;border-radius:var(--radius);background:linear-gradient(180deg,#fff,#fbeed3);box-shadow:var(--shadow);border-bottom:4px solid var(--gold)}
.stat-n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,6vw,3.2rem);color:var(--clay);line-height:1;font-variant-numeric:tabular-nums}
.stat-n.pop{animation:jb-pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes jb-pop{50%{transform:scale(1.18)}}
.stat-l{font-family:"DM Sans",sans-serif;font-size:.86rem;margin-top:6px;opacity:.85}

/* ---------- reveal helpers (v2 blocks) ---------- */
.jb-motion2 .rv2{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d2,0ms)}
.jb-motion2 .rv2.in-2{opacity:1;transform:none}
.jb-motion2 .marquee.rv2{transform:rotate(-1.2deg) scale(1.03) translateY(24px)}
.jb-motion2 .marquee.rv2.in-2{transform:rotate(-1.2deg) scale(1.03)}
.stagger-in{animation:jb-up .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--st,0ms)}

/* ---------- 3D tilt + glare ---------- */
@media (hover:hover) and (pointer:fine){
  .feat-card,.loc-card,.step-card,.item-card,.g-card{transform-style:preserve-3d;will-change:transform;position:relative}
  .feat-card.tilting,.loc-card.tilting,.step-card.tilting,.item-card.tilting,.g-card.tilting{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px)!important;transition:transform .12s linear,box-shadow .3s ease}
  .feat-card::after,.item-card::after,.loc-card::after,.g-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%)}
  .tilting::after{opacity:1}
  .magnetic{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background-color .25s ease,color .25s ease!important}
}

/* ---------- add to cart: fly + bump ---------- */
.fly-img{position:fixed;z-index:300;object-fit:cover;pointer-events:none;box-shadow:0 12px 30px rgba(58,35,24,.35)}
.cart-btn.bump{animation:jb-bump .55s cubic-bezier(.3,1.8,.5,1)}
.cart-btn.bump .cart-count{animation:jb-pop .55s cubic-bezier(.3,1.8,.5,1)}
@keyframes jb-bump{30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.95) rotate(3deg)}}
.add-btn.added,.mini-btn.added{animation:jb-pop .45s cubic-bezier(.3,1.8,.5,1)}
.jb-confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:400;pointer-events:none}

/* menu tabs get a springy active state */
.tab{transition:transform .25s cubic-bezier(.3,1.6,.5,1),background-color .25s ease,color .25s ease}
.tab.active{transform:translateY(-2px)}
.item-card .photo-frame img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.item-card:hover .photo-frame img{transform:scale(1.07)}

/* ---------- catering band (home) ---------- */
.cater-band{background:var(--paper);padding:46px 0}
.cater-band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;max-width:980px;margin:0 auto;padding:30px 28px;border-radius:18px;
  background:repeating-linear-gradient(135deg,rgba(217,164,65,.10) 0 14px,transparent 14px 28px),#fbeed3;border:2px dashed rgba(179,74,42,.45)}
.cater-band-in .section-kicker,.cater-band-in .section-title{text-align:left}
.cater-band-in .section-title{margin-bottom:6px}
.cater-band-in p{max-width:520px}

/* ---------- catering page ---------- */
.cater-page .section-kicker,.cater-page .section-title,.cater-page .section-sub{text-align:center}
.cater-calls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.call-pill{display:flex;flex-direction:column;align-items:center;padding:10px 18px;border-radius:14px;background:var(--clay);color:#fff;font-family:"DM Sans",sans-serif;min-width:150px;transition:transform .25s ease,box-shadow .25s ease}
.call-pill span{font-weight:700;font-size:1.05rem}.call-pill strong{font-size:.8rem;opacity:.9;font-weight:500}
.call-pill:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(179,74,42,.3)}
.cater-phone-note{font-family:"DM Sans",sans-serif;font-weight:700;text-align:center}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.field-row{grid-template-columns:1fr}}

/* ---------- footer v2 ---------- */
.site-footer{position:relative;background:#26150d;color:#fbeed3;padding:56px 18px 0;margin-top:40px}
.foot-salsa{position:absolute;left:0;right:0;top:-28px;height:30px;line-height:0}
.foot-salsa svg{width:100%;height:100%;display:block;transform:scaleY(-1)}
.foot-salsa path{fill:#26150d}
.foot-inner{max-width:1000px;margin:0 auto;text-align:center}
.foot-logo{height:74px;width:auto;margin:0 auto;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.foot-thanks{font-family:"Pacifico",cursive;font-size:2rem;color:var(--gold);margin:8px 0 18px}
.foot-stores{display:grid;grid-template-columns:1fr;gap:14px;margin:0 auto 22px;max-width:900px}
@media(min-width:720px){.foot-stores{grid-template-columns:repeat(3,1fr)}}
.foot-store{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(251,238,211,.12);font-family:"DM Sans",sans-serif;font-size:.9rem}
.foot-store strong{color:#fff;font-size:1rem}
.foot-store a{color:#fbeed3;opacity:.85}.foot-store a:hover{color:var(--gold);opacity:1}
.foot-store .foot-tel{color:var(--gold);font-weight:700;opacity:1}
.foot-hrs{opacity:.7;font-size:.82rem}
.foot-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:6px 0 16px}
.foot-btn{display:inline-block;background:var(--clay);color:#fff;font-family:"DM Sans",sans-serif;font-weight:700;padding:11px 20px;border-radius:999px}
.foot-btn.ghost{background:transparent;border:2px solid var(--gold);color:var(--gold)}
.foot-line{font-family:"DM Sans",sans-serif;font-size:.9rem;margin:6px 0}
.foot-line a{color:#fbeed3}.foot-line .dot{opacity:.5;margin:0 6px}
.foot-lang{background:none;border:0;color:var(--gold);font:inherit;text-decoration:underline;cursor:pointer}
.foot-legal{font-family:"DM Sans",sans-serif;font-size:.82rem;opacity:.75;margin:10px 0}
.foot-legal a{color:#fbeed3}
.site-footer .mockup-note{font-size:.78rem;opacity:.55;margin:8px 0 0}
.maloremi-credit{margin-top:26px;padding:14px 10px 18px;border-top:1px solid rgba(251,238,211,.12);text-align:center;font-family:"DM Sans",sans-serif;font-size:.8rem;opacity:.75}
.maloremi-credit a{color:var(--gold)}
.jb-motion2 .foot-salsa svg{animation:jb-drip 6s ease-in-out infinite alternate}

/* ---------- order page bits ---------- */
.paused-note{background:#fff4e5;border:1px solid var(--gold);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-family:"DM Sans",sans-serif}
.pay-note{font-family:"DM Sans",sans-serif;font-size:.9rem;text-align:center;margin:10px 0}
.add-btn.soldout,.mini-btn.soldout{background:#d9d2c8!important;color:#6b5f55!important;cursor:not-allowed}

/* ---------- owner portal: store filter ---------- */
.pt-stores{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pt-chip{font:600 .85rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding:8px 12px;border-radius:999px;border:1px solid #d9d2c8;background:#fff;color:#3a2318;cursor:pointer}
.pt-chip span{display:inline-block;min-width:20px;padding:2px 6px;margin-left:4px;border-radius:999px;background:#f3ece4;font-size:.75rem}
.pt-chip.on{background:var(--clay);border-color:var(--clay);color:#fff}
.pt-chip.on span{background:rgba(255,255,255,.25)}
.pt-order .badge.store{background:#f3ece4;color:#3a2318;font-weight:600}
.pt-order header .num{font-size:1.15rem}

@media (prefers-reduced-motion: reduce){
  .picado .flag,.fl,.steam span,.marquee-track,.salsa-drip svg,.foot-salsa svg,.hero .clay-word,.hours-badge{animation:none!important}
  .steam{display:none}
  .rv2{opacity:1!important;transform:none!important}
}

html,body{overflow-x:clip}
.cater-form-box textarea{width:100%;min-height:110px;padding:12px;border-radius:10px;border:2px solid #e3d6c6;font:inherit}
.pt-order header{flex-wrap:wrap;row-gap:6px}
.pt-order .badge.store{order:5;flex-basis:auto}
.pt-order header .num{white-space:nowrap}