/* ─────────────────────────────────────────────────────────────
   iPhone 17 Pro Max mockup — shared component
   Link this file once per page, then use this structure:

   <div class="iphone-wrap">
     <div class="iphone-frame">                  ← default: Black Titanium
       <div class="iphone-dynamic-island"></div>
       <div class="iphone-screen">               ← add .iphone-screen--light for white bg
         <!-- your screen content -->
       </div>
       <div class="iphone-home-bar"></div>
     </div>
   </div>

   Modifier classes:
   .iphone-frame--light-screen  → dark home bar (for light-bg screens)
───────────────────────────────────────────────────────────────── */

/* ── Scene wrapper ── */
.iphone-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
}

/* ── Outer frame — Black Titanium by default ── */
.iphone-frame {
  width: 296px;
  background: linear-gradient(160deg, #3D3D3F 0%, #1C1C1E 45%, #2C2C2E 100%);
  border-radius: 54px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.18),
    0 0 0 1px rgba(0,0,0,0.85),
    0 0 0 2.5px rgba(255,255,255,0.07),
    0 0 0 3px rgba(0,0,0,0.6),
    0 50px 120px rgba(0,0,0,0.55),
    0 20px 60px rgba(0,0,0,0.3),
    0 0 80px rgba(107,68,113,0.15);
  position: relative;
}

/* Camera Control / Power — right side */
.iphone-frame::before {
  content: '';
  position: absolute;
  right: -3.5px;
  top: 120px;
  width: 3.5px;
  height: 70px;
  background: linear-gradient(180deg, #2C2C2E 0%, #3A3A3C 40%, #3A3A3C 60%, #2C2C2E 100%);
  border-radius: 0 2px 2px 0;
}

/* Action button — left side */
.iphone-frame::after {
  content: '';
  position: absolute;
  left: -3.5px;
  top: 95px;
  width: 3.5px;
  height: 34px;
  background: linear-gradient(180deg, #2C2C2E 0%, #3A3A3C 40%, #3A3A3C 60%, #2C2C2E 100%);
  border-radius: 2px 0 0 2px;
}

/* ── Dynamic Island ── */
.iphone-dynamic-island {
  width: 62px;
  height: 20px;
  background: #000;
  border-radius: 50px;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.6);
}

/* Front-facing camera dot */
.iphone-dynamic-island::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0A0A0A;
  border: 1.5px solid #181818;
  box-shadow: 0 0 4px rgba(60,80,255,0.35), inset 0 0 0 1.5px rgba(255,255,255,0.03);
}

/* ── Screen ── */
.iphone-screen {
  border-radius: 46px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.12);
}

/* Light-background variant (testimonials, review feeds) */
.iphone-screen--light {
  background: var(--parchment, #FAF6F0);
  display: flex;
  flex-direction: column;
  min-height: 570px;
}

/* Dark-background variant (stories, full-bleed media) */
.iphone-screen--dark {
  background: #000;
  aspect-ratio: 9 / 19.5;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.04);
}

/* ── Home indicator bar ── */
.iphone-home-bar {
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.3);
  z-index: 30;
  pointer-events: none;
}

/* Dark bar for light-background screens */
.iphone-frame--light-screen .iphone-home-bar {
  background: rgba(0,0,0,0.15);
}