/* =========================================================
   HassounCube, product-page iPhone
   A 3D iPhone (16 Pro Max proportions) that holds a product's hero
   screenshot, or the install page's demo video. On load it shows its back, turns round to the front, lands
   on a black screen, and then the screenshot fades up.

   Standalone like atmosphere.css and scene-cube.css: the five product
   pages (screenshot) and install.html (demo video) link it, nothing else.

   Geometry. Everything is in cqw of .device-mock (the container), so the
   whole device scales as one object. Numbers come from the real device:
     body 77.6 x 163 mm, 8.25 mm thick; screenshots are 1320 x 2868 (the
     display's native pixels), so the screen is exactly that ratio and the
     bezel is uniform on all four sides; screen corner = 12.5% of its width,
     body corner = screen corner + bezel (concentric, as on the real phone).

   Motion. Pure CSS with fill `both`: the resting (unanimated) state is the
   finished one, front facing, screen on. The keyframes only describe how it
   gets there. So if scripts fail, or motion is reduced, the visitor simply
   sees the phone and its screenshot. js/animations.js may only *hold* a
   phone that starts off-screen and release it when it scrolls into view.

   Two 3D rules, same as the cubes elsewhere on the site:
   - Nothing on .iphone or .iphone-body may set opacity, filter, overflow
     or clip-path: each would flatten the 3D scene into a single plane.
   - The two faces carry backface-visibility: hidden (with the -webkit-
     prefix: Safari still needs it), so only the side facing you draws.
   ========================================================= */

.device-mock {
  width: min(100%, 300px);
  margin-inline: auto;
  container-type: inline-size;
  perspective: 1600px;
  perspective-origin: 50% 35%;
  /* When the turn starts: with the page entrance (--entrance, global.css),
     just after the hero copy. animations.js shortens this when it releases
     a phone that was held off-screen. */
  --phone-start: calc(var(--entrance, 0s) + 250ms);
}

.iphone {
  --W: 100cqw;
  --H: 208cqw;         /* body height: screen height + two bezels */
  --t: 10.6cqw;        /* thickness: 8.25 / 77.6 */
  --band: 1.1cqw;      /* titanium band seen from the front */
  --bezel: 3.95cqw;    /* band + black glass border, uniform */
  --sR: 11.5cqw;       /* screen corner radius */
  --R: 15.45cqw;       /* body corner radius = sR + bezel */

  /* Dark titanium with a faint violet cast, so the device belongs to the
     site's palette without looking painted. */
  --ti-0: #121016;
  --ti-1: #2a2631;
  --ti-2: #4b4555;
  --ti-3: #7c7489;
  --ti-4: #a59db3;     /* polished chamfer highlight */

  /* The chassis cross-section, across the frame's thickness: glass edge,
     black gasket seam, polished chamfer, brushed flat, chamfer, gasket,
     glass edge. Symmetric, so it reads the same from front or back. */
  --wall-profile:
    #060508 0 2.5%, #000 2.5% 4%,
    var(--ti-4) 5.2%, var(--ti-1) 9%,
    var(--ti-2) 14%, #564f61 50%, var(--ti-2) 86%,
    var(--ti-1) 91%, var(--ti-4) 94.8%,
    #000 96% 97.5%, #060508 97.5% 100%;
  /* Brushed grain: hairlines running along the length of each wall. */
  --wall-grain: rgba(255, 255, 255, 0.035) 0 0.12cqw, rgba(0, 0, 0, 0.05) 0.12cqw 0.24cqw, transparent 0.24cqw 0.5cqw;
  --glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  position: relative;
  width: var(--W);
  height: var(--H);
  margin-bottom: 12cqw; /* room for the floor shadow */
  transform-style: preserve-3d;
  /* The pointer tilt (animations.js) lives here, on the wrapper, so it
     composes with the turn on .iphone-body instead of fighting it. */
  transition: transform 600ms var(--ease);
}

