/* THE NIGHT MARKET - landing page ride (night-market.aspx, night-market-landing.js). Loaded after
   night-market.css. One sticky stage: the hero's clouds part, then each stall arrives from blur and
   dark into focus, its offer lit in the stall window, with a mist between stalls. Every class is nm-
   prefixed and scoped under #nm so the site CSS can't style it by accident. */
#nm .nm-ride{position:relative}
#nm .nm-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(70% 60% at 70% 50%,#21163f 0%,var(--night) 70%)}
#nm .nm-stage img{max-width:none;user-select:none;pointer-events:none}
/* hero */
#nm .nm-hero{position:absolute;inset:0;z-index:5;pointer-events:none;--hw:max(100vw,min(233.6vh,400vw));--g:max(0px,(100vh - var(--hw) * .428125) / 2)}
/* (10 Nov) THE FACE IS NEVER CUT: on tall narrow screens the photo used to fill the height centred on the
   photo's middle, and her nose (38% across) fell off the left. Now: width shrinks if needed so nose to ear
   (37%-60% of the photo) fits the screen (400vw = 100vw / 0.25), and the picture centres on her face
   (48%) as far as the photo's spare width allows, so it still covers the sides. */
#nm .nm-hero img{position:absolute;left:calc(50vw + min(.02 * var(--hw),(var(--hw) - 100vw) / 2));top:50%;width:var(--hw);height:auto;aspect-ratio:2560/1096;transform:translate(-50%,-50%);will-change:transform,opacity}
#nm .nm-hcopy{position:absolute;left:max(16px,5vw);bottom:max(18vh,120px);max-width:min(560px,88vw)}
#nm .nm-eyebrow{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
#nm .nm-hcopy h1{font:900 clamp(46px,8.5vw,118px)/.86 var(--display);letter-spacing:-.02em;margin:16px 0 22px;color:var(--ink);line-height:.98}
#nm .nm-hcopy p{font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:#E4DAF2;margin:0;max-width:34ch}
#nm .nm-cue{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
/* scenes */
#nm .nm-scene{position:absolute;inset:0;opacity:0;will-change:opacity;pointer-events:none}
/* each scene is one wide photo covering the stage, with only a whisper of fade at the side edges;
   the sign (shared .nm-fascia styles in night-market.css) sits in the stall's window */
#nm .nm-box{position:absolute;left:0;top:0;height:100%;width:100%;overflow:hidden}
#nm .nm-box.m{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 97%,transparent 100%)}
#nm .nm-frame{position:absolute}
#nm .nm-frame img{position:absolute;inset:0;width:100%;height:100%}
#nm .nm-ride .nm-fascia{transition:opacity .8s ease}
#nm .nm-mist{position:absolute;inset:-12%;z-index:4;pointer-events:none;opacity:0;will-change:opacity,transform;
  background:radial-gradient(42% 38% at 28% 36%,rgba(122,52,128,.55),transparent 72%),radial-gradient(46% 42% at 72% 62%,rgba(150,58,120,.45),transparent 72%),radial-gradient(60% 55% at 50% 50%,rgba(52,22,70,.9),rgba(16,10,30,.97) 80%)}
#nm .nm-mist img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(38px) saturate(.8);opacity:.45;mix-blend-mode:screen}
#nm .nm-count{position:absolute;right:max(16px,3vw);bottom:4vh;font:500 12px var(--mono);letter-spacing:.14em;color:var(--soft);z-index:6}
/* after the ride */
/* the end of the page: the 7pm list, what's true of every order */
#nm [hidden]{display:none!important}
#nm .nm-end{padding-block:24px 96px;max-width:1240px;margin:0 auto;display:grid;gap:64px}
#nm .nm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#nm .nm-list{display:grid;gap:12px;justify-items:center;text-align:center;padding:48px 24px;border:1px solid var(--line);border-radius:6px;background:radial-gradient(70% 120% at 50% 0%,rgba(255,79,163,.14),transparent 70%)}
#nm .nm-list h2{font:900 clamp(30px,4.4vw,56px)/1 var(--display);letter-spacing:-.015em;margin:0;color:var(--ink);text-wrap:balance}
#nm .nm-list>p{margin:0;color:var(--soft);max-width:44em;font-size:clamp(16px,1.3vw,19px);line-height:1.5;text-wrap:pretty}
#nm .nm-join{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:min(520px,100%);margin:10px 0 0}
#nm .nm-join input{flex:1 1 240px;min-width:0;min-height:48px;padding:0 16px;font:400 16px var(--body);color:var(--ink);background:rgba(13,10,32,.7);border:1px solid rgba(243,238,250,.3);border-radius:3px}
#nm .nm-join input:focus{outline:2px solid var(--pink);outline-offset:1px}
#nm .nm-join button{min-height:48px;padding:0 22px;background:var(--orange);color:#fff;border:0;border-radius:3px;font:600 16px var(--body);cursor:pointer}
#nm .nm-join button:focus-visible{outline:3px solid #fff;outline-offset:2px}
#nm .nm-list .nm-fine{font-size:13px;color:var(--mute)}
#nm .nm-list .nm-done{font:800 20px/1.3 var(--display);color:var(--ink);max-width:36ch}
#nm .nm-next{display:flex;gap:12px;align-items:baseline;margin-top:8px}
/* (10 Nov) the 7pm panel had everything 12px apart; now a rhythm: eyebrow close to its heading, then
   room before the paragraph, more before the form, the fine print tucked under the form, and the next-drop
   countdown set apart at the foot. On phones the button takes the full width under the email box. */
#nm .nm-list{gap:0;padding:56px 24px 52px}
#nm .nm-list h2{line-height:1.08;margin-top:14px}
#nm .nm-list>p{margin-top:20px}
#nm .nm-list .nm-join{margin-top:32px}
#nm .nm-list .nm-fine{margin-top:14px}
#nm .nm-list .nm-done{margin-top:24px}
#nm .nm-list .nm-next{margin-top:36px}
#nm .nm-join button{flex:1 1 160px}
@media (min-width:600px){#nm .nm-join button{flex:0 0 auto}}
#nm .nm-next span{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
#nm .nm-next b{font:900 30px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
#nm .nm-sure{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
#nm .nm-item{display:grid;gap:4px;align-content:start;padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:rgba(23,18,48,.6);color:var(--ink)}
#nm .nm-item b{font:800 17px/1.25 var(--display)}
#nm .nm-item span{font-size:14px;color:var(--soft)}
@media (max-width:620px){#nm .nm-list{padding:36px 16px}}
@media (max-width:760px){
  #nm .nm-mist img{display:none}

}
@media (prefers-reduced-motion:reduce){#nm .nm-frame,#nm .nm-hero img{will-change:auto}}

/* when the photo is shorter than the screen (very narrow phones): the mask follows the PHOTO's own top and
   bottom edges (--g = the gap above and below it), fading in from each edge, so the moving cloud copies can
   never drift out past the photo into the gap */
@media (max-aspect-ratio:7/12){#nm .nm-hero{--mk:linear-gradient(180deg,transparent 0,transparent var(--g),#000 calc(var(--g) + 7vh),#000 calc(100vh - var(--g) - 7vh),transparent calc(100vh - var(--g)),transparent 100%);-webkit-mask-image:var(--mk);mask-image:var(--mk)}}