/* LORENZO · Boulevard World — digital menu v3 (from "Lorenzo_BVL Final.ai") */
@font-face{font-family:"Almarai";src:url(fonts/Almarai-700.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Almarai";src:url(fonts/Almarai-800.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-500.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/Barlow-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --green:#024925; --ring:#0C6037; --kick:#157347; --grey:#58595B; --cal:#8A8A84;
  --saffron:#F8BD04; --white-en:#E1E8DC; --white-cal:#B9D2BF;
  --paper:#FBF6E9; --card:#FFFDF8; --gold:#E9C24A; --red:#EB484B;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.45,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--green);font-family:"Almarai",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;user-select:none;-webkit-user-drag:none}
button{font:inherit;cursor:pointer}
.lat{font-family:"Barlow",system-ui,sans-serif;direction:ltr;unicode-bidi:isolate}
body.is-loading{overflow:hidden}

/* ---------- Opening: drone show ---------- */
#intro{position:fixed;inset:0;z-index:60;background:#020b06;overflow:hidden;transition:background-color .9s ease}
#intro.out{background:transparent}
#intro .veil{position:absolute;inset:0;background:#020b06;opacity:0;pointer-events:none}
#intro.out{pointer-events:none}
#intro.out #sky,#intro.out #intro-fw,#intro.out .intro-sub,#intro.out .intro-tag,#intro.out .skip{transition:opacity .9s ease;opacity:0}
#intro.gone{display:none}
#sky,#intro-fw{position:absolute;inset:0;width:100%;height:100%}
.intro-logo{position:absolute;opacity:0;transition:opacity 1.1s ease, filter 1.4s ease;filter:drop-shadow(0 0 26px rgba(255,236,170,.5))}
.intro-logo.on{opacity:1;filter:drop-shadow(0 0 10px rgba(255,236,170,.22))}
.intro-logo.fly{transition:left 1.15s cubic-bezier(.7,0,.25,1), top 1.15s cubic-bezier(.7,0,.25,1), width 1.15s cubic-bezier(.7,0,.25,1), height 1.15s cubic-bezier(.7,0,.25,1), filter .9s ease;filter:drop-shadow(0 0 0 rgba(255,236,170,0))}
.intro-logo .sweep{position:absolute;inset:-10%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-130%);mix-blend-mode:screen;pointer-events:none}
.intro-logo.on .sweep{animation:sweep 1.3s ease-out .25s 1}
@keyframes sweep{to{transform:translateX(130%)}}
.intro-tag{position:absolute;left:50%;translate:-50% 0;opacity:0;clip-path:inset(0 0 0 100%);transition:opacity .8s ease .2s, clip-path 1.1s cubic-bezier(.16,1,.3,1) .2s}
.intro-tag.on{opacity:1;clip-path:inset(-5% -2% -5% -2%)}
.intro-logo img{position:absolute}
.intro-sub{position:absolute;left:0;right:0;text-align:center;color:var(--saffron);font-weight:800;opacity:0;transform:translateY(14px);transition:opacity .9s ease .3s, transform 1s var(--ease-out) .3s}
.intro-sub.on{opacity:1;transform:none}
.skip{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:22px;z-index:3;background:rgba(255,255,255,.08);color:#f3eedc;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 18px;font-size:14px;backdrop-filter:blur(6px)}

/* ---------- Stage (16:9 board) ---------- */
#stage-wrap{position:fixed;inset:0;overflow:hidden;background:var(--paper);display:none}
body.mode-stage #stage-wrap{display:block}
body.mode-stage{overflow:hidden}
#stage{position:absolute;left:0;top:0;width:2880px;height:1620px;transform-origin:0 0;direction:ltr}
#stage .plate{position:absolute;inset:0;width:100%;height:100%}
#stage .abs{position:absolute;white-space:nowrap;line-height:1}
#stage .ar{font-family:"Almarai";font-weight:800;direction:rtl;margin-top:-.29em}
#stage .lat{margin-top:-.12em}
#stage .c{translate:-50% 0}
.pos{position:absolute}

.arch{position:absolute;overflow:hidden;isolation:isolate}
.arch .ph{position:absolute}
.arch .ph img{width:100%;height:100%;transform-origin:50% 70%}
.arch.kb .ph img{animation:kenburns 28s ease-in-out infinite alternate}
@keyframes kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.07) translate(-1.2%,1%)}}
.arch .glint{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 44%,rgba(255,236,190,.2) 50%,transparent 56%);transform:translateX(-120%);pointer-events:none}
.arch.kb .glint{animation:glint 12s ease-in-out 1s infinite}
@keyframes glint{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.fw-box{position:absolute;overflow:hidden;pointer-events:none}
.fw-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.sky-sparks i{position:absolute;width:5px;height:5px;border-radius:50%;background:#FFE7A0;box-shadow:0 0 8px 3px rgba(248,189,4,.6);opacity:0;animation:twinkle var(--t,3s) ease-in-out var(--d,0s) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

.it{position:absolute;inset:0;pointer-events:none}
.it .hit{position:absolute;pointer-events:auto;cursor:pointer;border-radius:22px}
.it .im{position:absolute}
.it .im img{width:100%;height:100%;transition:transform 1.1s var(--ease-out), filter .6s ease}
.it.spot .im img,.it.hov .im img{transform:translateY(-6px) scale(1.07);filter:drop-shadow(0 16px 16px rgba(40,30,10,.22))}
.it.pizza.spot .im img,.it.pizza.hov .im img{transform:scale(1.06) rotate(32deg);filter:none}
.pill{position:absolute;transition:transform .6s var(--ease-out), filter .6s ease}
.pill img{width:100%;height:100%}
.it.spot .pill,.it.hov .pill{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(248,189,4,.75))}
.rs{display:inline-block;width:.78em;height:.88em;vertical-align:-.08em;fill:currentColor;margin-inline-end:.18em}
.halo{position:absolute;border-radius:50%;border:3px solid var(--saffron);opacity:0;transform:scale(.92);transition:opacity .6s ease, transform .9s var(--ease-out);pointer-events:none}
.it.spot .halo,.it.hov .halo{opacity:.9;transform:scale(1.04)}

.foot-shine{position:absolute;overflow:hidden;pointer-events:none}
.foot-shine::after{content:"";position:absolute;top:0;bottom:0;width:18%;left:-20%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,240,190,.28),rgba(255,255,255,0));animation:footrun 9s linear infinite}
@keyframes footrun{0%{left:-20%}100%{left:105%}}

