/* A modern iPhone around one captured app screen. Same geometry as the App
   Store screenshots (marketing/app-store-shots/remotion/src/components/
   Phone.tsx): 390 x 844 pt screen, 6.5 pt black glass, 2.4 pt titanium edge,
   side buttons, Dynamic Island, status bar and home indicator. Every length
   is in pt of the device, scaled to the element's width through --pt.
   Captures leave the top 47 pt empty, so the status bar is drawn only here. */

.iphone {
  position: relative; width: var(--w, 300px); aspect-ratio: 407.8 / 861.8;
  container-type: inline-size;
}
.iphone__body { position: absolute; inset: 0; --pt: calc(100cqw / 407.8); }

.iphone__shadow {
  position: absolute; inset: 0; border-radius: calc(var(--pt) * 63.9);
  box-shadow: 0 calc(var(--pt) * 38) calc(var(--pt) * 76) rgba(90, 52, 28, .26), 0 calc(var(--pt) * 12) calc(var(--pt) * 26) rgba(90, 52, 28, .16);
}
.iphone--on-dark .iphone__shadow { box-shadow: 0 calc(var(--pt) * 38) calc(var(--pt) * 80) rgba(0, 0, 0, .45), 0 calc(var(--pt) * 12) calc(var(--pt) * 26) rgba(0, 0, 0, .3); }

.iphone__btn { position: absolute; width: calc(var(--pt) * 3); border-radius: calc(var(--pt) * 1.5); background: linear-gradient(90deg, #3d3935 0%, #8b847d 45%, #4a4541 100%); }
.iphone__btn--1 { left: calc(var(--pt) * -2); top: calc(var(--pt) * 120.9); height: calc(var(--pt) * 32); }
.iphone__btn--2 { left: calc(var(--pt) * -2); top: calc(var(--pt) * 184.9); height: calc(var(--pt) * 60); }
.iphone__btn--3 { left: calc(var(--pt) * -2); top: calc(var(--pt) * 258.9); height: calc(var(--pt) * 60); }
.iphone__btn--4 { right: calc(var(--pt) * -2); top: calc(var(--pt) * 208.9); height: calc(var(--pt) * 96); }

.iphone__frame {
  position: absolute; inset: 0; border-radius: calc(var(--pt) * 63.9);
  background: linear-gradient(135deg, #8e8780 0%, #4a4541 18%, #2c2926 50%, #57514b 82%, #9a938b 100%);
}
.iphone__glass {
  position: absolute; inset: calc(var(--pt) * 2.4); border-radius: calc(var(--pt) * 61.5);
  background: #0b0a0a; box-shadow: inset 0 0 0 max(0.6px, calc(var(--pt) * 0.5)) rgba(255, 255, 255, .10);
}
.iphone__screen {
  position: absolute; left: calc(var(--pt) * 8.9); top: calc(var(--pt) * 8.9);
  width: calc(var(--pt) * 390); height: calc(var(--pt) * 844);
  border-radius: calc(var(--pt) * 55); overflow: hidden; background: #FAF5EE;
}
.iphone__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; }
.iphone__island { position: absolute; top: calc(var(--pt) * 11); left: calc(var(--pt) * 133); width: calc(var(--pt) * 124); height: calc(var(--pt) * 36); border-radius: calc(var(--pt) * 18); background: #000; }
.iphone__time { position: absolute; top: calc(var(--pt) * 17); left: calc(var(--pt) * 50); font: 600 calc(var(--pt) * 17) / 1.2 "Inter", system-ui, sans-serif; letter-spacing: calc(var(--pt) * -0.2); color: #111; }
.iphone__icons { position: absolute; top: calc(var(--pt) * 19); right: calc(var(--pt) * 30); width: calc(var(--pt) * 78); height: calc(var(--pt) * 14); fill: #111; }
.iphone__home { position: absolute; bottom: calc(var(--pt) * 8); left: calc(var(--pt) * 128); width: calc(var(--pt) * 134); height: calc(var(--pt) * 5); border-radius: calc(var(--pt) * 3); background: rgba(17, 17, 17, .85); }
/* a soft sheen across the glass; the hero moves it with the tilt */
.iphone__sheen {
  position: absolute; inset: calc(var(--pt) * 2.4); border-radius: calc(var(--pt) * 61.5); pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 44%);
  mix-blend-mode: screen;
}