/* Device frame (.db-device): landscape iPhone and iPad, because the app is landscape only.
   Holds a 2x capture (<img> from assets/screens/) or live content (e.g. a .db-reader).
   Sizes are proportional to the frame's own width (container units), so it scales cleanly.
   iPhone: dynamic island on the LEFT (the phone's top is on the left in landscape); power button on
   the top edge, volume buttons on the bottom edge. iPad: camera dot on the long top edge.
   Tilt-on-pointer and the two-device hero composition live in js/components/device.js. */
.db-device{--db-dev-bezel:1.25cqw;--db-dev-radius:7.4cqw;--db-dev-aspect:2160/1000;
  position:relative;display:block;width:100%;margin:0;container-type:inline-size;perspective:1600px}
.db-device--ipad{--db-dev-bezel:2.4cqw;--db-dev-radius:3.4cqw;--db-dev-aspect:2388/1736}
.db-device__tilt{position:relative;transform-style:preserve-3d;will-change:transform;transform:rotateX(var(--db-rx,0deg)) rotateY(var(--db-ry,0deg))}
/* the body: dark titanium edge, a lit rim, two-part shadow on the page */
.db-device__body{position:relative;padding:var(--db-dev-bezel);border-radius:var(--db-dev-radius);
  background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 22%,rgba(255,255,255,0) 50%,rgba(255,255,255,.08) 82%,rgba(255,255,255,.16)),var(--db-stage-deep);
  box-shadow:inset 0 0 0 .18cqw rgba(255,255,255,.22),inset 0 0 0 .55cqw rgba(0,0,0,.85),inset 0 0 0 .7cqw rgba(255,255,255,.06),
    0 3.2cqw 6cqw rgba(4,6,20,.55),0 .8cqw 1.8cqw rgba(4,6,20,.4)}
.db-device__screen{position:relative;aspect-ratio:var(--db-dev-aspect);overflow:hidden;isolation:isolate;
  border-radius:calc(var(--db-dev-radius) - var(--db-dev-bezel));background:rgba(0,0,0,1);
  box-shadow:0 0 0 .12cqw rgba(0,0,0,1)}
.db-device__screen > img,.db-device__screen > picture > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.db-device__screen > .db-reader{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
.db-device__screen > .db-reader:focus-visible{outline-offset:-4px}
/* glass sheen: a soft diagonal highlight that drifts a little with the tilt (transform only) */
.db-device__sheen{position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:inherit;overflow:hidden}
.db-device__sheen::before{content:"";position:absolute;inset:-30% -30%;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.1) 42%,rgba(255,255,255,.03) 50%,rgba(255,255,255,0) 58%);
  transform:translate3d(calc(var(--db-sx,0) * 6%),calc(var(--db-sy,0) * 4%),0);will-change:transform}
/* iPhone: dynamic island on the left edge (vertical pill), matching where the captures draw theirs */
.db-device__island{position:absolute;z-index:21;left:.75%;top:50%;width:3.45%;height:26%;transform:translateY(-50%);border-radius:var(--db-r-pill);
  background:rgba(0,0,0,1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.db-device__island::after{content:"";position:absolute;left:50%;top:78%;width:42%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.28),rgba(4,6,20,1) 58%)}
.db-device[data-island="off"] .db-device__island{display:none}
/* iPad: the camera on the long top edge, inside the bezel */
.db-device__cam{position:absolute;z-index:3;left:50%;top:calc(var(--db-dev-bezel) / 2);width:.7cqw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.3),rgba(4,6,20,1) 62%)}
/* hardware buttons, barely proud of the frame */
.db-device__btn{position:absolute;z-index:-1;border-radius:var(--db-r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06)),var(--db-stage-deep);box-shadow:0 0 0 .1cqw rgba(0,0,0,.6)}
.db-device--iphone .db-device__btn--power{top:-.45cqw;left:24%;width:9%;height:.9cqw}
.db-device--iphone .db-device__btn--vol1{bottom:-.45cqw;left:20%;width:6%;height:.9cqw}
.db-device--iphone .db-device__btn--vol2{bottom:-.45cqw;left:28%;width:6%;height:.9cqw}
.db-device--ipad .db-device__btn--power{top:-.4cqw;right:7%;width:5%;height:.7cqw}
.db-device--ipad .db-device__btn--vol1{right:-.4cqw;top:10%;width:.7cqw;height:6%}
.db-device--ipad .db-device__btn--vol2{right:-.4cqw;top:18%;width:.7cqw;height:6%}

/* two devices for the hero: the iPad behind, the iPhone in front, overlapping */
.db-device-duo{position:relative;display:block;width:100%;aspect-ratio:100/70;perspective:1800px;container-type:inline-size}
.db-device-duo__stage{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;transform:rotateX(var(--db-rx,0deg)) rotateY(var(--db-ry,0deg))}
.db-device-duo .db-device{position:absolute;perspective:none}
.db-device-duo .db-device--ipad{top:0;right:0;width:78%;transform:translateZ(-40px)}
.db-device-duo .db-device--iphone{left:0;bottom:2%;width:60%;transform:translateZ(40px)}
.db-device-duo .db-device .db-device__tilt{transform:none}

@media (prefers-reduced-motion:reduce){
  .db-device__tilt,.db-device-duo__stage{transform:none}
  .db-device__sheen::before{transform:none}
}