/* 3D devices (device.js): real app screens on a phone/tablet with thickness.
   Used by the Revisionary page and the homepage Revisionary card. Needs --ease from the page. */
.dev-stage { position: relative; display: grid; place-items: center; perspective: 1600px; }
.dev-stage::after {
  content: ""; position: absolute; left: 50%; bottom: -4%; width: 60%; height: 40px; z-index: -1; border-radius: 50%;
  transform: translateX(-50%) scale(var(--sh, 1)); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); filter: blur(12px);
}
.dev { --t: 16px; --r: 44px; --bz: 10px; position: relative; transform-style: preserve-3d; will-change: transform; }
.dev.phone3d { width: var(--w, 290px); --sar: 616 / 1372; }
.dev.tablet3d { width: 100%; --sar: 1542 / 976; --r: 24px; --bz: 11px; --t: 10px; }
.dev-layer {
  position: absolute; inset: 0; border-radius: var(--r); transform: translateZ(calc(var(--z) * var(--t) * -1));
  background: linear-gradient(100deg, #6a6e75, #24272b 18%, #0e0f11 50%, #2a2d32 82%, #74787f);
}
.dev-front {
  position: relative; border-radius: var(--r); padding: var(--bz); background: #060708; transform: translateZ(0.5px); backface-visibility: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18), inset 0 0 0 4px #1a1c20;
}
.dev-back {
  position: absolute; inset: 0; border-radius: var(--r); display: grid; place-items: center; backface-visibility: hidden;
  transform: translateZ(calc(var(--t) * -1 - 0.5px)) rotateY(180deg);
  background: radial-gradient(120% 80% at 30% 15%, #4a3342, #16131a 62%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
}
.dev-back img { width: 24%; border-radius: 22%; opacity: 0.9; }
.phone3d .dev-back::before {
  content: ""; position: absolute; top: 4%; left: 8%; width: 36%; aspect-ratio: 1.7; border-radius: 22px;
  background: #0b0b0d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.dev-screen { position: relative; overflow: hidden; aspect-ratio: var(--sar); border-radius: calc(var(--r) - var(--bz)); background: #000; }
.dev-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity 1.1s ease, transform 1.4s var(--ease);
}
.dev-screen img.on { opacity: 1; transform: none; }
.dev-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.14) 46%, transparent 60%) var(--gx, 50%) 0 / 280% 100% no-repeat;
}

@media (max-width: 560px) {
  .dev { --r: 36px; }
  .dev.tablet3d { --r: 16px; --bz: 7px; }
}