/* Surfwise ".iphone" device component (2026-10-16): a photo-real iPhone 16 Pro, Natural Titanium, face on.
   One pre-rendered frame image (assets/img/iphone-frame.webp, PNG fallback; 900 x 1851, the screen is
   transparent; source assets/img/iphone-frame.svg, true scale in mm) sits over a clipped screenshot, with an
   iOS status bar (the page sprite's <symbol id="i-sb">, see index.html) and the home indicator. Nothing here
   is 3D and nothing runs per frame: the page may tilt / bob / fade the whole .iphone with one transform, and
   that moves ONE flattened layer (no preserve-3d, no will-change, no scale() on the raster: size with --w).

   MARKUP (drop-in; --w is the frame-image width, the device body is 96.75 % of it, default 206px)
     <div class="iphone" style="--w:250px">
       <div class="scr">
         <picture><source srcset="x.webp" type="image/webp"><img src="x.jpg" width="600" height="1303" alt="…"></picture>
         <svg class="sb" aria-hidden="true"><use href="#i-sb"/></svg>
       </div>
       <picture class="fr"><source srcset="assets/img/iphone-frame.webp" type="image/webp"><img src="assets/img/iphone-frame.png" width="900" height="1851" alt=""></picture>
     </div>
   - several screenshots may be stacked in .scr: give each <picture> the class "sc" and toggle .on to crossfade.
   - the screenshot must be a FULL-SCREEN capture (status-bar zone included, 1206 x 2622 px aspect): it fills
     the whole glass exactly like a real phone, the status bar and the Dynamic Island (part of the frame image)
     sit on top of it, so the app's own top bar starts below the island, as on the device.
   - .iphone.dark: white status bar + home indicator for dark app themes.
   - the soft drop shadow is a PRE-RENDERED image (2026-10-17, "fast flings stutter"): assets/img/sh/ph*.webp is the real
     box-shadow of the body (0 34px 64px -14px rgba(21,18,58,.5), 0 10px 22px -10px rgba(21,18,58,.35)) rendered once
     with Chrome at 1.5x for each phone width used, stretched over the ::before. A 64 px blur rasterised at dpr 3.75
     cost more than the whole rest of the phone every time its layer was (re)built; an image is one texture draw.
     Per width: the image (background-image on ::before) + --sh-t/--sh-r/--sh-b/--sh-l = how far the shadow reaches
     past the body, as a PERCENTAGE of the phone (so a phone laid out narrower than its --w, like the Download
     pair, keeps the shadow in step with its body). A phone whose width is not fixed at all (the how-to guide)
     sets --iphone-shadow and gets the old box-shadow (see check.css).
   GEOMETRY (per cent of the frame image, from iphone-frame.svg: image 73.9 x 152 mm, body 71.5 x 149.6 mm)
     screen: left 4.939  top 2.368  width 90.122  height 95.263  corner radius 13.739 % of width / 6.319 % of height
     body:   left 1.624  top .789   width 96.752  height 98.421  corner radius 16.224 % / 7.754 %
     Dynamic Island: 1.26 % to 5.49 % of the screen height; iOS status bar centre line ~3.4 % (29.5 of 874 pt). */
.iphone{--rot:0deg;--sh-t:3.776%;--sh-r:24.272%;--sh-b:19.827%;--sh-l:24.272%;position:relative;width:var(--w,206px);max-width:100%;line-height:0;flex:none;-webkit-user-select:none;user-select:none}
.iphone::before{content:"";position:absolute;left:calc(1.624% - var(--sh-l));top:calc(.789% - var(--sh-t));width:calc(96.752% + var(--sh-l) + var(--sh-r));height:calc(98.421% + var(--sh-t) + var(--sh-b));pointer-events:none;
  background:url(img/sh/phd206.webp) 0 0/100% 100% no-repeat}   /* the image per width: see the --w rules (background-image on ::before) */
/* a phone of variable width: the old box-shadow on the body box */
.iphone.sh-box::before{left:1.624%;top:.789%;width:96.752%;height:98.421%;border-radius:16.224%/7.754%;background:none;
  box-shadow:var(--iphone-shadow,0 34px 64px -14px rgba(21,18,58,.5),0 10px 22px -10px rgba(21,18,58,.35))}
.iphone img{-webkit-user-drag:none}
.iphone>.fr{position:relative;z-index:2;display:block;width:100%;pointer-events:none}
.iphone>.fr img{display:block;width:100%;height:auto;aspect-ratio:900/1851}   /* the layout height is the frame's true ratio whichever resized candidate loaded (2026-10-17) */
.iphone .scr{position:absolute;z-index:1;left:4.939%;top:2.368%;width:90.122%;height:95.263%;overflow:hidden;border-radius:13.739%/6.319%;background:#F3F2F9}
.iphone .scr picture,.iphone .scr>img{position:absolute;left:0;top:0;width:100%;height:100%}
.iphone .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.iphone .scr .sc{opacity:0;transition:opacity .55s ease}
.iphone .scr .sc.on{opacity:1}
/* iOS status bar: time left, signal / Wi-Fi / battery right, drawn by the sprite symbol in the page */
.iphone .sb{position:absolute;z-index:3;left:0;top:0;width:100%;height:9%;color:#000;overflow:visible;pointer-events:none;
  font-family:-apple-system,"SF Pro Text","SF Pro Display","Helvetica Neue",Inter,Roboto,"Segoe UI",system-ui,sans-serif}
/* home indicator: 134 x 5 pt, 8 pt above the bottom edge */
.iphone .scr::after{content:"";position:absolute;z-index:3;left:33.3%;right:33.3%;bottom:.92%;height:.58%;border-radius:999px;background:#000;opacity:.9;pointer-events:none}
.iphone.dark .sb{color:#fff}
.iphone.dark .scr::after{background:#fff}