.iphone-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: iphoneTurn 2.4s cubic-bezier(0.6, 0, 0.15, 1) var(--phone-start) both;
}
@keyframes iphoneTurn {
  from { transform: translateY(4cqw) rotateX(12deg) rotateY(-180deg) rotateZ(-5deg) scale(0.94); }
  to   { transform: translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
}

/* ---------- Floor shadow: wide under the back, thin edge-on, full at rest */
.iphone-shadow {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  bottom: -9cqw;
  height: 7cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  animation: iphoneShadow 2.4s linear var(--phone-start) both;
}
@keyframes iphoneShadow {
  0%   { transform: scaleX(0.85); opacity: 0.7; animation-timing-function: ease-in; }
  46%  { transform: scaleX(0.3);  opacity: 0.45; animation-timing-function: ease-out; }
  100% { transform: none;         opacity: 1; }
}

/* ---------- Faces ---------- */
.iphone-front,
.iphone-back {
  position: absolute;
  inset: 0;
  border-radius: var(--R);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* The titanium band: brushed, lit from the upper left. */
  background:
    linear-gradient(135deg, var(--ti-3) 0%, var(--ti-2) 12%, var(--ti-1) 40%, var(--ti-0) 70%, var(--ti-2) 100%);
  box-shadow:
    inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.10),
    inset 0 0 0 0.6cqw rgba(0, 0, 0, 0.35);
}
.iphone-front { transform: translateZ(calc(var(--t) / 2)); }
.iphone-back  { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
/* Back rim: the titanium band as seen from behind, with a polished outer
   edge and a chamfer running into the glass. The front face keeps the
   shared rule above untouched. */
.iphone-back {
  background:
    linear-gradient(135deg, var(--ti-4) 0%, var(--ti-2) 9%, var(--ti-1) 34%, var(--ti-0) 64%, var(--ti-1) 86%, var(--ti-3) 100%);
  box-shadow:
    inset 0 0 0 0.12cqw rgba(255, 255, 255, 0.24),
    inset 0 0 0 0.32cqw rgba(0, 0, 0, 0.28),
    inset 0 0 0 0.55cqw rgba(255, 255, 255, 0.06),
    inset 0 0 0 0.9cqw rgba(0, 0, 0, 0.2);
}

/* Front: black glass from the band to the screen. */
.iphone-front::before {
  content: "";
  position: absolute;
  inset: var(--band);
  border-radius: calc(var(--R) - var(--band));
  background: #040406;
  box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.07);
}

/* ---------- Screen ---------- */
.iphone .iphone-screen {
  /* .iphone prefix on purpose: css/media-skeleton.css gives [data-loading]
     position: relative, and the screen must stay absolute while loading. */
  position: absolute;
  inset: var(--bezel);
  z-index: 1;
  border-radius: var(--sR);
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iphone-screen video {
  /* Install page: the demo recording plays in the screen. Same ratio as the
     display (884 x 1920), so cover crops nothing. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.iphone-screen .device-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* the frame is the screenshot's own ratio */
  animation: iphoneShotSettle 1.2s var(--ease) calc(var(--phone-start) + 2.05s) both;
}
@keyframes iphoneShotSettle {
  from { transform: scale(1.035); }
  to   { transform: none; }
}

/* The display "waking": solid black once the front comes round, then the
   screenshot fades up through it. */
.iphone-screen-off {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  pointer-events: none;
  animation: iphoneWake 900ms ease-out calc(var(--phone-start) + 2.05s) both;
}
@keyframes iphoneWake {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Dynamic Island: 126 x 37 pt on a 440 pt wide screen, 11 pt from the top. */
.iphone-island {
  position: absolute;
  z-index: 3;
  top: 2.3cqw;
  left: 50%;
  width: 26.3cqw;
  height: 7.7cqw;
  transform: translateX(-50%);
  border-radius: 999px;
  /* Solid black, like the real island. A drawn front-camera lens here read
     as a grey blob on the screen. */
  background: #000;
}
/* A screen recording (the install page's demo) already contains the phone's
   own island, widened by iOS to show the red recording dot. Drawing ours
   on top left a narrower pill off-centre inside it. Once the video is gone
   (fallback shown), :has(video) no longer matches and ours returns. */
.iphone-screen:has(video) .iphone-island { display: none; }

/* Cover glass: one soft diagonal reflection, never enough to veil the UI. */
.iphone-glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 24%, transparent 42%);
  box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.04);
}

/* ---------- Back ---------- */
/* Textured matte glass. Layers, top to bottom: fine frosted grain, a soft
   key light from the upper left, the base tint. The box-shadows give the
   glass a polished edge, a curved-edge falloff (light top left, dark
   bottom right) and, outside it, the black gasket seam against the metal. */
