/* Device frames, drawn in CSS so they stay crisp at any size. Width is set by the caller; height follows the aspect ratio. */
.dev { position: relative; margin: 0; display: block; }
.dev-body { position: relative; width: 100%; isolation: isolate; }
.dev-screen { position: absolute; overflow: hidden; background: #000; }
.dev-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.03) 28%, transparent 42%); }
.dev-sensor { position: absolute; z-index: 2; background: #000; }
.dev-tag { position: absolute; left: 50%; top: calc(100% + 0.7rem); transform: translateX(-50%); white-space: nowrap; font: 600 0.62rem/1 'Inter', system-ui, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #ffd479; background: rgb(0 0 0 / 0.55); border: 1px solid rgb(255 212 121 / 0.35); padding: 0.4rem 0.6rem; border-radius: 999px; }
.screens { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: translateY(3%) scale(1.02); transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.screen.on { opacity: 1; transform: none; }
.dev-screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* iPhone: titanium rim, black bezel, Dynamic Island, side buttons */
.dev-iphone .dev-body { aspect-ratio: 0.478; border-radius: 15% / 7%; background: linear-gradient(145deg, #2c2d31, #0c0c0e 45%, #1c1d21); box-shadow: 0 0 0 1.5px #9a9ea6, 0 0 0 3px #3a3b40, 0 40px 80px -30px rgb(0 0 0 / 0.9), 0 18px 36px -18px rgb(0 0 0 / 0.8); }
.dev-iphone .dev-screen { inset: 2.6% 3.4%; border-radius: 12.5% / 5.8%; }
.dev-iphone .dev-sensor { left: 50%; top: 3.9%; width: 31%; height: 3.1%; transform: translateX(-50%); border-radius: 999px; }
.dev-iphone::before, .dev-iphone::after { content: ''; position: absolute; z-index: -1; width: 1.6%; border-radius: 2px; background: linear-gradient(90deg, #6d7077, #b9bcc3); }
.dev-iphone::before { left: -1.2%; top: 18%; height: 7%; box-shadow: 0 1.4em 0 0 #8d9097; }
.dev-iphone::after { right: -1.2%; top: 26%; height: 11%; }

/* Pixel: flatter rails, centred punch-hole camera */
.dev-pixel .dev-body { aspect-ratio: 0.468; border-radius: 10% / 4.8%; background: linear-gradient(150deg, #3b3d42, #121314 40%, #26272b); box-shadow: 0 0 0 2px #55575d, 0 40px 80px -30px rgb(0 0 0 / 0.9); }
.dev-pixel .dev-screen { inset: 2.4% 3%; border-radius: 8% / 3.8%; }
.dev-pixel .dev-sensor { left: 50%; top: 3.4%; width: 4.5%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; box-shadow: 0 0 0 2px #15161a; }
.dev-pixel::after { content: ''; position: absolute; z-index: -1; right: -1.4%; top: 22%; width: 1.8%; height: 16%; border-radius: 2px; background: #6a6c72; }

/* iPad: even bezels, rounded */
.dev-ipad .dev-body { aspect-ratio: 0.76; border-radius: 5.6% / 4.2%; background: linear-gradient(145deg, #2a2b2f, #0d0d0f 50%, #202125); box-shadow: 0 0 0 1.5px #8f939b, 0 50px 90px -34px rgb(0 0 0 / 0.9); }
.dev-ipad .dev-screen { inset: 3.3% 4.3%; border-radius: 2.6% / 2%; }
.dev-ipad .dev-sensor { left: 50%; top: 1.4%; width: 1.4%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: #1d1e22; }

/* Laptop: lid with notch, aluminium deck */
.dev-laptop .dev-body { aspect-ratio: 1.56; border-radius: 3.4% 3.4% 0.6% 0.6% / 5.2% 5.2% 1% 1%; background: linear-gradient(#1a1b1e, #0b0b0c); box-shadow: 0 0 0 1.5px #74777e, 0 50px 90px -40px rgb(0 0 0 / 0.95); }
.dev-laptop .dev-screen { inset: 3.2% 2.2% 4.6%; border-radius: 0.8% / 1.2%; }
.dev-laptop .dev-sensor { left: 50%; top: 0; width: 13%; height: 3.4%; transform: translateX(-50%); border-radius: 0 0 0.6em 0.6em; }
.dev-base { position: absolute; z-index: 3; left: -8.5%; right: -8.5%; top: 100%; aspect-ratio: 28; border-radius: 0 0 40% 40% / 0 0 100% 100%; background: linear-gradient(#d9dbe0, #9b9ea5 55%, #6b6e74); box-shadow: 0 30px 40px -20px rgb(0 0 0 / 0.9); }
.dev-base::after { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 45%; transform: translateX(-50%); border-radius: 0 0 0.5em 0.5em; background: linear-gradient(#a6a9b0, #c7c9ce); }

/* Watches: an SVG body (drawn in app/ui/devices.tsx) with the live screen laid over the display.
   The 200 x 400 drawing maps to percentages here; width includes the band. */
.dev-watch, .dev-wear { aspect-ratio: 0.5; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.65)); }
.dev-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dev-watch { filter: drop-shadow(0 16px 22px rgb(0 0 0 / 0.55)); }
/* display: x40 y130.75 w120 h146.5, radius 31 (in the 200 x 400 drawing) */
.dev-watch .dev-screen { left: 20%; top: 32.69%; width: 60%; height: 36.625%; border-radius: 25.8% / 21.2%; background: #000; }
.dev-watch .dev-screen img, .dev-watch .dev-screen video { object-fit: cover; object-position: center; }
/* a curved-glass glare across the face */
.watch-glare { position: absolute; z-index: 3; left: 16%; top: 30.5%; width: 68%; height: 41%; border-radius: 29.4% / 24.4%; pointer-events: none; background: linear-gradient(135deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.03) 30%, transparent 46%); }
.dev-wear .dev-screen { left: 17%; top: 33.5%; width: 66%; height: 33%; border-radius: 50%; }
.dev-wear .dev-screen::after { background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.12), transparent 45%); }