/* ════════════════════════════════════════════════════════════
   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 prototype's PhoneFrame.
     See the inline comments in iPhone 16 Pro Gold.html for the math. */
  --tu-phone-w:      392px;          /* 378 + 2 × 7 titanium */
  --tu-phone-h:      888px;
  --tu-frame-w:      7px;
  --tu-inner-w:      378px;          /* OLED area = PhoneFrame's natural width */
  --tu-inner-h:      874px;
  --tu-iframe-w:     402px;          /* iframe native viewport width */
  --tu-iframe-h:     924px;
  --tu-iframe-x:     -12px;          /* (402 − 378) / 2 — hide centered gutter */
  --tu-iframe-y:     -24px;          /* skip body's vertical centering offset */
  --tu-outer-r:      62px;
  --tu-inner-r:      55px;

  /* 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 {
  transform: scale(var(--tu-display-scale));
  transform-origin: center;
  /* Negative margins shrink the layout box to scaled size:
       margin = (native_dim * (scale − 1)) / 2
     With scale 0.85 → -29.4 / -66.6, with 0.78 → -43.1 / -97.7, etc. */
  margin:
    calc((var(--tu-phone-h) * (var(--tu-display-scale) - 1)) / 2)
    calc((var(--tu-phone-w) * (var(--tu-display-scale) - 1)) / 2);
}

/* ────────────────────────────────────────────────────────────
   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;
}

/* 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); }
}