.iphone-back-glass {
  position: absolute;
  inset: var(--band);
  border-radius: calc(var(--R) - var(--band));
  overflow: hidden;
  background:
    var(--glass-noise) 0 0 / 60px 60px,
    radial-gradient(120% 70% at 20% 10%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(90% 60% at 85% 95%, rgba(0, 0, 0, 0.25), transparent 70%),
    linear-gradient(165deg, #2c2834 0%, #1b1821 55%, #221e29 100%);
  box-shadow:
    0 0 0 0.2cqw #020203,
    inset 0 0 0 0.14cqw rgba(255, 255, 255, 0.10),
    inset 0.7cqw 0.9cqw 1.6cqw rgba(255, 255, 255, 0.045),
    inset -0.9cqw -1.1cqw 2.2cqw rgba(0, 0, 0, 0.38);
}
/* Two reflections across the glass: a broad soft one and a thin sharp one,
   the way a curved-edge glass back catches a window. */
.iphone-back-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.05) 42%, transparent 58%),
    linear-gradient(120deg, transparent 61%, rgba(255, 255, 255, 0.035) 62.5%, transparent 64%);
}

/* ---------- Camera: a raised 3D module ----------
   Not drawn on the back glass: it is its own stack of layers standing off
   the back, so it shifts in parallax as the phone turns, like the real
   bump. Built as a sibling of the faces inside .iphone-body, flipped to face
   backwards (rotateY 180deg), so its left/top are as seen from behind.

   In body coordinates the module sits top RIGHT (it is top left from
   behind): left = W - band - 3.2 - 43 = 52.7cqw, top = band + 3.2.
   Depth, outward from the back glass, in real proportion: on the phone the
   whole bump is about half the body's thickness (--t 10.6).
     0.05                    soft contact shadow on the glass
     0.5 / 1.0 / 1.5         side wall of the plateau (stacked outlines)
     1.9                     plateau top
     +0.05 to +2.4 above it  lens seat, barrel rings and glass
   Every layer hides its back face; seen from the front the module is behind
   the opaque front face and never shows. */
