/* perf.css: owned by the mobile-performance agent. Loaded after site.css.
   Phone only: every rule sits inside a media query that includes (max-aspect-ratio:159/100), the same gate js/site.js calls COMPACT, so desktop is untouched.
   Method and numbers: see the mobile performance report (peak composited memory at 393x852, 3x, before and after). */

/* P1 mist layers: crop to the screen width.
   The mist plates were laid out as wide as a 16:9 desktop canvas (1363 to 1517 css px on a 393 px phone) and the stage only ever shows the centre 393 px:
   the layers move vertically and scale about their centre, never sideways. Each layer is now 124cqw wide, centred as before, and its image keeps its old
   size and position inside it (same pixels on screen). overflow-x:clip trims the image layers to the box and leaves the vertical axis alone (the boxes
   have no height of their own). A 1449x1790 layer becomes about 490x1790. */
@media (max-aspect-ratio:159/100){
.ml{--nw:min(var(--ow),124cqw);overflow-x:clip}
.ml.ml-f,.ml.ml-m,.ml.ml-n,.ml.ml-b,.ml.ml-s1,.ml.ml-s2{width:var(--nw);left:calc(50cqw - var(--nw)/2)}
.ml.ml-f,.ml.ml-m,.ml.ml-n{--ow:max(100cqw,160cqh)}
.ml.ml-b{--ow:max(112cqw,170cqh)}
.ml.ml-s1,.ml.ml-s2{--ow:max(100cqw,178cqh)}
.ml.ml-f img,.ml.ml-m img,.ml.ml-n img,.ml.ml-b img,.ml.ml-s1 img,.ml.ml-s2 img{width:var(--ow);max-width:none;left:calc((var(--nw) - var(--ow))/2)}
.ml.ml-h{width:100%;left:0}
.ml.ml-h img{width:100%;left:0}
}

/* P2 plate groups (Japan, Norway, Taupo): crop plate, notes, title and foreground boxes to the screen width.
   Each box was 909 css px wide (a 16:9 canvas panned inside a 393 px screen) and only a 393 px strip of it is ever on screen: every move is vertical and
   every scale is >= 1 about a point inside the strip, so the strip never needs pixels from outside itself. Each box now spans the screen plus --m either
   side and its image keeps its old size and position inside it. The transform origins move with the box (js/site.js layout(), CROP_M must equal --m). */
@media (max-aspect-ratio:159/100){
.cg{--m:6px}
.cg .plate,.cg .nl,.cg .title,.cg .fgl{left:calc(-1*var(--m));width:calc(100cqw + 2*var(--m));overflow-x:clip}
.cg .plate{height:calc(var(--cw)*var(--hr))}
.cg .tile,.cg .plate .soft{left:calc(var(--cl) + var(--m));width:var(--cw);max-width:none}
.cg .nl img,.cg .fgl img{margin-left:calc(var(--cl) + var(--m));width:var(--cw);max-width:none}
.cg .nl{transform-origin:calc(var(--cl) + var(--cw)/2 + var(--m)) 0}
.cg .nl.n2{transform-origin:calc(var(--cl) + var(--cw)/2 + var(--m)) 50%}
.cg .tw{right:auto;left:calc(var(--cl) + var(--m));width:var(--cw)}
}

/* P3 backdrop blur and film grain off on phones (width <= 767 px, the same gate as css/mobile.css, whose sheet and chip fills are near-solid for this).
   Each frosted sheet re-blurs a moving backdrop (the stage changes every frame) at 3x pixel density, and every sheet carries a grain layer blended with
   mix-blend-mode:overlay, which needs the backdrop read back too. Measured in real Chrome at 393x852, 3x: GPU-side memory about -60 MB (blur) and -55 MB
   (grain) at the Norway to New Zealand handover. The fills stay; only the blur and the grain go. */
@media (max-aspect-ratio:159/100) and (max-width:767px){
.glass,.glass.dark,.gchip,.gchip.dk,.gc,.dark .gc,.chip-c,.dark .chip-c,.sheet.half::before,.sheet.half.dark::before{-webkit-backdrop-filter:none;backdrop-filter:none}
.glass::after{display:none}
}

/* P4 the ambient pink blobs (.env) sit at z-index 0, under the opaque stage (z-index 1, solid background), so they are never seen while the stage runs;
   they still held three 597x393 blurred layers and a 90 s animation each. Hidden unless reduced-motion mode (html.static) is on.
   P4 title drop shadow: a 28 px blurred filter on three 596x392 svg surfaces. The dark glow under the word already carries the contrast; measured frame
   difference with the shadow removed: mean 0.3/255 on the Japan title, under 0.05 elsewhere. */
@media (max-aspect-ratio:159/100){
html:not(.static) .env{display:none}
.title svg{filter:none}
}

/* P5 overscroll (phone): the end-of-page bounce and the browser's pull-to-refresh both start as an overscroll on the root scroller, and the report is "it refreshes
   when I scroll at the bottom". overscroll-behavior-y:none on the root scroller removes both. It only stops scroll chaining at the page edge: the page still scrolls
   normally inside, and the horizontal carousel (.p-scroll) and the month rail keep their own scrolling, so nothing can trap a gesture. */
@media (max-aspect-ratio:159/100){
html,body{overscroll-behavior-y:none}
}

/* P6 the cloud banks under the paradise carousel (.p-cl, two layers). On a phone they sit at 0.20 and 0.14 opacity, do not move (css/site.css stops their drift at this size) and are
   only reached at the very bottom of the page, after every scene has been through memory. Each is a 130%-wide, full-height box (511x822 css px, a 1920x640 image at a 3x screen)
   inside a masked box. Measured in real Chrome at 393x852, 3x, parked at the footer: removing them takes about 108 MB of GPU memory off the bottom of the page.
   Hidden unless reduced-motion mode is on (html.static draws its own sections). */
@media (max-aspect-ratio:159/100){
html:not(.static) .p-cl{display:none}
}