/* ════════════════════════════════════════════════════════════
   iPhone 16 Pro · Desert Titanium · Gold Mockup with Auto-Demo
   ────────────────────────────────────────────────────────────
   All classes are prefixed `tu-` to avoid collisions with the
   surrounding site CSS (esp. `.btn` from styles.css).
   CSS variables are scoped to `.tu-iphone-mockup` so they don't
   leak into the host site's `:root` namespace.
   ════════════════════════════════════════════════════════════ */
.tu-iphone-mockup {
  /* iPhone 16 Pro hardware metrics — locked to the real Apple-spec
     CSS-pixel screen size of 402 × 874 (what window.innerWidth /
     innerHeight reports on a real iPhone 16 Pro Safari viewport).
     Body width = 402 OLED + 7px titanium each side = 416. Body height
     stays at 888 (≈ 874 screen + ~7px chrome top + ~7px chrome bottom).
     Visible aspect ratio: 1 : 2.174 — matches Apple's official spec. */
  --tu-phone-w:      416px;          /* 402 OLED + 2 × 7 titanium */
  --tu-phone-h:      888px;
  --tu-frame-w:      7px;
  --tu-inner-w:      402px;          /* OLED area — true iPhone 16 Pro CSS width */
  --tu-inner-h:      874px;          /* OLED area — true iPhone 16 Pro CSS height */
  --tu-iframe-w:     402px;          /* iframe matches OLED exactly — no gutter crop */
  --tu-iframe-h:     924px;
  --tu-iframe-x:     0px;            /* no horizontal offset — iframe = OLED width */
  --tu-iframe-y:     -24px;          /* skip body's vertical centering offset */
  --tu-outer-r:      66px;            /* proportional to wider body */
  --tu-inner-r:      59px;            /* proportional to wider OLED */

  /* Desert Titanium gold palette */
  --tu-ti-shadow-deep:   #8a6e3e;
  --tu-ti-shadow-mid:    #b08855;
  --tu-ti-base:          #d2b07e;
  --tu-ti-highlight:     #ecd5a7;
  --tu-ti-specular:      #faecc9;
  --tu-ti-edge-bright:   #fff3d6;

  /* Display scale — phone is sized at native 392×888 then CSS-scaled */
  --tu-display-scale:    0.85;

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  perspective: 2400px;
}

/* Responsive scaling: shrink whole phone on small viewports */
@media (max-width: 1280px) { .tu-iphone-mockup { --tu-display-scale: 0.78; } }
@media (max-width: 1100px) { .tu-iphone-mockup { --tu-display-scale: 0.70; } }
@media (max-width: 1023px) { .tu-iphone-mockup { --tu-display-scale: 0.80; } }
@media (max-width: 700px)  { .tu-iphone-mockup { --tu-display-scale: 0.81; } }
@media (max-width: 500px)  { .tu-iphone-mockup { --tu-display-scale: 0.69; } }
@media (max-width: 380px)  { .tu-iphone-mockup { --tu-display-scale: 0.60; } }

/* CSS-scale wrapper — keeps iframe rendering at native sharpness.
   Matches iPhone 16 Pro Gold.html exactly: just transform: scale().
   The `.tu-iphone` child renders at its natural 392×888 (it has explicit
   width/height), and the negative margin compensation makes the parent
   layout reserve only the SCALED box size — so the phone never overflows
   the surrounding column on small screens. */