.iphone-cam {
  position: absolute;
  left: 52.7cqw;
  top: 4.3cqw;
  width: 43cqw;
  height: 43cqw;
  transform-style: preserve-3d;
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
}
.iphone-cam > * {
  position: absolute;
  inset: 0;
  border-radius: 11.5cqw;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.iphone-cam-shadow {
  transform: translateZ(0.05cqw);
  box-shadow: 0 1.4cqw 2.8cqw rgba(0, 0, 0, 0.62), 0 0 0 0.22cqw rgba(0, 0, 0, 0.4);
}
/* The plateau's side: stacked outlines, darker toward the glass. */
.iphone-cam-wall.w1 { transform: translateZ(0.5cqw); background: linear-gradient(145deg, #3a3542, #141217 55%, #211e27); }
.iphone-cam-wall.w2 { transform: translateZ(1cqw);   background: linear-gradient(145deg, #45404e, #18161c 55%, #26222c); }
.iphone-cam-wall.w3 {
  transform: translateZ(1.5cqw);
  background: linear-gradient(145deg, #57515f, #1e1b22 55%, #2e2a34);
  box-shadow: inset 0 0 0 0.14cqw rgba(255, 255, 255, 0.14);
}
.iphone-cam-plate {
  transform: translateZ(1.9cqw);
  transform-style: preserve-3d;
  /* Glass plateau, same frosted grain as the back, with a polished rim
     (the bright ring), a chamfer, and a raised-surface falloff. */
  background:
    var(--glass-noise) 0 0 / 60px 60px,
    radial-gradient(90% 70% at 25% 20%, rgba(255, 255, 255, 0.11), transparent 60%),
    linear-gradient(145deg, #3e3946, #26222d 60%, #302b37);
  box-shadow:
    inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.2),
    inset 0 0 0 0.5cqw rgba(0, 0, 0, 0.18),
    inset 0.4cqw 0.4cqw 0.8cqw rgba(255, 255, 255, 0.07),
    inset -0.6cqw -0.7cqw 1.4cqw rgba(0, 0, 0, 0.45);
}

/* Lens: a barrel standing on the plateau. The element is the top: sapphire
   cover (glint), coated optics (rings, AR tints), polished stainless ring
   with machined grooves. .iphone-lens-ring and ::before are the barrel's
   side; ::after is a dark collar on the plateau, wider than the barrel, so
   the lens reads as seated in the glass. */
.iphone-lens {
  position: absolute;
  width: 16cqw;
  height: 16cqw;
  border-radius: 50%;
  transform: translateZ(2.4cqw);
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background:
    radial-gradient(11% 7% at 37% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 100%),
    radial-gradient(14% 9% at 63% 68%, rgba(90, 200, 170, 0.32), rgba(90, 200, 170, 0) 100%),
    radial-gradient(circle, transparent 0 39%, rgba(170, 150, 255, 0.22) 40% 41.5%, transparent 42.5%),
    radial-gradient(circle, #020205 0 16%, #0b0a18 17% 23%, #1b1934 24% 26.5%, #07070e 27.5% 39%,
      #26233c 40% 42%, #050508 43% 50%, #1d1b24 51% 53%, transparent 54%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 0.5%, rgba(0, 0, 0, 0.08) 0.5% 1.1%),
    conic-gradient(from 30deg, #cfc8d9, #3a3740, #e4deee, #34313a, #bab3c5, #3a3740, #cfc8d9);
  box-shadow:
    inset 0 0 0 0.3cqw #121016,
    inset 0 0 0 0.45cqw rgba(255, 255, 255, 0.14),
    inset 0 -0.5cqw 0.9cqw rgba(0, 0, 0, 0.45);
}
.iphone-lens::before,
.iphone-lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.iphone-lens::before {
  transform: translateZ(-1.6cqw);
  background: conic-gradient(from 30deg, #736d7c, #1e1c23, #847e8f, #1e1c23, #736d7c);
}
.iphone-lens::after {
  inset: -0.55cqw;
  transform: translateZ(-2.35cqw);
  background: radial-gradient(circle, #0b0a0e 0 86%, #2c2833 92%, #16141a 100%);
  box-shadow: 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.7);
}
.iphone-lens-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: translateZ(-0.8cqw);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.06) 0 0.6%, rgba(0, 0, 0, 0.1) 0.6% 1.3%),
    conic-gradient(from 30deg, #8d8699, #25222b, #a098ab, #25222b, #8d8699);
}
.iphone-lens.l1 { left: 4.5cqw;  top: 4.5cqw; }
.iphone-lens.l2 { left: 4.5cqw;  top: 22.5cqw; }
.iphone-lens.l3 { left: 22.5cqw; top: 13.5cqw; }
/* Telephoto: the tetraprism shows as a square window inside the lens. */
.iphone-lens-prism {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5.2cqw;
  height: 5.2cqw;
  border-radius: 0.9cqw;
  transform: translate(-50%, -50%) translateZ(0.03cqw);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(135deg, #2c2846, #0a0a14 70%);
  box-shadow: inset 0 0 0 0.12cqw rgba(170, 160, 230, 0.28), 0 0 0 0.25cqw rgba(0, 0, 0, 0.55);
}
.iphone-flash,
.iphone-lidar,
.iphone-mic {
  position: absolute;
  border-radius: 50%;
  transform: translateZ(0.25cqw);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* True Tone flash: warm Fresnel rings under a glossy cover. */
.iphone-flash {
  left: 32cqw; top: 5cqw; width: 5.6cqw; height: 5.6cqw;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.75) 0 9%, transparent 24%),
    repeating-radial-gradient(circle, #f6ecd4 0 7%, #cdbd93 7% 13%),
    #cdbd93;
  box-shadow: inset 0 0 0 0.32cqw #2a2630, inset 0 0 0 0.45cqw rgba(255, 255, 255, 0.12), 0 0.3cqw 0.5cqw rgba(0, 0, 0, 0.5);
}
/* LiDAR: glossy black with a faint violet sheen. */
.iphone-lidar {
  left: 32.5cqw; top: 32.5cqw; width: 5cqw; height: 5cqw;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, 0.38) 0 8%, transparent 24%),
    radial-gradient(circle, #09090f 0 44%, #1e1a2a 45% 62%, #3b3546 63% 70%, #15131a 71%);
  box-shadow: inset 0 0 0 0.3cqw #26222c, 0 0.3cqw 0.5cqw rgba(0, 0, 0, 0.5);
}
.iphone-mic {
  left: 27cqw; top: 37.5cqw; width: 1.4cqw; height: 1.4cqw;
  background: #050407;
  box-shadow: 0 0 0 0.15cqw rgba(255, 255, 255, 0.08), inset 0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.8);
}

/* The studio mark, engraved where a manufacturer's logo would sit. */
.iphone-back-mark {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 15cqw;
  height: 15cqw;
  transform: translate(-50%, -50%);
  border: 1cqw solid rgba(214, 200, 235, 0.16);
  border-radius: 3.8cqw;
  box-shadow: inset 0 0.25cqw 0.4cqw rgba(0, 0, 0, 0.35), 0 0.2cqw 0 rgba(255, 255, 255, 0.04);
}

/* ---------- Chassis: walls between the faces ----------
   Four straight walls plus four rounded corners, so the frame is closed all
   the way round (with open corners any tilt showed a missing wedge). Every
   wall carries the same cross-section (--wall-profile) and grain; each
   straight wall adds its own light, brightest on top, darkest underneath. */
.iphone-edge {
  --light: transparent, transparent;
  position: absolute;
  transform-style: preserve-3d; /* the keys stand off the wall in 3D */
}
.iphone-edge-l,
.iphone-edge-r {
  top: var(--R);
  left: calc(50% - var(--t) / 2);
  width: var(--t);
  height: calc(var(--H) - 2 * var(--R));
  background:
    linear-gradient(180deg, var(--light)),
    repeating-linear-gradient(90deg, var(--wall-grain)),
    linear-gradient(90deg, var(--wall-profile));
}
.iphone-edge-l { --light: rgba(255, 255, 255, 0.07), transparent 45%, rgba(0, 0, 0, 0.22); }
.iphone-edge-r { --light: rgba(255, 255, 255, 0.03), transparent 45%, rgba(0, 0, 0, 0.3); }
.iphone-edge-r { transform: rotateY(90deg) translateZ(calc(var(--W) / 2)); }
.iphone-edge-l { transform: rotateY(-90deg) translateZ(calc(var(--W) / 2)); }
.iphone-edge-t,
.iphone-edge-b {
  left: var(--R);
  top: calc(50% - var(--t) / 2);
  width: calc(var(--W) - 2 * var(--R));
  height: var(--t);
  background:
    linear-gradient(90deg, var(--light)),
    repeating-linear-gradient(180deg, var(--wall-grain)),
    linear-gradient(180deg, var(--wall-profile));
}
.iphone-edge-t { --light: rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05); }
.iphone-edge-b { --light: rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.22); }
.iphone-edge-t { transform: rotateX(90deg) translateZ(calc(var(--H) / 2)); }
.iphone-edge-b { transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)); }

/* Anything drawn flat on a wall sits a hair above it, never coplanar
   (coplanar layers inside a 3D context flicker). */
.iphone-edge > .iphone-antenna,
.iphone-edge > .iphone-port,
.iphone-edge > .iphone-grille,
.iphone-edge > .iphone-screw,
.iphone-edge > .iphone-pinhole { position: absolute; }

/* Antenna lines: the moulded breaks in the titanium band. Two per side,
   just past each corner, spanning the metal but not the glass. */
.iphone-antenna {
  background: linear-gradient(90deg, #26232b, #3c3743 50%, #26232b);
  box-shadow: inset 0 0 0 0.08cqw rgba(0, 0, 0, 0.55);
}
.iphone-edge-l > .iphone-antenna,
.iphone-edge-r > .iphone-antenna { left: 4.2%; width: 91.6%; height: 0.55cqw; transform: translateZ(0.02cqw); }
.iphone-edge-l > .iphone-antenna.a1, .iphone-edge-r > .iphone-antenna.a1 { top: 4cqw; }
.iphone-edge-l > .iphone-antenna.a2, .iphone-edge-r > .iphone-antenna.a2 { bottom: 4cqw; }
.iphone-edge-t > .iphone-antenna,
.iphone-edge-b > .iphone-antenna { top: 4.2%; height: 91.6%; width: 0.55cqw; transform: translateZ(0.02cqw); background: linear-gradient(180deg, #26232b, #3c3743 50%, #26232b); }
.iphone-edge-t > .iphone-antenna.a1, .iphone-edge-b > .iphone-antenna.a1 { left: 6cqw; }
.iphone-edge-t > .iphone-antenna.a2, .iphone-edge-b > .iphone-antenna.a2 { right: 6cqw; }

/* Bottom edge: USB-C (8.9 x 3.2 mm), speaker and microphone grilles, and
   the two screws either side of the port. All centred on the thickness. */
.iphone-port {
  left: 50%;
  top: 50%;
  width: 11.5cqw;
  height: 4.1cqw;
  border-radius: 2.05cqw;
  transform: translate(-50%, -50%) translateZ(0.02cqw);
  background:
    radial-gradient(ellipse 36% 13% at 50% 50%, #2c2833 0 70%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, #030204 55%, #0d0b10 100%);
  box-shadow:
    0 0 0 0.14cqw rgba(0, 0, 0, 0.75),
    0 0 0 0.26cqw rgba(255, 255, 255, 0.07),
    inset 0 0.35cqw 0.6cqw rgba(0, 0, 0, 0.9);
}
.iphone-grille {
  top: 50%;
  width: 11.4cqw;
  height: 1.9cqw;
  transform: translateY(-50%) translateZ(0.02cqw);
  background: radial-gradient(circle, #040306 0 34%, rgba(0, 0, 0, 0.45) 42%, rgba(255, 255, 255, 0.06) 48%, transparent 52%) 0 0 / 1.9cqw 100% repeat-x;
}
.iphone-grille.g-l { left: calc(50% - 21.3cqw); }
.iphone-grille.g-r { left: calc(50% + 9.9cqw); }
.iphone-screw {
  top: 50%;
  width: 1.05cqw;
  height: 1.05cqw;
  border-radius: 50%;
  transform: translateY(-50%) translateZ(0.02cqw);
  background: radial-gradient(circle, #0a090c 0 22%, #6e6878 30%, #3a3541 60%, #1c1a20 100%);
  box-shadow: 0 0 0 0.08cqw rgba(0, 0, 0, 0.6);
}
.iphone-screw.s-l { left: calc(50% - 8.4cqw); }
.iphone-screw.s-r { left: calc(50% + 7.35cqw); }
/* Top edge: the microphone pinhole. */
.iphone-pinhole {
  left: 38%;
  top: 50%;
  width: 0.9cqw;
  height: 0.9cqw;
  border-radius: 50%;
  transform: translateY(-50%) translateZ(0.02cqw);
  background: #030204;
  box-shadow: 0 0 0 0.1cqw rgba(255, 255, 255, 0.07), inset 0 0.15cqw 0.2cqw #000;
}

/* Rounded corners: six wall segments per corner, each a strip of wall stood
   on the corner's arc. A segment sits at the arc's centre, turns to its
   angle (rotateZ), stands up (rotateY 90deg) and steps out by the corner
   radius (translateZ), exactly as the straight walls do. Angles run
   clockwise from +x: top-left 180-270, top-right 270-360, bottom-right
   0-90, bottom-left 90-180; each segment covers 15deg, at its midpoint.
   Chord of 15deg at R = 0.26 R = 4.03cqw; 4.4 overlaps the joins. Light
   follows the arc: top corners a touch brighter than bottom ones. */
.iphone-corner {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.iphone-corner.c-tl { left: var(--R);                   top: var(--R);                   --a0: 180deg; --shade: rgba(255, 255, 255, 0.06); }
.iphone-corner.c-tr { left: calc(var(--W) - var(--R)); top: var(--R);                   --a0: 270deg; --shade: rgba(255, 255, 255, 0.03); }
.iphone-corner.c-br { left: calc(var(--W) - var(--R)); top: calc(var(--H) - var(--R)); --a0: 0deg;   --shade: rgba(0, 0, 0, 0.28); }
.iphone-corner.c-bl { left: var(--R);                   top: calc(var(--H) - var(--R)); --a0: 90deg;  --shade: rgba(0, 0, 0, 0.2); }
.iphone-corner i {
  --k: 0;
  position: absolute;
  left: calc(var(--t) / -2);
  top: -2.2cqw;
  width: var(--t);
  height: 4.4cqw;
  background:
    linear-gradient(var(--shade), var(--shade)),
    repeating-linear-gradient(90deg, var(--wall-grain)),
    linear-gradient(90deg, var(--wall-profile));
  transform: rotateZ(calc(var(--a0) + var(--k) * 15deg + 7.5deg)) rotateY(90deg) translateZ(var(--R));
}
.iphone-corner i:nth-child(2) { --k: 1; }
.iphone-corner i:nth-child(3) { --k: 2; }
.iphone-corner i:nth-child(4) { --k: 3; }
.iphone-corner i:nth-child(5) { --k: 4; }
.iphone-corner i:nth-child(6) { --k: 5; }

/* ---------- Buttons on the walls: real keys ----------
   Each key is a small 3D block standing 0.7cqw off the wall: the element is
   its brushed cap with polished edges, ::before its side, ::after the dark
   gap around it in the frame. Positions run along the wall, which starts
   --R from the top of the body. */
.iphone-edge .iphone-key {
  position: absolute;
  left: 24%;
  width: 52%;
  border-radius: 0.9cqw;
  transform: translateZ(0.7cqw);
  transform-style: preserve-3d;
  background:
    repeating-linear-gradient(90deg, var(--wall-grain)),
    linear-gradient(90deg, var(--ti-1), var(--ti-4) 14%, var(--ti-2) 28% 72%, var(--ti-4) 86%, var(--ti-1));
  box-shadow: inset 0 0 0 0.1cqw rgba(255, 255, 255, 0.16), inset 0 0.3cqw 0.4cqw rgba(255, 255, 255, 0.05);
}
.iphone-edge .iphone-key::before,
.iphone-edge .iphone-key::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}
.iphone-edge .iphone-key::before {
  inset: 0;
  transform: translateZ(-0.35cqw);
  background: linear-gradient(90deg, var(--ti-0), var(--ti-2) 50%, var(--ti-0));
}
.iphone-edge .iphone-key::after {
  inset: -0.25cqw;
  border-radius: 1.15cqw;
  transform: translateZ(-0.68cqw);
  background: #050407;
}
.iphone-edge .k-action { top: 19.95cqw;  height: 7.2cqw; }
.iphone-edge .k-volup  { top: 37.55cqw;  height: 14.6cqw; }
.iphone-edge .k-voldn  { top: 58.35cqw;  height: 14.6cqw; }
.iphone-edge .k-power  { top: 40.75cqw;  height: 22.8cqw; }
/* Camera Control: flush sapphire crystal in a recessed titanium surround,
   not a raised key. */
.iphone-edge .k-camera {
  top: 103.15cqw;
  height: 12.5cqw;
  left: 27%;
  width: 46%;
  border-radius: 1.2cqw;
  transform: translateZ(0.04cqw);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 30%, transparent 70%, rgba(255, 255, 255, 0.05)),
    linear-gradient(90deg, #07060a, #1d1a26 50%, #07060a);
  box-shadow: inset 0 0 0 0.1cqw rgba(255, 255, 255, 0.12);
}
.iphone-edge .k-camera::before { display: none; }
.iphone-edge .k-camera::after {
  inset: -0.35cqw;
  border-radius: 1.5cqw;
  transform: translateZ(-0.02cqw);
  background: linear-gradient(90deg, var(--ti-0), var(--ti-3) 50%, var(--ti-0));
  box-shadow: inset 0 0 0 0.1cqw rgba(0, 0, 0, 0.6);
}

/* ---------- Buttons in silhouette (seen face-on) ----------
   iPhone 16 Pro Max layout. Left: Action, volume up, volume down. Right:
   side button, and the flush sapphire Camera Control lower down. Seen from
   the back everything is mirrored, as on the real phone. Same protrusion
   as the wall keys (0.7 to 0.8cqw), polished edge toward the light. */
.iphone-btn {
  position: absolute;
  width: 0.9cqw;
  background: linear-gradient(90deg, var(--ti-1), var(--ti-4) 40%, var(--ti-2) 65%, var(--ti-0));
  box-shadow: inset 0 0.12cqw 0 rgba(255, 255, 255, 0.18), inset 0 -0.12cqw 0 rgba(0, 0, 0, 0.4);
}
.iphone-btn.k-action { top: 35.4cqw;  height: 7.2cqw; }
.iphone-btn.k-volup  { top: 53cqw;    height: 14.6cqw; }
.iphone-btn.k-voldn  { top: 73.8cqw;  height: 14.6cqw; }
.iphone-btn.k-power  { top: 56.2cqw;  height: 22.8cqw; }
.iphone-front .k-action, .iphone-front .k-volup, .iphone-front .k-voldn,
.iphone-back .k-power {
  left: -0.8cqw;
  border-radius: 0.6cqw 0 0 0.6cqw;
}
.iphone-front .k-power,
.iphone-back .k-action, .iphone-back .k-volup, .iphone-back .k-voldn {
  right: -0.8cqw;
  border-radius: 0 0.6cqw 0.6cqw 0;
}
/* Camera Control is flush with the band: an inset strip, not a bump. */
.iphone-btn.k-camera {
  top: 118.6cqw;
  height: 12.5cqw;
  width: 0.55cqw;
  background: linear-gradient(90deg, #0b0a0e, #2a2733);
  box-shadow: none;
  border-radius: 0.4cqw;
}
.iphone-front .k-camera { right: 0.25cqw; }
.iphone-back .k-camera  { left: 0.25cqw; }

/* ---------- Suspended in space ----------
   Once the turn has landed, the phone hangs: a slow vertical drift on the
   stage (transform only, run by the compositor), while the floor shadow
   breathes in the opposite phase, wider when the phone is lower. The
   scroll and pointer tilt live on .iphone (js/animations.js), the turn on
   .iphone-body, so the three motions compose instead of fighting. */
@media (prefers-reduced-motion: no-preference) {
  .device-mock {
    animation: phoneHang 7s ease-in-out calc(var(--phone-start) + 2.5s) infinite;
  }
  .device-mock.is-held { animation: none; }
}
@keyframes phoneHang {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.1%); }
}

/* ---------- Screen reel (product pages, js/animations.js) ----------
   The hero screenshot is the first frame; the product's own screens
   follow. Each new screen wipes up from the bottom edge of the display,
   the way an app pushes a new view, while the screen it covers sinks back
   and dims. Opacity, transform and clip-path only. */
.iphone-screen .reel-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(5%) scale(1.03);
  transition: clip-path 950ms var(--ease-depth, var(--ease)), transform 1100ms var(--ease-depth, var(--ease)),
              opacity 200ms linear;
}
.iphone-screen .reel-slide.is-current {
  z-index: 1;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: none;
}
.iphone-screen .reel-slide.is-leaving {
  z-index: 0;
  opacity: 0.3;
  clip-path: inset(0 0 0 0);
  transform: translateY(-3%) scale(0.92);
  transition: transform 1100ms var(--ease-depth, var(--ease)), opacity 900ms var(--ease);
}

/* Progress marks under the phone: one segment per screen, the current one
   filling over the time it is shown. Real buttons: any segment jumps to
   its screen and stops the automatic run. */
.reel-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: -4px;
  margin-bottom: 10px;
  animation: cubeFadeIn 600ms var(--ease) 200ms both;
}
.reel-dot {
  -webkit-tap-highlight-color: transparent;
  padding: 12px 3px;
  display: block;
}
.reel-dot-track {
  display: block;
  position: relative;
  width: 26px;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(214, 188, 255, 0.16);
  transition: width var(--dur-m) var(--ease-spring, var(--ease)), background var(--dur-s) var(--ease);
}
.reel-dot:hover .reel-dot-track { background: rgba(214, 188, 255, 0.3); }
.reel-dot[aria-current="true"] .reel-dot-track { width: 40px; }
.reel-dot-fill {
  position: absolute;
  inset: 0;
  background: var(--am-300);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir="rtl"] .reel-dot-fill { transform-origin: right center; }
.reel-dot.is-seen .reel-dot-fill { transform: none; background: rgba(214, 188, 255, 0.45); }
.reel-dot[aria-current="true"] .reel-dot-fill {
  background: var(--am-300);
  animation: reelFill var(--reel-ms, 4200ms) linear forwards;
}
.reel-nav.is-paused .reel-dot[aria-current="true"] .reel-dot-fill { animation-play-state: paused; }
.reel-nav.is-manual .reel-dot[aria-current="true"] .reel-dot-fill { animation: none; transform: none; }
@keyframes reelFill { from { transform: scaleX(0); } to { transform: none; } }
.reel-dot:focus-visible { outline-offset: 0; }

/* ---------- Held off-screen (set only by js/animations.js) ----------
   A phone that loads below the fold waits on its back, still and dark,
   until it scrolls into view; the script then removes this class. */
.device-mock.is-held .iphone-body,
.device-mock.is-held .iphone-shadow,
.device-mock.is-held .iphone-screen-off,
.device-mock.is-held .device-shot { animation: none; }
.device-mock.is-held .iphone-body { transform: translateY(4cqw) rotateX(12deg) rotateY(-180deg) rotateZ(-5deg) scale(0.94); }
.device-mock.is-held .iphone-shadow { transform: scaleX(0.85); opacity: 0.7; }
.device-mock.is-held .iphone-screen-off { opacity: 1; }

/* Reduced motion: no turn at all, just the finished phone. */
@media (prefers-reduced-motion: reduce) {
  .iphone-body, .iphone-shadow, .iphone-screen-off, .iphone-screen .device-shot { animation: none; }
  .iphone { transition: none; }
  .reel-dot[aria-current="true"] .reel-dot-fill { animation: none; transform: none; }
}