/* entrance choreography */
.e{opacity:0}
.e-up{transform:translateY(22px)}
.e-spin{transform:rotate(-150deg) scale(.55)}
.e-pop{transform:translateY(28px) scale(.86)}
.e-zoom{transform:scale(1.15)}
.e-pill{transform:scaleX(0)}
.e-wipe-l{clip-path:inset(0 100% 0 0)}
.e-wipe-r{clip-path:inset(0 0 0 100%)}
.e-plate{clip-path:inset(0 0 0 100%)}
.e.in{opacity:1;transform:none;transition:opacity .9s ease var(--d,0s), transform 1.25s var(--ease-out) var(--d,0s), clip-path 1.3s var(--ease-out) var(--d,0s)}
.e-wipe-l.in,.e-wipe-r.in{clip-path:inset(-10% -2% -10% -2%)}
.e-plate.in{clip-path:inset(0 0 0 0);transition:opacity .4s ease, clip-path 1.6s cubic-bezier(.65,0,.35,1)}
.e-spin.in{transition:opacity .7s ease var(--d,0s), transform 1.7s var(--ease-out) var(--d,0s)}
.e-zoom.in{transition:opacity 1.2s ease var(--d,0s), transform 3.2s var(--ease-out) var(--d,0s)}
.e-pill.in{transition:opacity .5s ease var(--d,0s), transform .9s var(--ease-out) var(--d,0s)}

