/* ============================================================
   phone.css — the hero device
   One phone exists for the whole film. It never unmounts: it
   flies, tilts and re-frames between chapters while the screens
   change inside it. That continuity is what removes hard cuts.
   ============================================================ */

#phone-rig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.phone {
  position: absolute;
  left: -172px;               /* half of width  */
  top: -350px;                /* half of height */
  width: 344px;
  height: 700px;
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- Titanium rail ------------------------------------------ */
.phone-body {
  position: absolute;
  inset: 0;
  border-radius: var(--r-phone);
  background:
    linear-gradient(150deg,
      #3B4A44 0%, #16211D 16%, #0A100E 34%,
      #222E29 52%, #0A100E 70%, #1B2622 86%, #38453F 100%);
  box-shadow:
    0 0 0 1px rgba(243, 233, 210, 0.12),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    var(--shadow-deep);
}

/* Inner bezel — the black band between rail and glass. */
.phone-bezel {
  position: absolute;
  inset: 5px;
  border-radius: calc(var(--r-phone) - 5px);
  background: #040706;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* --- Screen -------------------------------------------------- */
.phone-screen {
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--r-phone) - 9px);
  overflow: hidden;
  background: #0B3E27;
  isolation: isolate;
}

/* Each screenshot is a layer in a stack; the engine crossfades
   or pushes between them. object-position keeps the top of the
   UI pinned so the status bar never drifts. */
.screen-plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.screen-plate img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: auto;
  transform-origin: 50% 0%;
  will-change: transform;
}

/* Screen light spill — the glow the display throws onto the
   world. Tinted from the active screen's dominant colour. */
.phone-spill {
  position: absolute;
  left: -18%; top: -8%;
  width: 136%; height: 116%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              var(--spill-color, rgba(18, 99, 74, 0.55)) 0%,
              transparent 74%);
  filter: blur(58px);
  opacity: var(--spill, 0.7);
  z-index: -1;
  pointer-events: none;
}

/* --- Glass treatment ---------------------------------------- */
/* Broad diagonal sheen that slides as the phone rotates. */
.phone-sheen {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--r-phone) - 9px);
  pointer-events: none;
  background: linear-gradient(
    calc(112deg + var(--tiltY, 0) * 1deg),
    rgba(255, 255, 255, 0.00) 30%,
    rgba(255, 255, 255, 0.11) 44%,
    rgba(255, 255, 255, 0.02) 55%,
    rgba(255, 255, 255, 0.00) 68%);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 6;
}

/* Hard specular streak — a single bright edge highlight. */
.phone-specular {
  position: absolute;
  top: -40%;
  left: calc(-40% + var(--spec-x, 0) * 1%);
  width: 42%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.16) 42%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0.14) 58%,
    transparent 100%);
  filter: blur(9px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 7;
  opacity: 0.55;
}

/* Screen curvature — darkens the extreme edges of the glass. */
.phone-curve {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--r-phone) - 9px);
  pointer-events: none;
  z-index: 5;
  box-shadow:
    inset 0 0 26px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* --- Dynamic island ----------------------------------------- */
.phone-island {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 92px;
  height: 27px;
  border-radius: 16px;
  background: #000;
  transform: translateX(-50%);
  z-index: 8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.phone-island::after {          /* lens glint */
  content: "";
  position: absolute;
  right: 11px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 34% 32%,
              rgba(60, 120, 160, 0.75), rgba(0,0,0,0.9) 68%);
}

/* --- Home indicator ----------------------------------------- */
.phone-home {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 118px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.72);
  transform: translateX(-50%);
  z-index: 8;
}

/* --- Side buttons -------------------------------------------- */
.phone-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2E3A35, #101815);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
.phone-btn--vol-up   { left: -3px; top: 148px; height: 46px; }
.phone-btn--vol-down { left: -3px; top: 204px; height: 46px; }
.phone-btn--power    { right: -3px; top: 176px; height: 76px; }

/* --- Reflection beneath the device --------------------------- */
.phone-reflection {
  position: absolute;
  left: -172px;
  top: 356px;
  width: 344px;
  height: 320px;
  border-radius: var(--r-phone);
  background: linear-gradient(180deg,
              rgba(18, 99, 74, 0.28) 0%,
              rgba(11, 62, 39, 0.08) 42%,
              transparent 82%);
  transform: scaleY(-1);
  filter: blur(16px);
  opacity: 0.4;
  pointer-events: none;
}

/* ============================================================
   TOUCH LAYER — the hand
   A stylised finger silhouette plus a contact ring. Real product
   films use a soft silhouette rather than a photographic hand
   because the hand must never compete with the UI it is pointing
   at. The ring carries the gesture; the finger carries intent.
   ============================================================ */

.touch-layer {
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--r-phone) - 9px);
  overflow: hidden;
  pointer-events: none;
  z-index: 9;
}

.touch-finger {
  position: absolute;
  left: 0; top: 0;
  width: 132px;
  height: 210px;
  transform-origin: 26% 12%;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.55));
}

.touch-ring {
  position: absolute;
  left: 0; top: 0;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  border: 1.5px solid rgba(205, 245, 70, 0.85);
  background: radial-gradient(circle,
              rgba(205, 245, 70, 0.30) 0%,
              rgba(205, 245, 70, 0.06) 58%,
              transparent 72%);
  opacity: 0;
  will-change: transform, opacity;
}

.touch-ripple {
  position: absolute;
  left: 0; top: 0;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  border: 1.5px solid rgba(205, 245, 70, 0.55);
  opacity: 0;
  will-change: transform, opacity;
}

/* Swipe trail — a short comet behind a moving contact point. */
.touch-trail {
  position: absolute;
  left: 0; top: 0;
  height: 3px;
  border-radius: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg,
              transparent, rgba(205, 245, 70, 0.55));
  opacity: 0;
  filter: blur(1.5px);
}

/* A capture that failed to load is labelled on the device rather
   than showing an empty black rectangle, so the problem is obvious
   in the room instead of looking like a rendering bug. */
.screen-plate.is-missing {
  background: repeating-linear-gradient(
    45deg, #0B2119 0 12px, #0E2A20 12px 24px);
  display: grid;
  place-items: center;
}
.screen-plate.is-missing::after {
  content: "Missing capture: " attr(data-missing);
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 107, 90, 0.14);
  border: 1px solid rgba(255, 107, 90, 0.5);
  color: #FF6B5A;
  font-family: var(--font-utility);
  font-size: 11px;
  text-align: center;
  max-width: 84%;
  line-height: 1.5;
}