/* Pardesi Dera — home page scroll story. Loaded only on the home page.
   Layout: one fixed scroll-driven sky (canvas) behind four pinned scenes (sticky text + photo),
   then normal sections (popular dishes, visit). The story moves from day (ivory) to night
   (maroon/black), so colours are explicit, not theme-switched. */

.page-story{
  /* shared tokens live in style.css; these short names keep the story code readable */
  --s-ivory:var(--ivory); --s-ink:var(--ink); --s-ink-soft:var(--ink-soft); --s-moon:var(--moon); --s-moon-soft:rgba(251,243,228,.84);
  --s-saffron:var(--saffron); --s-saffron-soft:var(--saffron-light); --s-night:var(--night); --s-live:var(--live);
  --s-font:var(--font-body);
  --s-ease:var(--ease);
  --fg:var(--s-ink); --fg-soft:var(--s-ink-soft);
  background:var(--s-ivory); color:var(--fg); font-family:var(--s-font);
}
/* the day → night colour change animates only the story text, not the whole page */
.page-story .sc-text, .page-story .cue{transition:color .6s var(--s-ease);}
.page-story.is-night{--fg:var(--s-moon); --fg-soft:var(--s-moon-soft);}
.page-story h1, .page-story h2, .page-story h3{font-family:var(--s-font);}
.page-story #main{overflow-x:clip;}
.page-story .site-footer{position:relative; z-index:2; font-family:var(--s-font); padding-bottom:calc(32px + 80px + env(safe-area-inset-bottom,0px));}
.page-story .site-footer .logo{font-family:var(--s-font); font-weight:800; letter-spacing:-.01em;}
.page-story .flash{position:relative; z-index:3;}

/* header: floats over the story, follows day/night */
.page-story .nav-bar{position:fixed; left:0; right:0; top:0; border-bottom:0; background:rgba(255,248,238,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background-color .6s var(--s-ease), color .6s;}
.page-story.is-night .nav-bar{background:rgba(20,10,12,.72);}
.page-story .nav-bar::after{display:none;}
.page-story.is-night .nav-links a:not(.btn){color:var(--s-moon);}
.page-story .nav-inner{padding-top:12px; padding-bottom:12px; min-height:0;}
.page-story .logo{font-family:var(--s-font); font-weight:800; letter-spacing:-.02em; font-size:19px;}
.page-story.is-night .logo-en, .page-story.is-night .nav-links a, .page-story.is-night .nav-toggle{color:var(--s-moon);}
.page-story .nav-links{font-family:var(--s-font); text-transform:none; letter-spacing:0; font-size:15px;}
.page-story .nav-links .btn, .page-story .nav-cta{border-radius:999px; text-transform:none; letter-spacing:0; font-size:14px; font-weight:700; padding:12px 20px;}
.page-story .nav-toggle{border-radius:12px;}
.page-story.is-night .nav-links{background:var(--s-night);}

.story-progress{position:fixed; z-index:60; top:0; left:0; right:0; height:3px; transform-origin:left; transform:scaleX(var(--prog,0)); background:var(--s-saffron);}

/* sky (stand-in when there are no photos; also the colour between photos) */
#sky{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; pointer-events:none;}

/* ---------------------------------------------------------------- scenes */
.page-story section.scene{position:relative; z-index:1; padding:0;}
.pin{position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); padding-block:96px 120px;}
.s1{height:130vh; height:130svh;}
.s2, .s4{height:260vh; height:260svh;}
.s3{height:240vh; height:240svh;}
.sc-text{position:relative; z-index:2; width:100%; max-width:560px;}

/* photos fill the screen on phones, with a scrim so text always reads */
.sc-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; max-width:none;}
.has-photo .pin::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,10,12,.15) 0%, rgba(20,10,12,.05) 35%, rgba(20,10,12,.7) 72%, rgba(20,10,12,.9) 100%);}
.has-photo{--fg:var(--s-moon); --fg-soft:var(--s-moon-soft); color:var(--fg);}
.ph-hero{transform:scale(calc(1.12 - var(--p,0) * .12));}
.ph-cafe{transform:scale(calc(1 + var(--p,0) * .08));}
.ph-to{opacity:var(--p,0);}
.ph-from{transform:scale(calc(1 + var(--p,0) * .06));}
.ph-night{transform:scale(calc(1.08 - var(--p,0) * .08));}
/* photos that move with scroll get their own GPU layer, but only while their scene is on screen */
.scene.is-live .sc-photo{will-change:transform, opacity;}

