/* ═══════════════════════════════════════════════════════════
   Apple Watch — Canonical Device Frame Component (v2 · SVG-based)
   ═══════════════════════════════════════════════════════════
   Source of truth: Global_Assets/DeviceFrame/AppleWatch42mm.svg
   (Embedded raster — Apple Watch 42mm photographic chrome.)

   USAGE:
     <link rel="stylesheet" href="[path]/assets/css/device-frame-watch.css">

     <div class="applewatch applewatch--md">
       <img class="applewatch__chrome"
            src="[path]/Global_Assets/DeviceFrame/AppleWatch42mm.svg"
            alt="" aria-hidden="true">
       <div class="applewatch__screen">
         <!-- screen content (HTML or iframe with ?noframe=1) -->
       </div>
     </div>

   SIZE VARIANTS (override --watch-w to customize):
     .applewatch--xs  → 200px
     .applewatch--sm  → 260px
     .applewatch--md  → 320px   (default)
     .applewatch--lg  → 380px
     .applewatch--xl  → 460px

   SCREEN AREA INSETS (measured from SVG embedded raster, 512×990):
     top:    27.98%
     left:   13.48%
     right:  11.33%
     bottom: 24.85%
     screen aspect: 385:467 ≈ 0.825 (slightly taller than wide)

   The chrome SVG ALREADY contains the digital crown and side button visuals.
   Do NOT add separate __crown / __button divs — they would duplicate the SVG.

   RULES:
   - Always use this component for Apple Watch mockups across the portfolio.
   - The SVG is ~240KB (raster-backed). Lazy-load when possible via <img loading="lazy">.
   - The screen area inside is positioned via percentages — they are intrinsic
     to the SVG asset and must NOT be tuned per-page.
   ═══════════════════════════════════════════════════════════ */

.applewatch {
  position: relative;
  aspect-ratio: 512 / 990;
  flex-shrink: 0;
  width: var(--watch-w, 320px);
  user-select: none;
}

.applewatch__chrome {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  z-index: 1;
}

.applewatch__screen {
  position: absolute;
  top: 27.98%;
  left: 13.48%;
  right: 11.33%;
  bottom: 24.85%;
  /* Apple Watch screen has a distinctive squircle (super-ellipse) corner.
     Approximated here with mismatched %. */
  border-radius: 13.5% / 11%;
  overflow: hidden;
  z-index: 2;
  background: #000000;
  display: flex;
  flex-direction: column;
}

/* ── SIZE MODIFIERS ── */
.applewatch--xs  { --watch-w: 200px; }
.applewatch--sm  { --watch-w: 260px; }
.applewatch--md  { --watch-w: 320px; }
.applewatch--lg  { --watch-w: 380px; }
.applewatch--xl  { --watch-w: 460px; }
.applewatch--xxl { --watch-w: 540px; }   /* recommended for standalone QA + scroll-page embed */

/* ── FADED (for before/after comparisons) ── */
.applewatch--faded { opacity: 0.5; filter: grayscale(0.4); }

/* ── MOBILE ── */
@media (max-width: 560px) {
  .applewatch--xl { --watch-w: 320px; }
  .applewatch--lg { --watch-w: 280px; }
}