/* ============================================
   iPhone Pro device frame
   Titanium rim, thin black bezel, Dynamic Island, side buttons.
   Everything scales from one width, so the frame stays in
   proportion at any size: set --iphone-pro-width on the element.

   <div class="iphone-pro">
     <i class="iphone-pro__btn iphone-pro__btn--action"></i> ...
     <div class="iphone-pro__body">
       <div class="iphone-pro__screen">...</div>
     </div>
   </div>
   ============================================ */

.iphone-pro {
  --w: var(--iphone-pro-width, 16rem);
  --iphone-pro-rim: calc(var(--w) * 0.014);
  --iphone-pro-bezel: calc(var(--w) * 0.02);
  --iphone-pro-radius: calc(var(--w) * 0.17);
  --iphone-pro-metal: linear-gradient(
    135deg,
    var(--color-mocha-2) 0%,
    var(--color-mocha-4) 26%,
    var(--color-mocha-3) 50%,
    var(--color-mocha-5) 78%,
    var(--color-mocha-3) 100%
  );

  position: relative;
  width: var(--w);
  flex: 0 0 auto;
}

.iphone-pro__body {
  position: relative;
  padding: calc(var(--iphone-pro-rim) + var(--iphone-pro-bezel));
  border-radius: var(--iphone-pro-radius);
  background: var(--iphone-pro-metal);
  box-shadow:
    0 calc(var(--w) * 0.05) calc(var(--w) * 0.14) color-mix(in srgb, var(--color-surface-ink) 38%, transparent);
}

/* Black bezel, sits between the metal rim and the screen */
.iphone-pro__body::before {
  content: '';
  position: absolute;
  inset: var(--iphone-pro-rim);
  border-radius: calc(var(--iphone-pro-radius) - var(--iphone-pro-rim));
  background-color: var(--color-surface-ink);
}

/* Dynamic Island */
.iphone-pro__body::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: calc(var(--iphone-pro-rim) + var(--iphone-pro-bezel) + var(--w) * 0.026);
  left: 50%;
  width: calc(var(--w) * 0.285);
  height: calc(var(--w) * 0.083);
  transform: translateX(-50%);
  border-radius: 999px;
  background-color: var(--color-surface-ink);
  pointer-events: none;
}

.iphone-pro__screen {
  position: relative;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: 1206 / 2622;
  width: 100%;
  border-radius: calc(var(--iphone-pro-radius) - var(--iphone-pro-rim) - var(--iphone-pro-bezel));
  background-color: var(--color-surface-ink);
}

/* Side buttons (action, volume, power, camera control) */
.iphone-pro__btn {
  position: absolute;
  z-index: 0;
  width: calc(var(--w) * 0.014);
  border-radius: calc(var(--w) * 0.006);
  background: var(--iphone-pro-metal);
  pointer-events: none;
}

.iphone-pro__btn--action,
.iphone-pro__btn--vol-up,
.iphone-pro__btn--vol-down {
  left: calc(var(--w) * -0.009);
}

.iphone-pro__btn--power,
.iphone-pro__btn--camera {
  right: calc(var(--w) * -0.009);
}

.iphone-pro__btn--action   { top: 13.5%; height: 3.2%; }
.iphone-pro__btn--vol-up   { top: 19.5%; height: 6.2%; }
.iphone-pro__btn--vol-down { top: 27.5%; height: 6.2%; }
.iphone-pro__btn--power    { top: 25%;   height: 9.8%; }
.iphone-pro__btn--camera   { top: 60%;   height: 6.4%; }