/* ==========================================================================
   PostureCo device kit, part 3: STATIC devices in Apple's official product
   bezels (.abz). Use it wherever a device does not move; a lid that opens or
   closes, or a yaw fly-in, keeps the rendered kit (devices-mac.css).
   Joe, Oct 10 2026 Loom (WEB-155): "on static images of these devices use
   the real media supplied to us from Apple."

   SOURCE  Apple Design Resources, Product Bezels
           (developer.apple.com/design/resources/#product-bezels), under
           Apple's licence (see ASSETS.md). The PNGs are ONLY scaled
           (premultiplied Lanczos) and saved as WebP with alpha into
           assets/img/devices/apple/; never recolour, crop or retouch them.
           Exported, measured and verified by .work/cloud2/kit/bezels.py.

   DEVICES (modifier · bezel · files · screen ratio, i.e. what media fits uncropped)
     .abz--mbp16          MacBook Pro M5 16-inch Silver   mbp16-silver-{1200,2400}.webp
                          display 3456 x 2234 = 1496 x 967 points (1.547); the
                          notch is part of Apple's art, centred on the top edge
     .abz--imac           iMac M4 24-inch Blue            imac24-blue-{1200,2400}.webp
                          display 4480 x 2520 (16:9); 1.547 media covers it
                          top-aligned (a strip of the bottom is cropped)
     .abz--ipad           iPad Pro (M5) 13" Silver, landscape  ipad13-silver-landscape-{700,1400}.webp  (4:3)
     .abz--ipad-portrait  iPad Pro (M5) 13" Silver, portrait   ipad13-silver-portrait-{700,1400}.webp   (3:4)
     .abz--iphone         iPhone 17 Pro Silver, portrait  iphone17pro-silver-{400,800}.webp
                          display 1206 x 2622 (0.46); the Dynamic Island is drawn
                          over the screen (.abz--no-island hides it)

   MARKUP
   <figure class="abz abz--mbp16">
     <div class="abz__screen">
       <img class="is-active" src="…" alt="…" width="1496" height="967">
       <img src="…" alt="">  <video src="…" muted playsinline loop></video>
     </div>
     <img class="abz__frame" alt="" width="2400" height="1600"
          src="../assets/img/devices/apple/mbp16-silver-1200.webp"
          srcset="../assets/img/devices/apple/mbp16-silver-1200.webp 1200w,
                  ../assets/img/devices/apple/mbp16-silver-2400.webp 2400w"
          sizes="(max-width: 899px) 92vw, 760px">
   </figure>
   Frame width/height attributes (the 2x file): mbp16 2400x1600 · imac 2400x2042 ·
   ipad 1400x1073 · ipad-portrait 1400x1826 · iphone 800x1636.

   SIZE    The figure is width:100% of its parent by default (or set --abz-w).
           Its box is the device's visible silhouette (Apple's transparent
           margins hang outside it), so it lines up with neighbouring content.
   SCREEN  .abz__screen children (<img>, <picture>, <video>, <div>) are stacked,
           object-fit: cover, top-aligned. The child with .is-active shows; the
           others fade out (.5s; none under reduced motion). No .is-active ->
           the first child shows. MacDevice.show(figure, i) (devices-mac.js)
           switches layers and plays/pauses <video> layers.
           The screen sits UNDER the bezel image: it is Apple's display hole
           grown by ~30% of the bezel's thickness on every side, with corners
           concentric to the hole's, so there is no gap or bleed at any width
           (checked pixel by pixel on the source art: 0 uncovered, 0 outside).
   OPTIONS --abz-screen-bg (what shows while media loads; default #fff, iPhone #000)
           .abz--lift  soft contact shadow under the device (filter on the frame)
   ========================================================================== */