/* type */
.page-story h1{margin:14px 0 12px; font-size:clamp(40px, 11.5vw, 76px); line-height:.98; letter-spacing:-.045em; font-weight:800; text-wrap:balance;}
.lede{margin:0 0 26px; font-size:18px; line-height:1.5; color:var(--fg-soft); max-width:34ch;}
.kicker{margin:0 0 12px; font-size:16px !important; line-height:1.3; font-weight:700 !important; letter-spacing:0 !important; color:var(--s-saffron);}
.has-photo .kicker{color:var(--s-saffron-soft);}
.sc-lines{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:6px;}
.sc-lines li{font-size:clamp(30px, 8.4vw, 56px); line-height:1.06; letter-spacing:-.035em; font-weight:800; text-wrap:balance;}
.js .sc-lines li{opacity:.16; transform:translateY(10px); transition:opacity .6s var(--s-ease), transform .6s var(--s-ease);}
.js .sc-lines li.on{opacity:1; transform:none;}
.swap{position:relative; margin:0 0 8px; font-size:clamp(32px, 9vw, 60px) !important; line-height:1.04; letter-spacing:-.04em !important; font-weight:800 !important; text-wrap:balance;}
.js .swap{display:grid;}
.js .swap span{grid-area:1/1; align-self:end; transition:opacity .7s var(--s-ease), transform .7s var(--s-ease);}
.js .swap .b{opacity:0; transform:translateY(18px);}
.js .s3.is-b .swap .a{opacity:0; transform:translateY(-18px);}
.js .s3.is-b .swap .b{opacity:1; transform:none;}
.arc{width:100%; max-width:360px; height:auto; margin:0 0 18px; overflow:visible;}
.arc path{fill:none; stroke:var(--fg-soft); stroke-width:1.5; stroke-dasharray:3 6; opacity:.7;}
.arc text{font:600 12px var(--s-font); fill:var(--fg-soft);}
.arc-dot{fill:var(--s-saffron-soft); transition:fill .5s;}
.s3.is-b .arc-dot{fill:var(--s-moon);}

/* actions */
.sc-actions{display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap;}
.s-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px;
  background:var(--s-saffron); color:#24150A; font:700 16px var(--s-font); text-decoration:none; box-shadow:0 10px 26px rgba(216,154,43,.35);
  transition:transform .25s var(--s-ease), box-shadow .25s;}
.s-btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(216,154,43,.45);}
.s-link{display:inline-flex; align-items:center; min-height:44px; font-weight:700; font-size:16px; color:var(--fg); text-decoration:none;
  background:linear-gradient(var(--s-saffron),var(--s-saffron)) left 78% / 100% 2px no-repeat;}
.s-btn:focus-visible, .s-link:focus-visible, .dish-add:focus-visible, .s-float a:focus-visible, .s-float button:focus-visible, .dish-more a:focus-visible, .pop-scroller:focus-visible{outline:3px solid var(--s-saffron-soft); outline-offset:3px;}

.live{display:inline-flex; align-items:center; gap:9px; margin:0; padding:8px 14px; border-radius:999px; font-weight:600; font-size:14px;
  background:rgba(255,255,255,.78); color:var(--s-ink); box-shadow:0 4px 14px rgba(28,18,16,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); max-width:100%;}
.dot{position:relative; flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--s-saffron);}
.live.is-open .dot{background:var(--s-live);}
.live.is-open .dot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--s-live); animation:s-ping 2s ease-out infinite;}
@keyframes s-ping{from{transform:scale(.4); opacity:.9;} to{transform:scale(1.6); opacity:0;}}
.s1 .sc-text{transform:translateY(calc(var(--p,0) * -40px)); opacity:calc(1 - var(--p,0) * 1.6);}
.cue{position:absolute; z-index:2; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); font-size:13px; font-weight:600;
  color:var(--fg-soft); display:flex; flex-direction:column; align-items:center; gap:4px; opacity:calc(1 - var(--p,0) * 4);}
