/* Device mockups for the story cards (index.html #stories).
   One iPhone per story, a real simulator capture (img/app/m-*.jpg, 900x1955, iPhone 18 Pro Max, 9:41).
   Everything scales from --F (the phone's width), so one number resizes the whole device.
   No pure white: highlights use the brand cream #d8d8cb. Glows stay subtle.
   The old .phone class stays on the stage so interact.js still leans it toward the cursor. */

/* ───────── stage: the single phone ───────── */
.stage.phone {
  --F: clamp(220px, 23vw, 300px);
  --glow: rgba(120, 170, 230, .16);
  position: relative; isolation: isolate;
  display: grid; width: var(--F);
  /* undo the single-phone frame from styles.css */
  aspect-ratio: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
  margin-bottom: calc(var(--F) * -.1);           /* the phone sits just past the card's bottom edge */
  transform-style: preserve-3d;
}
.stage.phone .dev { grid-area: 1 / 1; }
.stage.phone::before {                           /* soft light behind the phones */
  content: ""; position: absolute; z-index: -1; inset: -4% -34% 14%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  filter: blur(22px); transform: translateZ(-140px); pointer-events: none;
}

.dev--front { --w: var(--F); transform: translateZ(0); z-index: 2; }

/* ───────── device ─────────
   Layers, back to front:  side buttons (tucked behind the rim) → titanium body (::before) → black bezel + screen → specular ring (::after).
   The body is a conic gradient so the rim catches light at the corners like a polished chamfer, and the long sides stay calm. */
