/* motion.css (10 Oct 2026): scroll motion for the PHONE build, portrait only. Everything is inside `html.mo`, a class js/mobile.js adds only for
   portrait phones without prefers-reduced-motion (and not with ?nomotion=1). Without the class the page is the static v12 layout, unchanged.
   Phone safety rules this file keeps: one sticky stage at a time, at most 2 image layers drawing at once, transform and opacity only (JS writes them),
   no new blur, no canvas bigger than the viewport, layers of other countries hidden (visibility) and their images released by the loader in mobile.js. */
@media (max-width:767px) and (orientation:portrait){

/* ---------------------------------------------------------------- opening: window zoom, cloud, then the Japan descent */
html.mo .open{position:relative;height:440svh}
html.mo .o-stage{display:block;position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;overflow:hidden;background:#2a2935;contain:strict;pointer-events:none}
html:not(.mo) .o-stage{display:none}
html.mo .o-sky{position:absolute;left:50%;top:0;width:var(--mw);height:calc(var(--mw)*2.6);margin-left:calc(var(--mw)/-2);transform-origin:50% 50svh;will-change:transform}
html.mo .o-sky-i{display:block;width:100%;height:100%}
html.mo .o-zoom{position:absolute;inset:0;will-change:transform,opacity;transform-origin:50% 40%}
html.mo .o-zoom .hero-wall{position:absolute;left:50%;top:0;height:100%;width:auto;aspect-ratio:1324/3210;transform:translateX(-50%) translateY(-9svh)}
html.mo .o-zoom .hero-wall img{height:116%;width:auto;max-width:none;display:block}
html.mo .o-fog{position:absolute;left:0;top:0;width:50%;height:50%;transform-origin:0 0;transform:scale(2);opacity:0;visibility:hidden;will-change:opacity;
  background:radial-gradient(circle farthest-corner at calc(var(--gx,200px)/2) calc(var(--gy,330px)/2),rgb(243 239 250/.62) 0,rgb(243 239 250/.8) 30%,rgb(236 230 248/.95) 70%,rgb(236 230 248/.98) 100%)}
html.mo .hero{background:transparent;overflow:visible;z-index:1}
html.mo .hero-sky,html.mo .cloud-sky{display:none}
html.mo .hero .chip-s,html.mo .cloud .chip-s{display:none}
html.mo .o-chip{position:absolute;left:var(--gut);top:calc(var(--hh) + 10px);z-index:4;margin:0;transition:opacity .25s}
html.mo .o-chip span{display:inline-block;padding:6px 12px;border-radius:12px;background:rgb(19 12 36/.55);color:#fff;font:500 .875rem/1.2 var(--f-b)}
html:not(.mo) .o-chip{display:none}
html.mo .cloud{height:340svh;background:transparent;overflow:visible;z-index:2}
html.mo .cloud::after{display:none}
html.mo .cloud .b1{top:190svh}
html.mo .cloud .b2{top:290svh}

/* ---------------------------------------------------------------- inside a country: the plate descends out of the sky */
html.mo .chap[data-c=japan]{margin-top:-100svh}
html:not(.mo) .desc{display:none}
html.mo .desc{display:block;height:160svh;pointer-events:none}
@media (max-height:700px){html.mo .desc{height:124svh}}   /* short phones: less scenery between the countries' text (the text is the same number of pixels) */
html.mo .plate{left:50%;right:auto;width:var(--mw);margin-left:calc(var(--mw)/-2);will-change:transform;transform:translate3d(0,0,0)}
html.mo .plate picture{position:absolute;inset:0;left:0;bottom:0;width:100%;height:100%;transform:none;will-change:auto}
html.mo .skystrip{display:block;position:absolute;left:0;width:100%;height:auto;aspect-ratio:1/2.6;bottom:calc(100% - var(--mh)*.075)}
html:not(.mo) .skystrip{display:none}
html.mo .fg picture{transform-origin:78% 100%}
html.mo .ttlbox{transition:none;will-change:transform,opacity}
html.mo .scene.off{visibility:hidden}
html.mo .scene.prime{opacity:.01}
html.mo .scene .ttlbox{opacity:0;transform:none}

/* ---------------------------------------------------------------- transitions: a pinned overlay (z above both countries) */
html.mo .trans{position:relative;z-index:3;height:370svh;margin:-180svh 0 -190svh;padding:0;display:block;background:none;pointer-events:none}
html.mo .tr-stage{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden;contain:strict;visibility:hidden;pointer-events:none}
html:not(.mo) .tr-stage{display:none}
html.mo .tr-stage img.v-warm,html.mo .tr-stage img.v-night{max-width:none;position:absolute;left:-5%;top:-10%;width:110%;height:120%;object-fit:cover;opacity:0;visibility:hidden;will-change:transform,opacity}
html.mo .fx{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;visibility:hidden;pointer-events:none}
html.mo .m-fill{position:absolute;left:0;top:0;width:50%;height:125%;transform-origin:0 0;transform:translate3d(0,100svh,0) scale(2);opacity:0;will-change:transform,opacity}
html.mo .m-fn{background:linear-gradient(to bottom,rgb(26 34 82/0) 0,rgb(26 34 82/.7) 9.6%,rgb(30 38 88/.97) 20.8%,rgb(30 38 88) 100%)}
html.mo .m-fw{background:linear-gradient(to bottom,rgb(226 222 239/0) 0,rgb(226 222 239/.012) 2%,rgb(226 222 239/.06) 4%,rgb(226 222 239/.2) 6%,rgb(226 222 239/.45) 8%,rgb(226 222 239/.7) 9.6%,rgb(225 221 238/.87) 14%,rgb(224 220 238/.97) 20.8%,rgb(223 219 237) 100%)}   /* eased top: a plain 0-to-.7 ramp left a 1.6 level step on its first row over bright sky at 360x640 (seam alarm 3.2) */
html.mo .m-fd{background:linear-gradient(to bottom,rgb(222 176 200/0) 0,rgb(222 176 200/.7) 9.6%,rgb(206 168 206/.97) 20.8%,rgb(176 150 208) 100%)}
html.mo .m-img{position:absolute;left:0;top:0;width:50%;height:125%;max-width:none;object-fit:cover;transform-origin:0 0;transform:translate3d(0,100svh,0) scale(2);opacity:0;visibility:hidden;will-change:transform,opacity;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 17.6%);mask-image:linear-gradient(to bottom,transparent 0,#000 17.6%)}
html.mo .trans .tl{position:absolute;left:24px;z-index:4;width:max-content;max-width:calc(100% - 48px);pointer-events:none;align-self:auto;margin:0}
html.mo .trans .tr-stage~.tl{top:62svh}
html.mo .trans .tl~.tl{top:255svh}
html.mo .t-jn .tl~.tl{top:285svh}
html.mo .exit{height:192svh}
html.mo .exit .chip-cap{top:max(calc(var(--hh) + 14px),calc(var(--mt) + var(--mh)*.14))}
html.mo .land .chip-cap,html.mo .exit .chip-cap,html.mo .trans .tl{will-change:opacity,transform}
html.mo .t-jn,html.mo .t-nn{background:none}
}
@media (max-width:767px) and (orientation:portrait){
/* the hero scrim scrolls away with the copy: soft at both ends so its lower edge is never a seam over the window */
html.mo .hero::before{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
html.mo .hero::after{background:linear-gradient(to bottom,rgb(26 24 36/0),rgb(26 24 36/.88) 38%,rgb(26 24 36/.9) 66%,rgb(26 24 36/0))}

/* New Zealand has no transition after it: a shorter tail that fades the lake into the dark paradise band that now follows */
html.mo .chap[data-c=taupo] .exit{height:100svh}
html.mo .chap[data-c=taupo] .exit::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62svh;pointer-events:none;background:linear-gradient(to bottom,rgb(18 11 31/0),rgb(18 11 31/.55) 45%,#120b1f)}
}

/* the paradise band now sits before the booking part: the old 40svh fade that lifted the lilac over the end of New Zealand would tint the paradise band instead.
   It now runs the other way, from the paradise band's own dark into the lilac, inside the first screen of the booking part. Applies in every phone layout. */
@media (max-width:767px), (max-height:560px){
.site::before{top:0;height:34svh;z-index:-1;background:linear-gradient(to bottom,#120b1f,rgb(18 11 31/.55) 35%,rgb(139 125 191/0))}
.site-bg{z-index:-2}
/* the paradise band fades in from, and back out to, the dark that surrounds it (it used to start and end on a hard edge) */
.p-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 7%,#000 36%,#000 66%,transparent 94%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,transparent 7%,#000 36%,#000 66%,transparent 94%,transparent 100%)}
/* landscape (844x390 and friends): the scenery-only screens are shorter (45 screens of 55 are the client's text, which stays) */
@media (orientation:landscape) and (max-height:560px){
.exit{height:46svh}
.trans{height:62svh;margin-top:-6svh}
.chap>.sheet:last-of-type{margin-bottom:0}
}
}