/* ============================================================================
   iDrive — the shared phone mockup (landing hero + showcases, /account login
   hero, the welcome / home cards). ONE component, sized by ONE variable:

       <div class="device" style="--device-w: 240px">      (or set --device-w in CSS)
           <div class="device-screen"><img src="…" width="923" height="2000" alt="…"></div>
       </div>

   The frame is vector art drawn to scale (/assets/device/iphone-frame.svg —
   15/16 Pro proportions): titanium band, slim black border, Dynamic Island,
   the display's corner radius, glass glare, and the side buttons (action +
   volume up/down on the left, the side button on the right) as part of the
   silhouette. The screenshot sits under the frame's transparent screen
   cut-out (screenshots are 923 × 2000, the display's own 19.5 : 9).

   Depth: ::before extrudes the solid silhouette (iphone-body.svg) into the
   titanium side with a stack of hard drop-shadows, toward the side the 3D
   tilt turns to the viewer — so under the tilt the phone shows a real edge
   with its buttons standing proud of it. The last shadow is the soft one on
   the ground. Everything scales with --device-w.

   Tilt: the phone leans with the reading direction. --dir (-1 LTR, 1 RTL) is
   set by the stage around the device (site.css .stage, account.css
   .hero-visual / .wl-phone-stage); a stage with .flip leans the other way.
   ============================================================================ */

.device {
    --device-w: 240px;
    --side: calc(var(--dir, -1) * -1);   /* +1: the right edge faces the viewer */
    --step-x: calc(var(--device-w) * 0.0044 * var(--side));
    --step-y: calc(var(--device-w) * 0.0021);
    position: relative; flex: none;
    /* An explicit height, not aspect-ratio: a stretching flex parent would override the ratio. */
    width: var(--device-w); height: calc(var(--device-w) * 1500 / 736);
    transform: rotateY(calc(var(--dir, -1) * 16deg)) rotateX(8deg) rotateZ(calc(var(--dir, -1) * 2deg));
}

/* The titanium side (front → back: a bright chamfer, brushed metal, the back glass rim) + the ground shadow. */
.device::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url("/assets/device/iphone-body.svg?v=7ae0ad4ab3") center / 100% 100% no-repeat;
    filter:
        drop-shadow(var(--step-x) var(--step-y) 0 #e4e6e9)
        drop-shadow(var(--step-x) var(--step-y) 0 #b9bdc2)
        drop-shadow(var(--step-x) var(--step-y) 0 #a0a4ab)
        drop-shadow(var(--step-x) var(--step-y) 0 #92969d)
        drop-shadow(var(--step-x) var(--step-y) 0 #868a91)
        drop-shadow(var(--step-x) var(--step-y) 0 #777b82)
        drop-shadow(var(--step-x) var(--step-y) 0 #63676d)
        drop-shadow(var(--step-x) var(--step-y) 0 #2c2e32)
        drop-shadow(calc(var(--device-w) * 0.05 * var(--side)) calc(var(--device-w) * 0.09) calc(var(--device-w) * 0.08) var(--device-shadow, rgba(8, 28, 58, 0.34)));
}

/* The display: sits just under the frame's cut-out (1 unit of bleed under the black border). */
.device-screen {
    position: absolute; z-index: 1; overflow: hidden; background: #000;
    left: 4.348%; top: 1.6%; width: 91.304%; height: 96.8%;
    border-radius: 14.583% / 6.749%;
}
.device-screen img, .device-screen video {
    display: block; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: top;
}

/* The frame (band, border, island, glare, buttons) over the screen. */
.device::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: url("/assets/device/iphone-frame.svg?v=e8620c91ea") center / 100% 100% no-repeat;
}

/* Scroll-reactive motion (site.js / account.js set --sy / --sr from the SCROLL position). No idle motion:
   a device at rest stays still (owner decision). */
.device-scroll { transform: translateY(var(--sy, 0px)) rotateX(var(--sr, 0deg)); transform-style: preserve-3d; will-change: transform; }
.device-float { position: relative; transform-style: preserve-3d; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .device { --device-shadow: rgba(0, 0, 0, 0.6); }
}
:root[data-theme="dark"] .device { --device-shadow: rgba(0, 0, 0, 0.6); }