/* Atlas v2 · the device kit (V2.md §2.8: "they should look like actual devices, not just rectangles"; Yusef
   2026-10-26: "more hyper realistic… hover independently… a glowing background that powers up"). A phone and a laptop
   drawn as real hardware in CSS (so the screens stay live and sharp at every size): a titanium phone with its chamfer,
   keys, black glass and island; a laptop with its aluminium surround, camera, hinge and deck. Each floats on its own
   cycle over a ground shadow, with a glow behind it that powers up with its part of the page. Each holds a screen at its true size (.vp), scaled to fit by devices.js. */
.devices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.35fr) minmax(0, 1fr); align-items: end; gap: clamp(14px, 2.6vw, 44px); width: 100%; }
.dev { position: relative; }

/* the float: an inner layer bobbing on its own cycle (set per device in devices.js), its ground shadow tightening and
   darkening as it sinks back toward it */
.dev .float { position: relative; z-index: 1; animation: dev-float var(--fl-dur, 6s) var(--fl-delay, 0s) ease-in-out infinite; }
@keyframes dev-float { 0%, 100% { translate: 0 0; rotate: calc(var(--fl-tilt, .3deg) * -1); } 50% { translate: 0 calc(var(--fl-amp, 8px) * -1); rotate: var(--fl-tilt, .3deg); } }
.dev .ground { position: absolute; left: 8%; right: 8%; bottom: -5%; height: 7%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); animation: dev-ground var(--fl-dur, 6s) var(--fl-delay, 0s) ease-in-out infinite; }
@keyframes dev-ground { 0%, 100% { scale: 1; opacity: .95; } 50% { scale: .82; opacity: .6; } }

/* the glow behind each device: dim while powered down; when the spine powers its part on, it flares and settles into
   a slow breath */
.dev .aura { position: absolute; inset: -20% -40%; z-index: 0; pointer-events: none; border-radius: 50%; opacity: .14;
  background: radial-gradient(closest-side, rgba(170,230,255,.85), rgba(90,180,255,.42) 38%, rgba(80,160,255,.12) 68%, rgba(80,160,255,0)); transition: opacity .6s; }
.laptop-dev .aura { inset: -24% -14% -10%; }
[data-feed].on .dev .aura, .dev[data-feed].on .aura { animation: aura-on 1.5s cubic-bezier(.2,.7,.2,1) forwards, aura-breathe 4.6s 1.5s ease-in-out infinite; }
@keyframes aura-on { 0% { opacity: .14; filter: brightness(1); } 30% { opacity: 1; filter: brightness(1.9); } 100% { opacity: .8; filter: brightness(1); } }
@keyframes aura-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .dev .float, .dev .ground { animation: none; } [data-feed].on .dev .aura, .dev[data-feed].on .aura { animation: none; opacity: .9; } }

