/* ============================================================
   The device

   The screens inside are the CrashPricer mockups, embedded at
   their native 390 x 844 and scaled by one number (--k), so the
   interface on this page is pixel-for-pixel the designed app —
   not a re-drawing of it. The shell matches the mockup device:
   #0A0A0B body, 56px radius, 12px rail, with the depth and
   lighting a 3D presentation needs added on top.
   ============================================================ */

.phone {
  --k: 0.80;                       /* 414 x 868 design units */
  position: relative;
  width: calc(414px * var(--k));
  transform-style: preserve-3d;
}

.phone__aura {
  position: absolute;
  inset: -20% -32%;
  background:
    radial-gradient(46% 40% at 50% 28%, rgba(34,197,94,.28), transparent 70%),
    radial-gradient(60% 52% at 50% 74%, rgba(14,26,43,.18), transparent 72%);
  filter: blur(50px);
  transform: translateZ(-140px);
  pointer-events: none;
}

.phone__body { position: relative; transform-style: preserve-3d; }

.phone__bezel {
  position: relative;
  width: calc(414px * var(--k));
  height: calc(868px * var(--k));
  padding: calc(12px * var(--k));
  border-radius: calc(56px * var(--k));
  background:
    linear-gradient(150deg, #3A414C 0%, #14181F 16%, #0A0A0B 44%, #0A0A0B 66%, #1C222B 86%, #454C58 100%);
  box-shadow:
    var(--sh-phone),
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 1px 1px rgba(255,255,255,.38),
    inset 0 -1px 2px rgba(0,0,0,.65);
  transform-style: preserve-3d;
}

/* the viewport the mockup screens are scaled into */
.phone__screen {
  position: relative;
  width: calc(390px * var(--k));
  height: calc(844px * var(--k));
  border-radius: calc(46px * var(--k));
  overflow: hidden;
  background: var(--app-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.65);
}

.phone__glare {
  position: absolute;
  inset: 0;
  border-radius: calc(56px * var(--k));
  background: linear-gradient(148deg,
    rgba(255,255,255,.26) 0%,
    rgba(255,255,255,.06) 17%,
    rgba(255,255,255,0) 36%,
    rgba(255,255,255,0) 72%,
    rgba(255,255,255,.05) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 7;
}

.phone__side {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #5A6270, #23282F);
  transform: translateZ(-3px);
}
.phone__side--power { right: -3px; top: 24%; height: 9%; }
.phone__side--up    { left: -3px; top: 18%; height: 6%; }
.phone__side--down  { left: -3px; top: 26%; height: 6%; }

.phone__floor {
  position: absolute;
  left: 6%; right: 6%; bottom: -8%;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(13,24,41,.40), transparent 72%);
  filter: blur(18px);
  transform: translateZ(-200px);
}

/* ── the mockup screens ───────────────────────────────────────
   Each .scr wraps one screen exported from the design canvas at
   its native size. Nothing inside is restyled — it is scaled.   */
.scr {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform-origin: top left;
  transform: scale(var(--k));
  pointer-events: none;

  /* Screens never cross-fade. Two dense interfaces at half opacity read as a
     rendering fault, so the incoming screen is fully opaque and wipes down over
     the outgoing one, which holds at full strength underneath until it is
     covered and then vanishes behind it. */
  z-index: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0s linear .45s;
}
.scr.is-on {
  z-index: 2;
  clip-path: inset(0 0 0 0);
  transition: clip-path .45s var(--e-soft);
}

/* The wipe edge is a scan pass — the one gesture this whole product is about. */
#screens .scr.is-on::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  z-index: 40;
  background: linear-gradient(90deg, rgba(34,197,94,0), #22C55E 22%, #86EFAC 50%, #22C55E 78%, rgba(34,197,94,0));
  box-shadow: 0 0 20px 4px rgba(34,197,94,.5);
  animation: scanpass .45s var(--e-soft) forwards;
  pointer-events: none;
}
/* The line rides the last 3px of the revealed band, so it sits just inside the
   clip edge rather than one pixel past it, where it would be clipped away. */
@keyframes scanpass {
  from { transform: translateY(-3px);  opacity: 1; }
  85%  {                               opacity: 1; }
  to   { transform: translateY(841px); opacity: 0; }
}

/* the canvas rendered these as ordinary blocks; keep them inert here */
.scr sc-if { display: none; }

/* ── device sizes ─────────────────────────────────────────────
   One number per context. 414 x 868 design units times --k.     */
.phonestage .phone { --k: 0.80; }               /* 331 x 694 */
@media (max-height: 860px) { .phonestage .phone { --k: 0.72; } }
@media (max-height: 760px) { .phonestage .phone { --k: 0.64; } }
@media (max-width: 1180px) { .phonestage .phone { --k: 0.72; } }
@media (max-width: 860px)  { .phonestage .phone { --k: 0.62; } }
@media (max-width: 860px) and (max-height: 700px) { .phonestage .phone { --k: 0.52; } }

.phone--static { --k: 0.74; }
.phone--shop   { --k: 0.60; }
@media (max-width: 560px) {
  .phone--static { --k: 0.56; }
  .phone--shop   { --k: 0.52; }
}