@font-face{font-family:Tajawal;src:url('assets/tajawal.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Tajawal;src:url('assets/tajawal-bold.ttf') format('truetype');font-weight:700 800;font-display:swap}
@font-face{font-family:Amiri;src:url('assets/amiri.ttf') format('truetype');font-weight:700;font-display:swap}
.logo-crop{display:inline-block;flex-shrink:0;background-image:url('assets/brand-source.webp');background-size:151.37% auto;background-position:50% 40.91%;border-radius:50%;aspect-ratio:1}
:root{--wine:#240b09;--deep:#100504;--ivory:#fff0d5;--muted:#d2b899;--copper:#cc9a61;--line:rgba(220,177,119,.26);--ease:cubic-bezier(.16,1,.3,1);color-scheme:dark;font-family:Tajawal,'Segoe UI',sans-serif;background:var(--deep);color:var(--ivory)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:disabled{cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--copper);outline-offset:7px}::selection{background:var(--copper);color:var(--deep)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--copper);border-radius:3px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button{min-height:44px}h1,h2,h3,p{margin:0}button:hover{color:#fff8e8}button:active{transform:translateY(1px)}[hidden]{display:none!important}
.experience{position:relative;isolation:isolate;width:100%;height:100svh;min-height:630px;overflow:hidden;background:var(--wine);touch-action:pan-y}
.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 24% 45%,#51130c 0%,#2b0c09 42%,#190808 80%)}
.food-stage{position:absolute;left:0;top:-10%;width:65%;height:126%;overflow:hidden;transform-origin:50% 56%;transition:transform 1.8s var(--ease),filter 1.5s,opacity 1s;mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 71%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 71%,transparent 100%)}
.food-poster,.food-film{position:absolute;width:100%;height:100%;object-fit:contain;object-position:center;inset:0}.food-film{opacity:0;transition:opacity .2s}.food-stage.is-video .food-film{opacity:1}.food-shade{position:absolute;inset:0;background:linear-gradient(0deg,var(--wine),transparent 18%,transparent 78%,rgba(36,11,9,.65))}
#atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.edge-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(16,5,4,.8),transparent 23%,transparent 80%,rgba(16,5,4,.45));z-index:3}
.masthead{position:absolute;top:0;left:0;right:0;padding:34px 5%;display:flex;justify-content:space-between;align-items:center;z-index:10;transition:opacity .6s,transform .6s}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:59px;height:66px;object-fit:contain}.brand>span{font-size:20px;font-weight:700;line-height:1.4}.brand small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:3px}.header-actions{display:flex;align-items:center;gap:24px;direction:ltr}.icon-button{height:44px;width:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:background .25s,color .25s}.icon-button:hover{background:rgba(204,154,97,.12)}.sound-on{display:none}[aria-pressed=true] .sound-on{display:block}[aria-pressed=true] .sound-off{display:none}.text-button{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:13px;direction:rtl;transition:opacity .3s,color .3s}
.welcome{position:absolute;right:10%;top:25%;z-index:4;width:30%;transition:opacity .5s,transform 1s var(--ease),filter .7s}.welcome h1{font-family:Amiri,serif;font-weight:700;font-size:clamp(64px,7.6vw,110px);line-height:1.25;letter-spacing:-.02em}.welcome h1>span{display:block}.headline-last{padding-right:17%}.dot{color:var(--copper)}.welcome p{font-size:18px;line-height:1.7;color:var(--muted);margin-top:26px}.welcome-rule{width:45px;height:1px;background:var(--copper);margin:28px 0 18px}.english-caption{display:block;font-family:Georgia,serif;font-size:9px;line-height:1.85;letter-spacing:.22em;color:var(--muted);text-align:right;opacity:.8}
.start-area{position:absolute;bottom:12%;right:10%;z-index:6;transition:opacity .4s,transform .8s var(--ease)}.start-button{display:flex;align-items:center;gap:20px;padding:0;text-align:right;touch-action:none}.swipe-track{display:block;width:46px;height:78px;border:1px solid var(--line);border-radius:28px;position:relative;transition:border-color .3s}.swipe-thumb{position:absolute;width:38px;height:38px;bottom:3px;left:3px;border-radius:50%;background:var(--ivory);color:var(--wine);display:grid;place-items:center;animation:swipeHint 2.8s var(--ease) infinite;box-shadow:0 5px 18px #10050455}.swipe-thumb svg{width:18px}.start-copy strong{font-size:16px;font-weight:500;display:block}.start-copy small{font-size:12px;display:block;margin-top:10px;color:var(--muted)}.start-button:hover .swipe-track{border-color:var(--copper)}.start-button:hover .swipe-thumb{background:var(--copper)}.ready-foot{position:absolute;bottom:34px;left:5%;display:flex;gap:17px;align-items:center;font-size:11px;color:var(--muted);z-index:4;transition:opacity .5s}.mini-diamond{width:4px;height:4px;background:var(--copper);transform:rotate(45deg)}
.cinema-caption{position:absolute;top:18%;left:0;right:0;text-align:center;z-index:6;opacity:0;transition:opacity .5s,transform 1s var(--ease);transform:translateY(20px);font-family:Amiri,serif;font-size:clamp(32px,4vw,58px);line-height:1.5;pointer-events:none}.cinema-caption span{display:block}.cinema-caption span:last-child{font-size:.62em;color:var(--muted)}
.brand-reveal{position:absolute;top:17%;left:0;right:0;z-index:7;text-align:center;opacity:0;transform:translateY(30px) scale(.94);filter:blur(9px);transition:opacity 1s,transform 1.5s var(--ease),filter 1.3s;pointer-events:none}.reveal-rooster{width:114px;height:120px;object-fit:contain}.brand-reveal h2{font-size:43px;font-weight:800;margin-top:4px}.brand-reveal p{font-size:16px;color:var(--muted);margin-top:10px}.brand-reveal p span{padding:0 8px;color:var(--copper)}.reveal-rule{width:70px;height:1px;background:var(--copper);margin:25px auto}
.afterglow{position:absolute;right:10%;top:30%;width:32%;z-index:6;opacity:0;transform:translateY(24px);transition:opacity 1.1s,transform 1.4s var(--ease)}.afterglow h2{font-family:Amiri,serif;font-size:clamp(40px,4.5vw,67px);line-height:1.45}.afterglow h2 span{color:var(--copper)}.afterglow p{font-size:18px;line-height:1.75;margin:20px 0 26px;color:var(--muted)}.primary-button{padding:14px 28px;background:var(--ivory);color:var(--wine);display:inline-flex;gap:45px;align-items:center;font-weight:700;font-size:17px;transition:background .25s,transform .25s}.primary-button:hover{background:var(--copper);color:var(--deep)}.primary-button svg{width:22px}.replay-button{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;padding:12px 0;margin-top:15px}.replay-button svg{width:16px;height:16px}.play-progress{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:20;opacity:0;background:rgba(255,240,213,.08);transition:opacity .4s}.play-progress i{display:block;width:100%;height:100%;background:var(--copper);transform:scaleX(0);transform-origin:left}.status{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);font-size:13px;z-index:22;text-align:center;width:90%;color:var(--ivory)}
body[data-state=loading] .start-copy small{color:var(--ivory)}
body[data-state=playing] .welcome,body[data-state=reveal] .welcome,body[data-state=finished] .welcome{opacity:0;transform:translateY(-25px);filter:blur(6px);pointer-events:none}
body[data-state=playing] .start-area,body[data-state=reveal] .start-area,body[data-state=finished] .start-area{opacity:0;transform:translateY(30px);pointer-events:none}
body[data-state=playing] .ready-foot,body[data-state=reveal] .ready-foot{opacity:0}
body[data-state=playing] .food-stage,body[data-state=reveal] .food-stage{transform:translateX(27%) scale(.96)}
body[data-state=playing] .cinema-caption{opacity:1;transform:translateY(0)}body.caption-out .cinema-caption{opacity:0;transform:translateY(-20px)}
body[data-state=playing] .play-progress{opacity:1}
body[data-state=reveal] .brand-reveal{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
body[data-state=reveal] .food-stage{filter:brightness(.58);transform:translateX(27%) translateY(7%) scale(.92)}
body[data-state=finished] .afterglow{opacity:1;transform:translateY(0)}body[data-state=finished] .skip-button{display:none}body[data-state=finished] .food-stage{filter:brightness(.88)}
body[data-state=playing] .brand,body[data-state=reveal] .brand{opacity:0;pointer-events:none}body[data-state=playing] .brand-reveal{transition:none}.brand{transition:opacity .5s}
.menu-dialog{position:fixed;inset:0;margin:auto;width:min(100%,1020px);max-width:100%;height:min(92svh,780px);max-height:100svh;padding:32px 42px;background:#250c09;color:var(--ivory);border:1px solid var(--line);box-shadow:0 30px 100px #0009;overflow:auto}.menu-dialog::backdrop{background:#100504db;backdrop-filter:blur(8px)}.menu-top{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:17px}.menu-intro{margin-top:24px}.menu-intro h2{font-family:Amiri,serif;font-size:48px}.menu-intro p{color:var(--muted);font-size:15px;margin-top:3px}.menu-tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-top:25px}.menu-tabs button{position:relative;padding:14px 4px;color:var(--muted);font-size:16px}.menu-tabs button[aria-selected=true]{color:var(--ivory)}.menu-tabs button[aria-selected=true]:after{position:absolute;content:'';height:2px;background:var(--copper);bottom:-1px;right:0;left:0}.dish-panel{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:35px;min-height:300px}.dish-image{height:305px;overflow:hidden}.dish-image img{width:100%;height:100%;object-fit:cover;object-position:center 63%}.dish-copy h3{font-family:Amiri,serif;font-size:36px;margin-bottom:13px}.dish-copy p{font-size:16px;line-height:1.8;color:var(--muted);max-width:30ch}.dish-details{display:flex;gap:15px;flex-wrap:wrap;margin-top:25px;font-size:12px;color:var(--ivory)}.dish-details span{padding-bottom:8px;border-bottom:1px solid var(--line)}.concept-note{font-size:11px;line-height:1.7;color:var(--muted);margin-top:22px;border-top:1px solid var(--line);padding-top:18px}.no-script{position:fixed;bottom:0;background:var(--wine);padding:20px;width:100%;z-index:30;text-align:center}
@keyframes swipeHint{0%,100%{transform:translateY(0)}45%,65%{transform:translateY(-24px)}}
.brand-mark{height:59px}.reveal-rooster{width:114px;height:114px}.english-caption{display:none}
@media(min-width:761px){.food-poster,.food-film{width:auto;height:100%;max-width:none;left:50%;right:auto;transform:translateX(-50%);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 89%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 89%,transparent)}}
@media(min-width:1600px){.welcome{top:27%}.welcome h1{font-size:118px}.food-stage{height:140%;top:-17%}}
@media(max-width:760px){
  .experience{min-height:620px}.masthead{padding:calc(18px + env(safe-area-inset-top)) 22px 0;align-items:center}.brand{gap:6px}.brand-mark{width:37px;height:46px}.brand>span{font-size:16px}.brand small{font-size:8px;max-width:155px;white-space:nowrap}.header-actions{gap:8px}.icon-button{width:38px;height:38px;min-height:38px}.sound-button svg{width:17px;height:17px}.skip-button{font-size:10px;gap:6px}.skip-button span{display:none}.food-stage{left:-9%;width:118%;top:10%;height:91%;mask-image:linear-gradient(0deg,transparent,#000 13%,#000 83%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent,#000 13%,#000 83%,transparent)}.food-poster,.food-film{object-fit:cover;object-position:center 49%}.food-shade{background:linear-gradient(0deg,var(--wine),transparent 20%,transparent 67%,rgba(36,11,9,.4))}.welcome{top:14%;right:0;width:100%;text-align:center}.welcome h1{font-size:66px;line-height:1.06}.welcome h1>span{display:inline}.headline-last{padding-right:10px}.welcome p{font-size:13px;margin-top:12px;line-height:1.6}.welcome p br{display:none}.welcome-rule,.english-caption{display:none}.start-area{bottom:8.5%;right:0;left:0;display:flex;justify-content:center}.start-button{gap:14px}.swipe-track{height:68px;width:40px}.swipe-thumb{height:32px;width:32px}.start-copy strong{font-size:14px}.start-copy small{font-size:11px;margin-top:8px}.ready-foot{left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));justify-content:center;font-size:10px;gap:12px}.cinema-caption{top:17%;font-size:39px}.cinema-caption span:last-child{font-size:25px}.brand-reveal{top:15%}.reveal-rooster{width:95px;height:95px}.brand-reveal h2{font-size:34px;margin-top:0}.brand-reveal p{font-size:13px;margin-top:5px}.reveal-rule{margin-top:20px}.afterglow{top:15%;right:0;width:100%;text-align:center}.afterglow h2{font-size:36px;line-height:1.5}.afterglow h2 br{display:none}.afterglow h2 span{display:block;font-size:41px}.afterglow p{font-size:13px;margin:9px 0 0}.afterglow p br{display:none}.primary-button{position:fixed;top:63svh;left:50%;transform:translateX(-50%);padding:14px 27px;white-space:nowrap;font-size:16px;gap:35px}.primary-button:active{transform:translateX(-50%) translateY(1px)}.replay-button{position:fixed;top:72svh;left:50%;transform:translateX(-50%);margin:0;font-size:12px;white-space:nowrap}.replay-button:active{transform:translateX(-50%)}
  body[data-state=playing] .food-stage{transform:translateY(-2%) scale(1.02)}body[data-state=reveal] .food-stage{transform:translateY(3%) scale(.98);filter:brightness(.65)}body[data-state=finished] .food-stage{transform:translateY(-2%) scale(.92);filter:brightness(.85)}body[data-state=finished] .ready-foot{opacity:0}.menu-dialog{height:94svh;margin:auto 0 0;padding:22px;border-radius:22px 22px 0 0}.menu-intro{margin-top:16px}.menu-intro h2{font-size:41px}.menu-tabs{margin-top:17px;justify-content:space-between;gap:15px}.dish-panel{grid-template-columns:1fr;gap:0}.dish-image{height:230px}.dish-copy h3{font-size:30px;margin-bottom:6px}.dish-copy p{font-size:14px;max-width:none}.dish-details{margin-top:16px}.concept-note{font-size:10px;margin-top:20px;padding-top:15px}
}
@media(max-width:370px){.brand small{display:none}.skip-button{font-size:9px}.welcome h1{font-size:57px}.afterglow h2 span{font-size:35px}.masthead{padding-inline:17px}}
@media(max-width:760px){.brand-mark{height:37px}.reveal-rooster{width:95px;height:95px}}
@media(max-height:700px) and (min-width:761px){.experience{min-height:580px}.welcome{top:22%}.welcome h1{font-size:72px}.welcome p{font-size:15px;margin-top:16px}.welcome-rule{margin:18px 0 12px}.start-area{bottom:9%}.masthead{padding-top:20px}.afterglow{top:27%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#atmosphere{display:none}.swipe-thumb{transform:none!important}}
.brand small{font-size:11px}.skip-button,.ready-foot{font-size:12px}.concept-note{font-size:12px}
@media(max-width:760px){.brand small{display:none}.skip-button,.ready-foot{font-size:11px}.icon-button{width:44px;height:44px;min-height:44px}.concept-note{font-size:11px}}
.menu-dialog{position:relative;inset:auto;margin:0 auto;width:min(100%,1020px);height:auto;min-height:100svh;max-height:none;border:0;border-radius:0;box-shadow:none;overflow:visible}