/* ==========================================================================
   PHONE — the device the app screenshots are shown in
   ==========================================================================
   Used by /die-app and by the app section of the landing page. One drawing,
   every measure a fraction of --w (the outer width), so a 200px phone in a
   grid and a 340px phone in the hero are the same object.

     <div class="dv">                        iPhone (default)
     <div class="dv is-android">             Android
     <div class="dv is-land">                landscape (no status bar)
       <div class="dv-screen">
         <div class="dv-shot is-on" data-tone="dark|light"><img …></div>
         … more shots, stacked; `.is-on` is the one showing
       </div>
     </div>

   Inside [data-platform="android"] every phone without .is-ios draws as an
   Android, so the page's detection flips all of them at once.

   Two kinds of screenshot (mobile/store/screens):
     · Android, from the emulator, with the status bar cut off
       (img/app/*.webp). The status bar is drawn back here, in the colour of
       the screen's top edge (data-tone), so the picture sits in the device
       like a live screen instead of butting against the camera.
     · iOS, from the iPhone simulator, complete with status bar and Dynamic
       Island (img/app/ios/*.webp). Those fill the screen; see "Native".
   ========================================================================== */

.dv {
  --w: 300px;
  --bez: calc(var(--w) * 0.036);
  --rad: calc(var(--w) * 0.165);
  --sw: calc(var(--w) - var(--bez) * 2);       /* the screen's width */
  --sb: calc(var(--sw) * 0.13);                /* status bar height */
  --sb-font: calc(var(--sw) * 0.046);
  --sb-pad: calc(var(--sw) * 0.1);
  --frame-a: #3b4149;
  --frame-b: #1a1d22;
  position: relative;
  flex: none;
  width: var(--w);
  padding: var(--bez);
  border-radius: var(--rad);
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(150deg, #7d8591, var(--frame-a) 18%, var(--frame-b) 50%, var(--frame-a) 82%, #6d7580) border-box;
  border: calc(var(--w) * 0.008) solid transparent;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.7),
    0 calc(var(--w) * 0.12) calc(var(--w) * 0.24) calc(var(--w) * -0.08) rgb(0 0 0 / 0.85),
    0 calc(var(--w) * 0.03) calc(var(--w) * 0.06) rgb(0 0 0 / 0.4);
  transform-style: preserve-3d;
}

/* Side buttons: one pseudo element and its shadows. Left: action + volume,
   right: power. */
.dv::before {
  content: "";
  position: absolute;
  left: calc(var(--w) * -0.016);
  top: 17%;
  width: calc(var(--w) * 0.012);
  height: 4.5%;
  border-radius: 2px 0 0 2px;
  background: var(--frame-a);
  box-shadow:
    0 calc(var(--w) * 0.14) 0 0 var(--frame-a),
    0 calc(var(--w) * 0.28) 0 0 var(--frame-a),
    calc(var(--w) * 1.02) calc(var(--w) * 0.19) 0 0 var(--frame-a);
}

.dv-screen {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: calc(var(--rad) - var(--bez) - var(--w) * 0.008);
  background: #000;
  isolation: isolate;
  transform: translateZ(0);
}
/* Glass: a soft sheen across the screen, over the picture. */
.dv-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.02) 28%, transparent 42%);
  pointer-events: none;
}
/* The camera: iPhone's island. */
.dv-screen::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(var(--sw) * 0.03);
  width: calc(var(--sw) * 0.3);
  height: calc(var(--sw) * 0.088);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* A screen: status bar (drawn) + the screenshot. All shots share one grid
   cell, so switching never moves anything. */