.abz {
  --abz-screen-bg: #fff;
  position: relative;
  display: block;
  width: var(--abz-w, 100%);
  max-width: 100%;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.abz *, .abz *::before, .abz *::after { box-sizing: border-box; }

/* the bezel image: positioned so the figure's box is the silhouette (alpha > 0 bounds) */
.abz__frame {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: none;
  margin: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.abz__screen {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: var(--abz-screen-bg);
}
.abz__screen > * {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity .5s ease;
}
.abz__screen > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.abz__screen > .is-active,
.abz__screen:not(:has(> .is-active)) > :first-child { opacity: 1; }

/* ---------------------------------------------------------------- measured geometry
   (bezels.json, percent of the silhouette box; radius = the hole's corner + the grow) */

/* MacBook Pro M5 16" Silver: 4260 x 2840 art, silhouette 4220 x 2577 */
.abz--mbp16 { aspect-ratio: 4220 / 2577; }
.abz--mbp16 .abz__frame  { left: -.4739%; top: -9.5848%; width: 100.9479%; height: 110.2057%; }
.abz--mbp16 .abz__screen { left: 8.673%; top: 1.5522%; width: 82.654%; height: 87.9317%;
  border-radius: 1.4908% 1.4908% .4587% .4587% / 2.2948% 2.2948% .7061% .7061%; }

/* iMac M4 24" Blue: 4760 x 4050 art, silhouette 4718 x 3976 */
.abz--imac { aspect-ratio: 4718 / 3976; }
.abz--imac .abz__frame  { left: -.4451%; top: -.8048%; width: 100.8902%; height: 101.8612%; }
.abz--imac .abz__screen { left: 1.7804%; top: 2.0875%; width: 96.4392%; height: 65.1408%;
  border-radius: .7692% / 1.3514%; }

/* iPad Pro (M5) 13" Silver, landscape: 3000 x 2300 art, silhouette 2936 x 2249 */
.abz--ipad { aspect-ratio: 2936 / 2249; }
.abz--ipad .abz__frame  { left: -1.0218%; top: -1.0227%; width: 102.1798%; height: 102.2677%; }
.abz--ipad .abz__screen { left: 2.282%; top: 3.0236%; width: 95.5722%; height: 94.1752%;
  border-radius: 2.7441% / 3.6355%; }

/* iPad Pro (M5) 13" Silver, portrait: 2300 x 3000 art, silhouette 2249 x 2936 */
.abz--ipad-portrait { aspect-ratio: 2249 / 2936; }
.abz--ipad-portrait .abz__frame  { left: -1.245%; top: -1.0218%; width: 102.2677%; height: 102.1798%; }
.abz--ipad-portrait .abz__screen { left: 2.8012%; top: 2.282%; width: 94.1752%; height: 95.5722%;
  border-radius: 3.6827% / 2.7798%; }

/* iPhone 17 Pro Silver, portrait: 1350 x 2760 art, silhouette 1318 x 2717 */
.abz--iphone { --abz-screen-bg: #000; aspect-ratio: 1318 / 2717; }
.abz--iphone .abz__frame  { left: -1.214%; top: -.7729%; width: 102.4279%; height: 101.5826%; }
.abz--iphone .abz__screen { left: 3.1866%; top: 1.2514%; width: 93.6267%; height: 97.534%;
  border-radius: 17.0989% 17.0989% 17.0178% 17.0178% / 7.9623% 7.9623% 7.9245% 7.9245%; }
.abz--iphone .abz__screen::after {   /* Dynamic Island: 126 x 37.3 pt, 11 pt from the top of the 402 pt-wide display */
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 1.774%;
  width: 30.63%;
  height: 4.226%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  pointer-events: none;
}
.abz--iphone.abz--no-island .abz__screen::after { content: none; }

/* ---------------------------------------------------------------- options */
.abz--lift .abz__frame { filter: drop-shadow(0 1.2em 1.6em rgba(10, 30, 60, .16)) drop-shadow(0 .2em .35em rgba(10, 30, 60, .12)); }

@media (prefers-reduced-motion: reduce) {
  .abz__screen > * { transition: none; }
}