/* ==========================================================================
   PostureCo device kit: pure-CSS iPad Pro, iPhone and MacBook frames.
   - Every frame scales fluidly with its OWN width (container units inside).
   - Give the frame a width: it is `width:100%` of its parent by default; size
     it with `width`/`max-width` on the frame or a wrapper. (Container
     elements have no intrinsic width, so never leave them as shrink-to-fit
     flex/grid items without a width.)
   - Put <img>/<video>/<canvas>/<picture> inside `.screen`. Several children =
     a stack; the one with `.is-active` shows and crossfades in on top.
   - Finishes: default silver; `.device--black` = space black.
   ========================================================================== */

.device {
  --dev-ease: cubic-bezier(.65, 0, .35, 1);
  --swap-dur: .7s;
  /* aluminum edge (silver) */
  --edge: linear-gradient(145deg, #fbfbfc 0%, #c3c5c9 14%, #eceef0 34%, #9c9ea3 58%, #dcdde0 80%, #aeb0b4 100%);
  --edge-line: rgba(0, 0, 0, .28);
  --glass: #060607;
  --glass-line: rgba(255, 255, 255, .07);
  --cam: #1b2230;
  --shadow:
    0 1px 2px rgba(10, 20, 40, .10),
    0 14px 28px -10px rgba(10, 20, 40, .22),
    0 48px 90px -28px rgba(10, 20, 40, .38);
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.device *, .device *::before, .device *::after { box-sizing: border-box; }

.device--black {
  --edge: linear-gradient(145deg, #6a6c71 0%, #2a2b2e 16%, #4b4d51 36%, #18191b 60%, #3c3d41 82%, #26272a 100%);
  --edge-line: rgba(255, 255, 255, .10);
}
/* On dark pages: shadows disappear, so add a faint rim light instead. */
.device--on-dark {
  --shadow:
    0 0 0 1px rgba(255, 255, 255, .06),
    0 30px 80px -20px rgba(0, 0, 0, .9),
    0 0 120px -30px rgba(38, 188, 215, .25);
}
.device--flat { --shadow: none; }

/* The 3D stage: put this on a wrapper when tilting a device. */
.device-stage { perspective: 1800px; perspective-origin: 50% 30%; }

/* ---------- Screen slot (shared) ---------------------------------------- */
.device .screen {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  background: #000;
  container-type: inline-size;   /* overlays inside can size with cqw */
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari radius clip under transforms */
}
.device .screen > :is(img, video, canvas, picture, iframe) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  object-position: 50% 0;
}
.device .screen > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* Stacked screens: the .is-active child fades in ON TOP; the outgoing one stays
   opaque underneath until the fade completes (no grey dip mid-crossfade). */
.device .screen > :is(img, video, canvas, picture) {
  z-index: 1;
  transition: opacity 0s linear var(--swap-dur), transform 0s linear var(--swap-dur);
}
.device .screen > .is-active {
  z-index: 2;
  opacity: 1;
  transform: none;
  transition: opacity var(--swap-dur) var(--dev-ease), transform calc(var(--swap-dur) * 1.6) cubic-bezier(.2, .7, .2, 1);
}
.device .screen:has(> .is-active) > :is(img, video, canvas, picture):not(.is-active),
.device .screen--stack > :is(img, video, canvas, picture):not(.is-active) {
  opacity: 0;
  transform: scale(1.04);
}
/* Optional overlay layer for UI chips, labels, scan lines. */
.device .screen__ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* ---------- iPad Pro (portrait 3:4 screen, 1200x1600 screenshots) ---------
   Geometry in % of device width:  edge .45 | glass bezel 3.45 | total 3.9
   outer radius 6 | screen radius 2.1 (concentric).  Height = 130.73% of width. */
.ipad {
  --bez: 3.9cqw;
  border-radius: 6% / 4.59%;
  background: var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-line), var(--shadow);
}
.ipad::before {                       /* black glass + front camera */
  content: "";
  position: absolute;
  inset: .45cqw;
  border-radius: 5.55cqw;
  background:
    radial-gradient(circle at calc(100% - 1.72cqw) 50%, #3b4a63 0 .12cqw, var(--cam) .13cqw .42cqw, transparent .5cqw),
    var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  z-index: 0;
}
.ipad::after {                        /* glass glare, follows --glare (0..1) */
  content: "";
  position: absolute;
  inset: .45cqw;
  border-radius: 5.55cqw;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0) calc(var(--glare, .35) * 100% - 30%),
    rgba(255, 255, 255, .09) calc(var(--glare, .35) * 100% - 4%),
    rgba(255, 255, 255, .02) calc(var(--glare, .35) * 100% + 10%),
    rgba(255, 255, 255, 0) calc(var(--glare, .35) * 100% + 24%));
}
.ipad > .screen {
  margin: var(--bez);
  aspect-ratio: 3 / 4;
  border-radius: 2.1cqw;
}
/* Landscape: 4:3 screen, camera on the top (landscape) edge. Height = 76.95%. */
.ipad--landscape { border-radius: 6% / 7.8%; }
.ipad--landscape::before {
  background:
    radial-gradient(circle at 50% 1.72cqw, #3b4a63 0 .12cqw, var(--cam) .13cqw .42cqw, transparent .5cqw),
    var(--glass);
}
.ipad--landscape > .screen { aspect-ratio: 4 / 3; }

/* ---------- iPhone (Pro, Dynamic Island, 9:19.5 screen) ------------------
   edge 1.1 | black bezel 2.3 | total 3.4; outer radius 16; screen radius 12.6
   Height = 208.7% of width. */
.iphone {
  --bez: 3.4cqw;
  border-radius: 16% / 7.67%;
  background: var(--edge);
  box-shadow: inset 0 0 0 1px var(--edge-line), var(--shadow);
}
.iphone::before {
  content: "";
  position: absolute;
  inset: 1.1cqw;
  border-radius: 14.9cqw;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  z-index: 0;
}
.iphone::after {                      /* Dynamic Island */
  content: "";
  position: absolute;
  z-index: 4;
  top: calc(var(--bez) + 3.1cqw);
  left: 50%;
  width: 28.5cqw;
  height: 8.4cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background:
    radial-gradient(circle at calc(100% - 4.2cqw) 50%, #24324a 0 .9cqw, #0d1118 1cqw 1.6cqw, transparent 1.7cqw),
    #000;
}
.iphone > .screen {
  margin: var(--bez);
  aspect-ratio: 9 / 19.5;
  border-radius: 12.6cqw;
}

/* ---------- MacBook (16:10 display + base) ------------------------------- */
.macbook { --lid: 88cqw; padding-bottom: .1px; }
.macbook > .screen {
  width: var(--lid);
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  border: solid #0b0b0c;
  border-width: 1.55cqw 1.55cqw 2.4cqw;
  border-radius: 2.6cqw 2.6cqw .5cqw .5cqw;
  box-shadow:
    0 0 0 .22cqw #2b2c2f,
    0 0 0 .42cqw #b9bbbf,
    0 30px 60px -30px rgba(10, 20, 40, .45);
  -webkit-mask-image: none;
}
.macbook > .screen::after {           /* camera notch */
  content: "";
  position: absolute;
  z-index: 6;
  top: -1px;
  left: 50%;
  width: 11%;
  height: 3.2%;
  transform: translateX(-50%);
  background: #0b0b0c;
  border-radius: 0 0 .9cqw .9cqw;
}
.macbook::after {                     /* base / deck */
  content: "";
  display: block;
  height: 2.1cqw;
  margin-top: -.1cqw;
  border-radius: .3cqw .3cqw 46% 46% / .3cqw .3cqw 100% 100%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.0) 6%, rgba(255,255,255,0) 94%, rgba(0,0,0,.18)),
    linear-gradient(180deg, #e6e7e9 0%, #cfd1d4 35%, #a4a6ab 80%, #7d7f84 100%);
  box-shadow: 0 1.2cqw 2.4cqw -0.8cqw rgba(10, 20, 40, .45);
}
.macbook::before {                    /* thumb notch on the deck lip */
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 1.25cqw;
  left: 50%;
  width: 14cqw;
  height: .7cqw;
  transform: translateX(-50%);
  border-radius: 0 0 1cqw 1cqw;
  background: linear-gradient(180deg, #9a9ca1, #c4c6ca);
}
.macbook.device--black > .screen { box-shadow: 0 0 0 .22cqw #111, 0 0 0 .42cqw #3a3b3f, 0 30px 60px -30px rgba(0,0,0,.6); }
.macbook.device--black::after { background: linear-gradient(180deg, #4a4b4f 0%, #2c2d30 45%, #161719 100%); }
.macbook.device--black::before { background: linear-gradient(180deg, #111, #2c2d30); }

@media (prefers-reduced-motion: reduce) {
  .device { --swap-dur: .25s; }
  .device .screen > * { transform: none !important; }
}