.dev {
  --band: calc(var(--w) * .017);                 /* titanium rim width */
  --lip: calc(var(--w) * .011);                  /* black bezel width */
  --ink: #0a0c10;
  position: relative; isolation: isolate; margin: 0; width: var(--w); aspect-ratio: 0.4725;
  padding: var(--band);
  border-radius: calc(var(--w) * .17);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .7),
    0 calc(var(--w) * .16) calc(var(--w) * .24) calc(var(--w) * -.08) rgba(0, 0, 0, .75),
    0 calc(var(--w) * .03) calc(var(--w) * .06) rgba(0, 0, 0, .35);
}
.dev::before {                                   /* the titanium body: conic highlights, brushed grain, antenna splits */
  content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    /* antenna splits: short dark cuts through the rim, two per side, plus top and bottom */
    linear-gradient(var(--ink), var(--ink)) left 0 top 15% / var(--band) calc(var(--w) * .0065) no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 0 bottom 15% / var(--band) calc(var(--w) * .0065) no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 0 top 15% / var(--band) calc(var(--w) * .0065) no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 0 bottom 15% / var(--band) calc(var(--w) * .0065) no-repeat,
    /* brushed grain */
    repeating-linear-gradient(90deg, rgba(216, 216, 203, .035) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    /* light from the top left */
    linear-gradient(142deg, rgba(216, 216, 203, .26) 0%, rgba(216, 216, 203, 0) 24%, rgba(0, 0, 0, 0) 70%, rgba(216, 216, 203, .10) 100%),
    conic-gradient(from 0deg at 50% 50%,
      #9da2aa 0deg, #5d626b 18deg, #2a2e35 46deg, #20242a 90deg, #343840 128deg,
      #8d929a 164deg, #aeb2b8 180deg, #7f848c 196deg, #373b42 232deg, #1f2227 272deg,
      #2c3036 312deg, #6a6f78 344deg, #9da2aa 360deg);
  box-shadow:
    inset 0 0 0 1px rgba(216, 216, 203, .22),     /* outer chamfer line */
    inset 0 0 0 calc(var(--band) - 1px) rgba(0, 0, 0, 0),
    inset 0 0 calc(var(--w) * .014) rgba(0, 0, 0, .55);   /* the rim falls into shade toward the glass */
}
.dev::after {                                    /* specular ring: a hairline that runs bright along the top left and bottom right */
  content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(216, 216, 203, .8), rgba(216, 216, 203, 0) 24%, rgba(216, 216, 203, 0) 66%, rgba(216, 216, 203, .42));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.dev-bezel {
  position: relative; z-index: 1;
  height: 100%; padding: var(--lip);
  border-radius: calc(var(--w) * .153);
  background: #010204;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .85),                /* the dark seam where the glass meets the rim */
    0 0 0 calc(var(--w) * .0025) rgba(216, 216, 203, .07);
}
.dev-screen {
  position: relative; height: 100%; overflow: hidden; background: #02070e;
  border-radius: calc(var(--w) * .142);
  box-shadow: 0 0 0 1px rgba(216, 216, 203, .06);
}
.dev-screen img, .dev-screen video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dev-screen::before {                            /* Dynamic Island with a lens, drawn over the capture so every screen has one */
  content: ""; position: absolute; z-index: 2; top: 1.45%; left: 50%; width: 21.6%; height: 3.8%;
  transform: translateX(-50%); border-radius: 999px;
  background:
    radial-gradient(circle at 82% 50%, #1b2a4a 0 5%, #0a1226 6% 14%, rgba(5, 8, 16, 0) 15%),
    radial-gradient(circle at 82% 50%, rgba(90, 140, 255, .55) 0 1.4%, rgba(0, 0, 0, 0) 2.6%),
    #000;
  box-shadow: 0 0 0 1px rgba(216, 216, 203, .05);
}
.dev-screen::after {                             /* glass: a soft diagonal sheen and a faint edge falloff */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(216, 216, 203, .13) 0%, rgba(216, 216, 203, 0) 24%, rgba(216, 216, 203, 0) 70%, rgba(216, 216, 203, .045) 100%),
    radial-gradient(120% 100% at 50% 40%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .22) 100%);
}

/* side buttons: action + volume on the left, power and camera control on the right.
   Each one is a metal pill that comes out from under the rim: bright outer edge, shaded toward the frame, rounded at the tip. */
.dev .btn {
  all: unset; box-sizing: border-box; display: block; position: absolute; z-index: -1; pointer-events: none;
  --out: calc(var(--w) * .0125);                 /* how far it stands proud of the rim */
  width: calc(var(--out) + var(--w) * .008);     /* …plus the part hidden under it */
  border-radius: calc(var(--w) * .008);
}
.dev .act, .dev .vup, .dev .vdn {
  left: calc(var(--out) * -1);
  border-radius: calc(var(--w) * .008) 0 0 calc(var(--w) * .008);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 24%, rgba(216, 216, 203, .1) 50%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, .5)),
    linear-gradient(90deg, #a2a7ae 0, #6c717a 14%, #3b3f46 48%, #181b20 100%);
  box-shadow: inset 1px 0 0 rgba(216, 216, 203, .35), -1px 0 0 rgba(0, 0, 0, .55);
}
.dev .pwr, .dev .cam {
  right: calc(var(--out) * -1);
  border-radius: 0 calc(var(--w) * .008) calc(var(--w) * .008) 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 24%, rgba(216, 216, 203, .1) 50%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, .5)),
    linear-gradient(270deg, #a2a7ae 0, #6c717a 14%, #3b3f46 48%, #181b20 100%);
  box-shadow: inset -1px 0 0 rgba(216, 216, 203, .35), 1px 0 0 rgba(0, 0, 0, .55);
}
.dev .cam {                                      /* camera control: flatter, with a glassy inset strip */
  --out: calc(var(--w) * .0085);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0 46%, rgba(10, 12, 16, .85) 46% 82%, rgba(0, 0, 0, 0) 82%) center / 100% 62% no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .45)),
    linear-gradient(270deg, #a2a7ae 0, #6c717a 14%, #3b3f46 48%, #181b20 100%);
}
/* positions follow a real Pro Max: action, volume up, volume down, power, camera control */
.dev .act { top: calc(var(--w) * .36); height: calc(var(--w) * .095); }
.dev .vup { top: calc(var(--w) * .54); height: calc(var(--w) * .175); }
.dev .vdn { top: calc(var(--w) * .76); height: calc(var(--w) * .175); }
.dev .pwr { top: calc(var(--w) * .70); height: calc(var(--w) * .26); }
.dev .cam { top: calc(var(--w) * 1.30); height: calc(var(--w) * .16); }

/* ───────── per-story light ───────── */
.story:nth-of-type(1) .stage { --glow: rgba(70, 130, 210, .20); }
.story:nth-of-type(2) .stage { --glow: rgba(216, 216, 203, .10); }
.story:nth-of-type(3) .stage { --glow: rgba(60, 120, 200, .18); }
.story:nth-of-type(4) .stage { --glow: rgba(110, 160, 150, .14); }
.story:nth-of-type(5) .stage { --glow: rgba(198, 242, 78, .08); }
.story:nth-of-type(6) .stage { --glow: rgba(216, 216, 203, .10); }
.story:nth-of-type(7) .stage { --glow: rgba(70, 130, 210, .18); }

/* ───────── smaller screens: one column, the phone sized to the card ───────── */
@media (max-width: 1020px) {
  .stage.phone { --F: clamp(170px, calc((100vw - 120px) * .62), 290px); margin-bottom: calc(var(--F) * -.1); }
}
@media (max-width: 760px) {
  .stage.phone { --F: clamp(150px, calc((100vw - 96px) * .62), 240px); margin-bottom: calc(var(--F) * -.1); }
}