.tu-phone-scale-wrap {
  /* Fallback path (very old browsers without `zoom` support): CSS
     transform-scale + negative margins to shrink the layout box. This
     looks sharp in Firefox but Chrome bilinear-samples the resulting
     iframe texture, producing visible blur. The @supports block below
     promotes any modern browser onto the crisp `zoom` path. */
  transform: scale(var(--tu-display-scale));
  transform-origin: center;
  margin:
    calc((var(--tu-phone-h) * (var(--tu-display-scale) - 1)) / 2)
    calc((var(--tu-phone-w) * (var(--tu-display-scale) - 1)) / 2);
  /* GPU layer hints — keep this element on its own compositor layer so
     scaling is sub-pixel accurate in every engine, including Safari which
     can otherwise demote the layer mid-frame. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: scale(var(--tu-display-scale)) translateZ(0);
}

/* Crisp path for desktop engines (Chrome, Edge, Firefox 126+).
   `zoom` triggers a real layout + repaint at the scaled size so every
   pixel is rasterized fresh — no bilinear texture sampling, no blur.
   EXCLUDED on iOS/iPadOS (detected via -webkit-touch-callout, which only
   exists there): iOS WebKit lets the zoom re-layout leak into the iframe,
   shrinking the prototype's layout viewport to the visual size while text
   renders at device scale — content gets squeezed and clipped. iOS stays
   on the transform-scale fallback above, which only scales pixels and
   never the iframe's internal viewport. */
@supports (zoom: 0.5) and (not (-webkit-touch-callout: none)) {
  .tu-phone-scale-wrap {
    transform: none;
    -webkit-transform: none;
    margin: 0;
    zoom: var(--tu-display-scale);
  }
}

/* ────────────────────────────────────────────────────────────
   iPhone 16 Pro · Desert Titanium body
   ──────────────────────────────────────────────────────────── */
.tu-iphone {
  position: relative;
  width: var(--tu-phone-w);
  height: var(--tu-phone-h);
  border-radius: var(--tu-outer-r);
  isolation: isolate;

  background:
    /* 1. Top-edge specular highlight */
    linear-gradient(180deg,
      rgba(255, 243, 214, 0.45) 0%,
      rgba(255, 243, 214, 0.05) 8%,
      rgba(255, 243, 214, 0) 18%,
      rgba(0, 0, 0, 0) 82%,
      rgba(0, 0, 0, 0.08) 95%,
      rgba(0, 0, 0, 0.15) 100%),
    /* 2. Subtle vertical brushed striations */
    repeating-linear-gradient(180deg,
      transparent 0px,
      transparent 2px,
      rgba(80, 60, 30, 0.015) 2px,
      rgba(80, 60, 30, 0.015) 3px),
    /* 3. Horizontal lighting — the rounded titanium edge curve */
    linear-gradient(90deg,
      var(--tu-ti-shadow-deep)  0%,
      var(--tu-ti-shadow-mid)   2%,
      var(--tu-ti-base)         8%,
      var(--tu-ti-highlight)    22%,
      var(--tu-ti-specular)     50%,
      var(--tu-ti-highlight)    78%,
      var(--tu-ti-base)         92%,
      var(--tu-ti-shadow-mid)   98%,
      var(--tu-ti-shadow-deep)  100%);

  box-shadow:
    inset 0 1.5px 0 rgba(255, 248, 230, 0.7),
    inset 0 -1.5px 0 rgba(60, 40, 15, 0.5),
    inset 1.5px 0 0 rgba(255, 248, 230, 0.2),
    inset -1.5px 0 0 rgba(255, 248, 230, 0.2),
    inset 0 0 0 0.5px rgba(255, 245, 220, 0.25),
    0 1px 0 rgba(255, 245, 220, 0.6),
    0 4px 8px rgba(60, 40, 15, 0.08),
    0 18px 35px rgba(40, 25, 10, 0.18),
    0 45px 80px rgba(40, 25, 10, 0.22),
    0 90px 140px rgba(40, 25, 10, 0.18);
}

/* Floor / contact shadow under the phone */
.tu-iphone::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -55px;
  width: 92%;
  height: 50px;
  background: radial-gradient(ellipse at center,
    rgba(70, 45, 18, 0.32) 0%,
    rgba(70, 45, 18, 0.12) 40%,
    rgba(70, 45, 18, 0) 75%);
  transform: translateX(-50%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────
   Side buttons — iPhone 16 Pro layout
     LEFT:  Action / Volume Up / Volume Down
     RIGHT: Side (power) / Camera Control
   ──────────────────────────────────────────────────────────── */
.tu-iphone-btn {
  position: absolute;
  background:
    linear-gradient(180deg,
      var(--tu-ti-shadow-mid) 0%,
      var(--tu-ti-base) 18%,
      var(--tu-ti-highlight) 50%,
      var(--tu-ti-base) 82%,
      var(--tu-ti-shadow-mid) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 230, 0.5),
    inset 0 -1px 0 rgba(60, 40, 15, 0.4),
    0 0 0 0.5px rgba(60, 40, 15, 0.25);
  z-index: 1;
}
.tu-iphone-btn-action   { left: -3px; top: 142px; width: 5px; height: 32px; border-radius: 3px 0 0 3px; }
.tu-iphone-btn-vol-up   { left: -3px; top: 200px; width: 5px; height: 52px; border-radius: 3px 0 0 3px; }
.tu-iphone-btn-vol-down { left: -3px; top: 268px; width: 5px; height: 52px; border-radius: 3px 0 0 3px; }
.tu-iphone-btn-power    { right: -3px; top: 192px; width: 5px; height: 92px; border-radius: 0 3px 3px 0; }
.tu-iphone-btn-camera   { right: -3px; top: 312px; width: 5px; height: 38px; border-radius: 0 3px 3px 0; }
.tu-iphone-btn-camera::before {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 1px; height: 8px;
  background: rgba(255, 248, 230, 0.5);
  transform: translateY(-50%);
  border-radius: 1px;
}

/* ────────────────────────────────────────────────────────────
   Screen / OLED area — prototype's own black bezel fills this.
   ──────────────────────────────────────────────────────────── */
.tu-screen-frame {
  position: absolute;
  inset: var(--tu-frame-w);
  width: var(--tu-inner-w);
  height: var(--tu-inner-h);
  border-radius: var(--tu-inner-r);
  background: #000;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 240, 210, 0.18),
    0 0 0 0.5px rgba(0, 0, 0, 0.6);
}
.tu-screen-iframe {
  position: absolute;
  top:  var(--tu-iframe-y);
  left: var(--tu-iframe-x);
  width:  var(--tu-iframe-w);
  height: var(--tu-iframe-h);
  border: 0;
  display: block;
  background: #000;
  pointer-events: none;          /* fully static — no interaction */
  -webkit-user-select: none;
          user-select: none;
  /* Cross-browser sharpness layer for the scaled iframe. Different engines
     respect different `image-rendering` keywords; declaring several lets
     each browser pick the one it supports:
       - `optimizeQuality`            → legacy SVG-spec value (older Firefox)
       - `-webkit-optimize-contrast`  → Chrome / Safari sharper-sampling hint
       - `crisp-edges`                → Firefox-supported crisp-sampling hint
       - `high-quality`               → modern Chromium / Safari best-quality
     The later values override earlier ones in browsers that support them. */
  image-rendering: optimizeQuality;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  /* Promote to its own GPU compositing layer with sub-pixel-precise raster. */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  /* Text rendering hints — these propagate sharpness intent down into any
     SVG / icon fonts the prototype renders. */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Glass reflection — diagonal sheen across the OLED */
.tu-screen-glare {
  position: absolute;
  inset: 0;
  border-radius: var(--tu-inner-r);
  pointer-events: none;
  z-index: 5;
  background:
    linear-gradient(125deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 18%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 0.025) 92%,
      rgba(255, 255, 255, 0.06) 100%);
  mix-blend-mode: screen;
}

/* Outer glass top-edge highlight */
.tu-screen-frame::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 50%,
    rgba(255,255,255,0) 100%);
  z-index: 6;
  pointer-events: none;
}