/* the phone: a titanium band with a polished chamfer, four keys, then the black glass with the screen and island */
.phone-dev { aspect-ratio: 390 / 844; width: 100%; max-width: 300px; justify-self: center; }
.phone-dev .float { position: absolute; inset: 0; }
.phone-dev .frame { position: absolute; inset: 0; padding: 1.3%; border-radius: 15% / 7%;
  background: linear-gradient(135deg, #9aa3ad 0%, #4a535e 6%, #1b2128 22%, #2b333c 48%, #151a20 70%, #3f4853 90%, #a4adb7 100%);
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.55), inset 0 1.5px 1px rgba(255,255,255,.35), inset 0 -1.5px 1px rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.5), 0 34px 60px -10px rgba(0,0,0,.75); }
/* the polished chamfer catching the light along the upper left edge */
.phone-dev .frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 9%, rgba(255,255,255,0) 88%, rgba(255,255,255,.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1.3%; }
.phone-dev .key { position: absolute; width: 1.3%; border-radius: 1px; background: linear-gradient(90deg, #2b333c, #8d96a1 55%, #3a434d); }
.phone-dev .k1 { left: -1.1%; top: 17%; height: 4%; } .phone-dev .k2 { left: -1.1%; top: 24%; height: 7.5%; } .phone-dev .k3 { left: -1.1%; top: 33%; height: 7.5%; }
.phone-dev .k4 { right: -1.1%; top: 27%; height: 11.5%; background: linear-gradient(90deg, #3a434d, #8d96a1 45%, #2b333c); }
.phone-dev .glass { position: relative; width: 100%; height: 100%; padding: 2.4%; border-radius: 13.6% / 6.3%; background: #020304;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08); }
.phone-dev .screen { position: relative; width: 100%; height: 100%; border-radius: 11.8% / 5.5%; overflow: hidden; background: #000; }
.phone-dev .island { position: absolute; top: 3.4%; left: 50%; width: 30%; height: 3.6%; margin-left: -15%; border-radius: 99px; background: #000; z-index: 7;
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.06); }
.phone-dev .island::after { content: ""; position: absolute; right: 12%; top: 22%; height: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2c3e5a, #0a0f18 60%); }

/* the laptop: a black glass display in a thin aluminium surround, the hinge, and the deck seen edge-on with its lip
   and finger notch */
.laptop-dev { width: 100%; justify-self: center; }
.laptop-dev .lid { position: relative; margin: 0 6.5%; padding: 2% 2% 3.2%; border-radius: 2.6% 2.6% 0 0 / 4% 4% 0 0; background: #050709;
  box-shadow: 0 0 0 1.5px #5f6874, 0 0 0 2.5px #262d35, inset 0 0 0 1px rgba(255,255,255,.07), 0 -1px 0 2px rgba(255,255,255,.1), 0 40px 70px -14px rgba(0,0,0,.7); }
.laptop-dev .lid::after { content: ""; position: absolute; top: .8%; left: 50%; width: .8%; aspect-ratio: 1; margin-left: -.4%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #34465f, #0a0f18 65%); }
/* the hinge: a dark band at the foot of the display */
.laptop-dev .lid::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4%; border-radius: 0 0 2px 2px; background: linear-gradient(180deg, #11151a, #2a3139 60%, #0d1014); }
.laptop-dev .screen { position: relative; width: 100%; aspect-ratio: 1280 / 800; overflow: hidden; background: #000; border-radius: 3px; }
.laptop-dev .base { position: relative; height: 0; padding-bottom: 3.4%; border-radius: 0 0 16% 16% / 0 0 100% 100%;
  background: linear-gradient(180deg, #c3cad2 0%, #8e97a2 14%, #5c6672 40%, #343c46 78%, #1d232a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 1px rgba(0,0,0,.6), 0 22px 40px -6px rgba(0,0,0,.7); }
.laptop-dev .base::before { content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: 46%; margin-left: -7%; border-radius: 0 0 10px 10px / 0 0 6px 6px;
  background: linear-gradient(180deg, #59636e, #8e97a2); box-shadow: inset 0 -1px 1px rgba(0,0,0,.35); }
/* the lip: the deck's front edge catching the light */
.laptop-dev .lip { position: absolute; left: 1.5%; right: 1.5%; bottom: 18%; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35) 20%, rgba(255,255,255,.35) 80%, rgba(255,255,255,0)); }

/* the screen's content, at true size, scaled to fit */
.vp { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; }
/* glass: a soft glare over every screen */
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; background-size: 220% 220%;
  background-image: linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 18%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 58%, rgba(255,255,255,.05) 64%, rgba(255,255,255,0) 72%, rgba(255,255,255,.02) 100%);
  animation: glare-drift var(--fl-dur, 6s) var(--fl-delay, 0s) ease-in-out infinite; }
@keyframes glare-drift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 18% 12%; } }
@media (prefers-reduced-motion: reduce) { .screen::after { animation: none; } }