.dv-shot {
  --sb-bg: #000;
  --sb-ink: #fff;
  grid-area: 1 / 1;
  position: relative;
  padding-top: var(--sb);
  background: var(--sb-bg);
  opacity: 0;
  transition: opacity 520ms var(--ease-out), filter 520ms var(--ease-out), transform 700ms var(--ease-out);
  filter: blur(6px);
  transform: scale(1.03);
}
.dv-shot.is-on, .dv-shot:only-child { opacity: 1; filter: none; transform: none; }
.dv-shot[data-tone="light"] { --sb-bg: rgb(240 242 247); --sb-ink: #0b0d10; }
.dv-shot img { display: block; width: 100%; height: auto; }
/* Status bar: the time … */
.dv-shot::before {
  content: "9:41";
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36%;
  height: var(--sb);
  padding-top: calc(var(--sw) * 0.012);
  color: var(--sb-ink);
  font: 600 var(--sb-font) / 1 -apple-system, "SF Pro Text", var(--font-sans);
  letter-spacing: -0.01em;
}
/* … and signal, wifi, battery, as one mask. */
.dv-shot::after {
  content: "";
  position: absolute;
  right: calc(var(--sw) * 0.075);
  top: calc(var(--sb) / 2 - var(--sw) * 0.022 + var(--sw) * 0.006);
  width: calc(var(--sw) * 0.2);
  height: calc(var(--sw) * 0.044);
  background: var(--sb-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 15'%3E%3Crect x='0' y='10' width='3.2' height='4.5' rx='.8'/%3E%3Crect x='4.8' y='7.3' width='3.2' height='7.2' rx='.8'/%3E%3Crect x='9.6' y='4.6' width='3.2' height='9.9' rx='.8'/%3E%3Crect x='14.4' y='1.8' width='3.2' height='12.7' rx='.8'/%3E%3Cpath d='M29.5 3.2c2.9 0 5.5 1.1 7.5 3l1.4-1.5A12.6 12.6 0 0 0 29.5 1a12.6 12.6 0 0 0-8.9 3.7L22 6.2c2-1.9 4.6-3 7.5-3Zm0 4.3c1.7 0 3.3.7 4.5 1.8l1.4-1.5a8.6 8.6 0 0 0-11.8 0l1.4 1.5c1.2-1.1 2.8-1.8 4.5-1.8Zm0 4.3c.6 0 1.2.2 1.6.6l-1.6 1.7-1.6-1.7c.4-.4 1-.6 1.6-.6Z'/%3E%3Crect x='42.5' y='1.5' width='22' height='12' rx='3.6' fill='none' stroke='%23000' stroke-width='1.2' opacity='.45'/%3E%3Crect x='44.5' y='3.5' width='18' height='8' rx='2'/%3E%3Cpath d='M66 5.6v3.8c.8-.3 1.3-1 1.3-1.9s-.5-1.6-1.3-1.9Z' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 15'%3E%3Crect x='0' y='10' width='3.2' height='4.5' rx='.8'/%3E%3Crect x='4.8' y='7.3' width='3.2' height='7.2' rx='.8'/%3E%3Crect x='9.6' y='4.6' width='3.2' height='9.9' rx='.8'/%3E%3Crect x='14.4' y='1.8' width='3.2' height='12.7' rx='.8'/%3E%3Cpath d='M29.5 3.2c2.9 0 5.5 1.1 7.5 3l1.4-1.5A12.6 12.6 0 0 0 29.5 1a12.6 12.6 0 0 0-8.9 3.7L22 6.2c2-1.9 4.6-3 7.5-3Zm0 4.3c1.7 0 3.3.7 4.5 1.8l1.4-1.5a8.6 8.6 0 0 0-11.8 0l1.4 1.5c1.2-1.1 2.8-1.8 4.5-1.8Zm0 4.3c.6 0 1.2.2 1.6.6l-1.6 1.7-1.6-1.7c.4-.4 1-.6 1.6-.6Z'/%3E%3Crect x='42.5' y='1.5' width='22' height='12' rx='3.6' fill='none' stroke='%23000' stroke-width='1.2' opacity='.45'/%3E%3Crect x='44.5' y='3.5' width='18' height='8' rx='2'/%3E%3Cpath d='M66 5.6v3.8c.8-.3 1.3-1 1.3-1.9s-.5-1.6-1.3-1.9Z' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Native iOS screenshots ────────────────────────────────────────────
   The iPhone captures (img/app/ios/, from the simulator) carry their own
   status bar and Dynamic Island, so the drawn ones step aside: the picture
   fills the screen edge to edge. Detected by the image path, so a page only
   has to point an <img> at the iOS file. */
.dv-shot:has(> img[src*="/img/app/ios/"]) { padding-top: 0; background: #000; }
.dv-shot:has(> img[src*="/img/app/ios/"])::before,
.dv-shot:has(> img[src*="/img/app/ios/"])::after { display: none; }
.dv:not(.is-land) .dv-screen:has(> .dv-shot > img[src*="/img/app/ios/"])::after { display: none; }

/* ── Android: flatter frame, punch-hole, a slimmer status bar ─────────── */
.dv.is-android,
[data-platform="android"] .dv:not(.is-ios) {
  --rad: calc(var(--w) * 0.12);
  --bez: calc(var(--w) * 0.03);
  --sb: calc(var(--sw) * 0.085);
  --sb-font: calc(var(--sw) * 0.04);
  --frame-a: #2a2f36;
  --frame-b: #14171b;
}
.dv.is-android .dv-screen::after,
[data-platform="android"] .dv:not(.is-ios) .dv-screen::after {
  top: calc(var(--sw) * 0.022);
  width: calc(var(--sw) * 0.044);
  height: calc(var(--sw) * 0.044);
}
.dv.is-android .dv-shot::before,
[data-platform="android"] .dv:not(.is-ios) .dv-shot::before {
  content: "10:00";
  justify-content: flex-start;
  padding-left: calc(var(--sw) * 0.07);
  font-family: "Roboto", var(--font-sans);
  font-weight: 500;
}
.dv.is-android::before,
[data-platform="android"] .dv:not(.is-ios)::before { /* volume rocker + power on the right */
  left: auto;
  right: calc(var(--w) * -0.016);
  top: 22%;
  height: 10%;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 calc(var(--w) * -0.14) 0 0 var(--frame-a);
}

/* ── Landscape ────────────────────────────────────────────────────────── */
/* The class twice: it has to outrank the Android rules above. */
.dv.is-land.is-land { --rad: calc(var(--w) * 0.075); --bez: calc(var(--w) * 0.017); }
.dv.is-land.is-land .dv-shot { padding-top: 0; }
.dv.is-land.is-land .dv-shot::before, .dv.is-land.is-land .dv-shot::after { display: none; }
.dv.is-land.is-land .dv-screen::after {
  left: calc(var(--sw) * 0.014);
  top: 50%;
  width: calc(var(--sw) * 0.04);
  height: calc(var(--sw) * 0.135);
  transform: translateY(-50%);
}
.dv.is-land.is-land::before {
  left: 20%;
  top: calc(var(--w) * -0.008);
  width: 4.5%;
  height: calc(var(--w) * 0.006);
  border-radius: 2px 2px 0 0;
  box-shadow: calc(var(--w) * 0.07) 0 0 0 var(--frame-a), calc(var(--w) * 0.14) 0 0 0 var(--frame-a);
}
[data-platform="android"] .dv.is-land:not(.is-ios) .dv-screen::after { width: calc(var(--sw) * 0.022); height: calc(var(--sw) * 0.022); }

@media (prefers-reduced-motion: reduce) {
  .dv-shot { transition: opacity 200ms ease; filter: none; transform: none; }
}