/* BrightWeb device frame: an iPhone 18 Pro drawn in CSS (no Apple artwork).
   Screen 1206 x 2622 px (Apple tech specs). Body ratio approximates 71.9 x 150 mm.
   Every size is in cqw (percent of the phone's own width), so the frame scales to any width.
   Needs container query units (Safari 16+, Chrome 105+, Firefox 110+).
   Usage: see device-frame.html. Set the width on .device; the height follows. */

.device{
  --df-metal:#3a3c41;          /* titanium edge base */
  --df-metal-hi:#9c9ea3;       /* edge highlight */
  --df-shadow:17,18,20;        /* rgb of the drop shadow */
  container-type:inline-size;
  position:relative;
  isolation:isolate;
  width:100%;
}

/* Titanium band, with the black glass bezel drawn as the screen's border */
.device__body{
  position:relative;
  z-index:1;
  padding:1.1cqw;
  border-radius:16.1cqw;
  background:
    linear-gradient(140deg,var(--df-metal-hi) 0%,var(--df-metal) 14%,#26282c 48%,var(--df-metal) 84%,var(--df-metal-hi) 100%);
  box-shadow:
    inset 0 0 0 .22cqw rgba(255,255,255,.16),
    inset 0 .5cqw .7cqw rgba(255,255,255,.18),
    inset 0 -.5cqw .8cqw rgba(0,0,0,.35),
    0 .4cqw .8cqw rgba(var(--df-shadow),.18),
    0 4cqw 8cqw -2cqw rgba(var(--df-shadow),.22),
    0 16cqw 26cqw -10cqw rgba(var(--df-shadow),.38);
}

.device__screen{
  position:relative;
  overflow:hidden;
  box-sizing:content-box;       /* ratio applies to the glass, not glass + bezel */
  aspect-ratio:1206/2622;
  border:2.2cqw solid #050506;
  border-radius:15cqw;          /* inner corner = 12.8cqw, close to the real display radius */
  background:#000;
}
.device__screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* Faint glass reflection + hairline where glass meets bezel */
.device__screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:12.8cqw;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 40%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

/* Dynamic Island, iPhone 18 Pro size: about 35% narrower than the 17 Pro pill (Face ID IR moved under the display).
   Screenshots with an older baked-in pill must be cleaned first (see tools/depill.py in the site scratch repo). */
.device__island{
  position:absolute;
  z-index:2;
  top:5.9cqw;
  left:50%;
  width:19cqw;
  height:9.1cqw;
  transform:translateX(-50%);
  border-radius:999px;
  background:
    radial-gradient(circle at 70% 50%,#1b2333 0 1.05cqw,#0b0e14 1.3cqw,transparent 1.6cqw),
    #000;
}

/* Side buttons: action, volume up, volume down (left); side button, Camera Control (right) */
.device__btn{
  position:absolute;
  z-index:0;
  width:1.2cqw;
  border-radius:.6cqw;
  background:linear-gradient(90deg,#1f2124,var(--df-metal-hi) 55%,#2a2c30);
}
.device__btn--action{left:-.8cqw;top:30cqw;height:10cqw}
.device__btn--vol-up{left:-.8cqw;top:47cqw;height:15cqw}
.device__btn--vol-down{left:-.8cqw;top:66cqw;height:15cqw}
.device__btn--side{right:-.8cqw;top:50cqw;height:22cqw;background:linear-gradient(270deg,#1f2124,var(--df-metal-hi) 55%,#2a2c30)}
.device__btn--camera{right:-.45cqw;top:128cqw;height:17cqw;width:.8cqw;background:linear-gradient(270deg,#15171a,#55585e 60%,#202226)}

/* Soft contact shadow on the "table" under the phone */
.device::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:12%;
  right:12%;
  bottom:-5cqw;
  height:9cqw;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--df-shadow),.30),rgba(var(--df-shadow),0));
}