/* ---------- Mobile ---------- */
#mobile{display:none;direction:rtl;overflow-x:clip;max-width:100vw}
body.mode-mobile #mobile{display:block}
.m-hero{position:relative;background:var(--green);color:#fff;padding:calc(26px + env(safe-area-inset-top)) 16px 0;overflow:hidden}
.m-hero>*{position:relative;z-index:1}
.m-hero .hero-fw{position:absolute;inset:0;width:100%;height:62%;z-index:0;pointer-events:none}
.m-logo{position:relative;width:min(62vw,290px);aspect-ratio:var(--lr,2.68);margin:0 auto}
.m-logo img{position:absolute}
.m-tag{width:min(64vw,270px);margin:18px auto 0}
.m-sky{width:min(88vw,400px);margin:8px auto 0}
.m-line{width:96px;height:1px;background:var(--saffron);margin:12px auto 0;opacity:.8}
.m-sub{text-align:center;font-weight:800;font-size:19px;margin-top:10px}
.m-sub-en{text-align:center;color:var(--saffron);font-family:"Barlow";font-weight:600;font-size:10.5px;letter-spacing:.32em;margin-top:6px}
.m-arch-wrap{position:relative;width:min(88vw,430px);aspect-ratio:807/583.5;margin:22px auto 0}
.m-arch-wrap .gold,.m-arch-wrap .m-arch{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.m-arch-wrap .gold{background:var(--saffron);inset:-5px -5px 0 -5px}
.m-arch{overflow:hidden}
.m-arch img{position:absolute;width:100%;left:0;top:-45.6%;height:auto;animation:kenburns 24s ease-in-out infinite alternate}
.m-arch .fw-canvas{z-index:1}

.m-nav{position:sticky;top:0;z-index:20;background:rgba(251,246,233,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(233,194,74,.45)}
.m-nav-in{display:flex;gap:8px;overflow-x:auto;padding:11px 16px;scrollbar-width:none}
.m-nav-in::-webkit-scrollbar{display:none}
.m-chip{flex:0 0 auto;border:1.5px solid var(--gold);background:var(--card);color:var(--green);border-radius:999px;padding:8px 15px;font-weight:800;font-size:14px;transition:background .3s,color .3s}
.m-chip.on{background:var(--green);border-color:var(--green);color:#fff}

.m-green{background:var(--green);padding:26px 14px 30px;position:relative}
.m-green::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:10px;background:radial-gradient(circle at 50% 0,var(--green) 4px,transparent 4.5px) 0 0/14px 10px repeat-x}
.m-sections{padding:20px 14px 8px;display:flex;flex-direction:column;gap:16px}
.m-panel{position:relative;background:var(--card);border-radius:26px;padding:8px;box-shadow:0 10px 24px -16px rgba(120,90,30,.4)}
.m-panel-in{border:1.6px solid var(--gold);border-radius:20px;padding:16px 12px 18px}
.m-head{display:flex;align-items:center;gap:10px;margin:2px 4px 16px}
.m-head h2{font-weight:800;font-size:25px;line-height:1.1;white-space:nowrap}
.m-head .k{font-family:"Barlow";font-weight:600;font-size:10px;letter-spacing:.22em;color:var(--kick);white-space:nowrap;direction:ltr}
.m-head .ln{flex:1;min-width:14px;height:1px;background:var(--gold);position:relative}
.m-head .ln::before{content:"";position:absolute;right:-3px;top:-3px;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.m-green .m-head h2{color:#fff}.m-green .m-head .k{color:var(--saffron)}.m-green .m-head .ln{background:#fff}.m-green .m-head .ln::before{background:#fff}
.m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
.m-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-item{display:flex;flex-direction:column;align-items:center;text-align:center;background:none;border:0;color:inherit;padding:2px}
.m-media{width:100%;aspect-ratio:1/0.8;container-type:size;display:flex;align-items:center;justify-content:center;position:relative}
.m-green .m-media{aspect-ratio:1/1}
.m-green .m-media::before{content:"";position:absolute;width:92cqmin;height:92cqmin;border-radius:50%;background:var(--ring);border:1.5px solid var(--saffron)}
.crop{position:relative;width:min(100cqw,calc(100cqh * var(--r)));aspect-ratio:var(--r)}
.m-green .crop{width:min(84cqw,calc(84cqh * var(--r)))}
.crop img{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto;max-width:none}
.m-item .ar{font-weight:800;font-size:16px;margin-top:8px;line-height:1.3;color:var(--green)}
.m-item .en{overflow-wrap:anywhere;font-family:"Barlow";font-weight:600;font-size:10px;color:var(--grey);letter-spacing:.14em;margin-top:3px;direction:ltr}
.m-row{display:flex;align-items:center;gap:6px;margin-top:8px;direction:ltr}
.m-pill{min-width:64px;height:26px;border-radius:8px;background:var(--green);color:var(--saffron);font-family:"Barlow";font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;padding:0 10px;direction:ltr;gap:2px}
.m-cal{font-family:"Barlow";font-weight:500;font-size:11px;color:var(--cal)}
.m-cal::before{content:"▸ ";color:var(--red)}
.m-green .m-item .ar{color:#fff}.m-green .m-item .en{overflow-wrap:anywhere;color:var(--white-en)}.m-green .m-cal{color:var(--white-cal)}.m-green .m-pill{background:#fff;color:var(--red)}
.m-pizza .crop{transition:transform 1.4s var(--ease-out)}
.m-shared{display:flex;justify-content:center;margin-top:12px}

.m-foot{margin-top:18px;background:var(--green);padding:18px 0 calc(22px + env(safe-area-inset-bottom));text-align:center;overflow:hidden;position:relative}
.m-foot .sadu{height:34px;background:url(img/sadu_tile.png) 0 50%/auto 100% repeat-x;animation:sadu 30s linear infinite}
@keyframes sadu{to{background-position:-496px 50%}}
.m-foot img{width:min(78vw,320px);margin:14px auto 0}
.m-foot img+img{margin-top:8px;width:min(60vw,240px)}
.m-note{font-family:"Barlow";font-weight:600;font-size:11px;letter-spacing:.04em;color:var(--white-cal);text-align:center;margin-top:14px;direction:ltr}
.m-note img{width:min(70vw,290px);margin:6px auto 0}

.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease var(--d,0s), transform 1s var(--ease-out) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.m-pizza.rv .crop{transform:rotate(-120deg) scale(.7);transition:transform 1.5s var(--ease-out) var(--d,0s)}
.m-pizza.rv.in .crop{transform:none}

/* ---------- Detail sheet ---------- */
#sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;visibility:hidden;pointer-events:none}
#sheet.open{visibility:visible;pointer-events:auto}
.sheet-backdrop{position:absolute;inset:0;background:rgba(1,30,15,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .45s ease}
#sheet.open .sheet-backdrop{opacity:1}
.sheet-card{position:relative;width:min(92vw,440px);background:var(--card);border-radius:28px;padding:22px 22px 26px;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);outline:1.6px solid var(--gold);outline-offset:-10px;transform:translateY(40px) scale(.94);opacity:0;transition:transform .6s var(--ease-out), opacity .4s ease}
#sheet.open .sheet-card{transform:none;opacity:1}
.sheet-close{position:absolute;top:18px;left:18px;width:40px;height:40px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:24px;line-height:40px;z-index:2}
.sheet-media{position:relative;height:min(44vh,290px);container-type:size;display:flex;align-items:center;justify-content:center;margin-top:8px}
.sheet-ring{position:absolute;width:94cqmin;height:94cqmin;border-radius:50%;background:var(--green);border:2px solid var(--saffron);opacity:.95}
.sheet-crop{position:relative;width:min(88cqw,calc(88cqh * var(--r)));aspect-ratio:var(--r)}
.sheet-crop img{position:absolute;left:var(--l);top:var(--t);width:var(--w);max-width:none}
#sheet.open .sheet-crop.pizza{animation:sheetSpin 1.6s var(--ease-out)}
@keyframes sheetSpin{from{transform:rotate(-140deg) scale(.6)}to{transform:none}}
.sheet-kicker{font-family:"Barlow";font-weight:600;color:var(--kick);letter-spacing:.3em;font-size:12px;margin-top:12px;direction:ltr}
.sheet-ar{font-weight:800;font-size:30px;margin-top:8px}
.sheet-en{font-family:"Barlow";font-weight:600;color:var(--grey);letter-spacing:.14em;font-size:13px;margin-top:6px;direction:ltr}
.sheet-cal{font-family:"Barlow";font-weight:500;color:var(--cal);font-size:13px;margin-top:6px;direction:ltr}
.sheet-price{margin:16px auto 0;width:140px;height:40px;border-radius:10px;background:var(--green);color:var(--saffron);font-family:"Barlow";font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;direction:ltr;gap:3px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}