/* ── Click catcher: pause / resume on tap anywhere over the OLED ── */
.tu-screen-click-catch {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  border-radius: var(--tu-inner-r);
  background: transparent;
  z-index: 7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Paused-state veil + play icon ── */
.tu-screen-pause-veil {
  position: absolute;
  inset: 0;
  border-radius: var(--tu-inner-r);
  background: rgba(20, 14, 6, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  display: flex; align-items: center; justify-content: center;
}
.tu-screen-pause-veil[data-state="paused"] { opacity: 1; }

.tu-screen-pause-icon {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(255, 248, 230, 0.92);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 248, 230, 0.6),
    inset 0 -2px 0 rgba(60, 40, 15, 0.10);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.85);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tu-screen-pause-veil[data-state="paused"] .tu-screen-pause-icon {
  transform: scale(1);
}
.tu-screen-pause-icon svg {
  width: 38px; height: 38px;
  display: block;
  margin-left: 4px;
  fill: #1a1206;
}

/* ── Cycle-end blend-over veil ── */
.tu-screen-cycle-veil {
  position: absolute;
  inset: 0;
  border-radius: var(--tu-inner-r);
  background:
    radial-gradient(ellipse 90% 80% at 50% 45%,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(252, 250, 244, 0.94) 60%,
      rgba(245, 240, 228, 0.90) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  padding: 0 28px;
}
.tu-screen-cycle-veil[data-state="visible"] { opacity: 1; }
.tu-screen-cycle-veil .tu-cycle-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}
.tu-screen-cycle-veil[data-state="visible"] .tu-cycle-logo {
  opacity: 1;
  transform: translateY(0);
}
.tu-screen-cycle-veil .tu-cycle-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: rgba(20, 14, 6, 0.78);
  color: #faecc9;
  font-family: var(--font-sans), 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease 0.30s, transform 0.35s ease 0.30s;
}
.tu-screen-cycle-veil[data-state="visible"] .tu-cycle-badge {
  opacity: 1;
  transform: translateY(0);
}
.tu-screen-cycle-veil .tu-cycle-badge .tu-cycle-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #C5A572;
  box-shadow: 0 0 0 0 rgba(197, 165, 114, 0.7);
  animation: tuCyclePulse 1.4s ease-in-out infinite;
}
@keyframes tuCyclePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 165, 114, 0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(197, 165, 114, 0); }
}