.cue span{display:block; width:2px; height:26px; border-radius:2px; background:currentColor; animation:s-cue 1.8s var(--s-ease) infinite; transform-origin:top;}
@keyframes s-cue{0%{transform:scaleY(0);} 60%{transform:scaleY(1); opacity:1;} 100%{transform:scaleY(1); opacity:0;}}

/* ---------------------------------------------------------------- popular dishes */
.page-story section.popular{position:relative; z-index:1; padding:72px 0 40px; background:var(--s-night); color:var(--s-moon);}
.pop-head{padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); max-width:1160px; margin:0 auto 20px;}
.pop-head h2{margin:0 0 6px; font-size:clamp(30px, 8vw, 48px); line-height:1.05; letter-spacing:-.035em; font-weight:800; color:var(--s-moon);}
.pop-head p{margin:0; color:var(--s-moon-soft); font-size:16px;}
.pop-scroller{overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none; padding:6px 0 28px;}
.pop-scroller::-webkit-scrollbar{display:none;}
.pop-row{list-style:none; margin:0; padding:0 20px; display:flex; gap:14px; width:max-content;}
.dish-card{width:min(66vw, 260px); scroll-snap-align:start; background:var(--s-ivory); color:var(--s-ink); border-radius:16px; overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.28); transition:transform .3s var(--s-ease);}
.dish-card:hover{transform:translateY(-4px);}
.dish-photo{aspect-ratio:1/1; background:#F1E6D3; overflow:hidden;}
.dish-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--s-ease);}
.dish-card:hover .dish-photo img{transform:scale(1.05);}
.dish-ph{display:flex; height:100%; align-items:center; justify-content:center; padding:16px; text-align:center; font-weight:700; color:var(--s-ink-soft);}
.dish-body{position:relative; padding:14px 64px 16px 16px; min-height:78px;}
.dish-body h3{margin:0 0 4px; font-size:17px; line-height:1.25; font-weight:700; letter-spacing:-.01em;}
.dish-price{font-weight:700; color:#6E1423;}
.dish-add{position:absolute; right:14px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:var(--s-saffron); color:#24150A;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px rgba(216,154,43,.4); transition:transform .2s var(--s-ease), background-color .2s;}
.dish-add:active{transform:translateY(-50%) scale(.92);}
.dish-add.is-added{background:var(--s-live); color:#fff;}
.dish-more{display:flex; align-items:center; width:180px;}
.dish-more a{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:120px; border-radius:16px; border:1px dashed rgba(251,243,228,.35); color:var(--s-moon); font-weight:700; text-decoration:none;}

/* ---------------------------------------------------------------- visit */
.page-story section.visit-us{position:relative; z-index:1; padding:48px 0 72px; background:var(--s-night); color:var(--s-moon);}
.visit-in{max-width:1160px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px));}
.visit-in h2{margin:0 0 8px; font-size:clamp(30px, 8vw, 48px); line-height:1.05; letter-spacing:-.035em; font-weight:800; color:var(--s-moon);}
.visit-addr{margin:0 0 18px; font-size:18px; color:var(--s-moon-soft);}
.visit-today{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px;}
.visit-today li{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:16px;}
.visit-today strong{min-width:96px;}
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:600; background:rgba(251,243,228,.12); color:var(--s-moon);}
.badge.is-open{background:var(--s-moon); color:#1F5C43;}
.visit-us .s-link{color:var(--s-moon);}

/* ---------------------------------------------------------------- floating order pill (phones) */
.s-float{position:fixed; z-index:45; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translate(-50%, 160%); transition:transform .5s var(--s-ease);}
.s-float.show{transform:translate(-50%, 0);}
.s-float a, .s-float button{display:flex; align-items:center; gap:10px; min-height:52px; padding:0 22px 0 18px; border-radius:999px; border:0;
  background:var(--s-ink); color:var(--s-ivory); font:700 15px var(--s-font); text-decoration:none; box-shadow:0 12px 30px rgba(0,0,0,.3); white-space:nowrap; cursor:pointer;}
.page-story.is-night .s-float a{background:var(--s-saffron); color:#24150A;}
.page-story.is-night .s-float a .dot{background:#24150A;}
.s-float button{background:var(--s-saffron); color:#24150A;}
.s-float.has-cart .s-float-order{display:none;}

/* ---------------------------------------------------------------- desktop: photo on one side, words on the other */
@media (min-width:900px){
  .pin{justify-content:center; padding-left:max(7vw, env(safe-area-inset-left,0px)); padding-block:110px 90px;}
  .sc-photo{left:auto; right:4vw; top:100px; bottom:auto; height:calc(100% - 160px); width:48vw; border-radius:24px; box-shadow:0 30px 60px rgba(0,0,0,.25);}
  /* framed photos with a shadow stay still on desktop (scaling a shadowed card repaints it every frame) */
  .ph-hero, .ph-cafe, .ph-night{transform:none;}
  .scene.is-live .sc-photo{will-change:opacity;}
  .has-photo .pin::after{display:none;}
  .ph-from{transform:none;}
  .ph-to{box-shadow:none;}
  .page-story .has-photo{--fg:var(--s-ink); --fg-soft:var(--s-ink-soft);}
  .page-story.is-night .has-photo{--fg:var(--s-moon); --fg-soft:var(--s-moon-soft);}
  .has-photo .kicker{color:var(--s-saffron);}
  .sc-text{max-width:min(560px, 40vw);}
  .page-story h1{font-size:clamp(48px, 5.6vw, 84px);}
  .sc-lines li{font-size:clamp(34px, 3.8vw, 58px);}
  .cue{left:max(7vw, 40px); transform:none;}
  .s-float{display:none;}
  .page-story .site-footer{padding-bottom:32px;}
  .pop-row{width:auto; max-width:1160px; margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;}
  .pop-scroller{overflow:visible;}
  .dish-card{width:auto;}
  .dish-more{display:none;}
  .dish-card:nth-child(n+5){display:none;}
  .visit-today{grid-template-columns:repeat(2, max-content); gap:10px 48px;}
}

/* ---------------------------------------------------------------- phones: no live blur while scrolling (costly on phone GPUs) */
@media (max-width:899px){
  .page-story .nav-bar{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,248,238,.96);}
  .page-story.is-night .nav-bar{background:rgba(20,10,12,.94);}
  .live{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.92);}
}

/* short screens (phones held sideways): smaller type so each scene fits */
@media (max-height:520px) and (min-width:560px){
  .pin{padding-block:68px 24px;}
  .page-story h1{font-size:clamp(30px, 7vh, 44px); margin:8px 0 6px;}
  .lede{font-size:15px; margin-bottom:12px;}
  .sc-lines{gap:2px; margin-bottom:12px;}
  .sc-lines li{font-size:clamp(22px, 7.4vh, 34px);}
  .swap{font-size:clamp(24px, 8vh, 38px) !important;}
  .arc{max-width:240px; margin-bottom:8px;}
  .kicker{margin-bottom:6px;}
  .cue{display:none;}
  .sc-text{max-width:min(560px, 62vw);}
  .s-float{left:auto; right:max(16px, env(safe-area-inset-right,0px)); transform:translateY(160%); bottom:14px;}
  .s-float.show{transform:none;}
}

@media (prefers-reduced-motion:reduce){
  #sky{display:none;}
  .s1, .s2, .s3, .s4{height:auto;}
  .pin{position:relative; height:auto; min-height:85svh;}
  .s1:not(.has-photo){background:linear-gradient(180deg,#F8E6CC,#FFF8EE);}
  .s2:not(.has-photo){background:linear-gradient(180deg,#FFF1D6,#F7D8A8);}
  .s3:not(.has-photo), .s4:not(.has-photo){background:linear-gradient(180deg,#8A2A2A,#6E1423 45%,#140A0C); --fg:var(--s-moon); --fg-soft:var(--s-moon-soft); color:var(--s-moon);}
  .ph-hero, .ph-cafe, .ph-from, .ph-night{transform:none;}
  .ph-from{display:none;}
  .ph-to{opacity:1;}
  .s1 .sc-text{transform:none; opacity:1;}
  .js .sc-lines li{opacity:1; transform:none; transition:none;}
  .js .swap{display:block;}
  .js .swap span{opacity:1 !important; transform:none !important; display:block;}
  .cue, .live .dot::after{display:none;}
  .s-float, .page-story .nav-bar, .dish-card, .dish-photo img{transition:none;}
}