/* ============================================================
   HELIOCASTLE — DEVICES
   A laptop and a phone, built in CSS so a real screenshot can be
   dropped into each one. Used small in the showcase, sitting behind
   the list and the button. Sizes come from the container, so a stack
   scales by setting its width.
   ============================================================ */

.device-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* the warm light the screens throw into the room */
.device-glow {
  position: absolute;
  inset: 4% -6% -14% -6%;
  background:
    radial-gradient(46% 40% at 50% 46%, rgb(var(--accent-rgb) / 0.22), transparent 72%),
    radial-gradient(70% 60% at 50% 54%, rgb(var(--emit-rgb) / calc(0.07 * var(--emit-a))), transparent 76%);
  filter: blur(6px);
  animation: device-breathe 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes device-breathe {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* --- the laptop --- */
.laptop {
  position: absolute;
  left: 2%;
  top: 8%;
  width: 78%;
}
.laptop-screen {
  position: relative;
  border: 1px solid rgb(var(--ink-rgb) / 0.16);
  border-radius: 10px 10px 3px 3px;
  background: #0b0b0d;
  padding: 7px 7px 8px;
  box-shadow:
    0 26px 60px rgb(var(--shadow-rgb) / calc(0.6 * var(--shadow-a))),
    0 0 44px rgb(var(--accent-rgb) / 0.10),
    inset 0 0 0 1px rgb(var(--ink-rgb) / 0.05);
}
.laptop-screen img {
  width: 100%;
  /* the screenshots are ~2.1:1 — a 16/10 frame would crop the site's
     own logo off the left edge, so the screen runs wider */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* crop from the left: the site's own logo and headline live there,
     the decorative half of a screenshot is on the right */
  object-position: top left;
  border-radius: 4px;
  display: block;
}
/* the sheen across the glass */
.laptop-screen::after {
  content: "";
  position: absolute;
  inset: 7px 7px 8px;
  border-radius: 4px;
  background: linear-gradient(112deg, rgb(var(--ink-rgb) / 0.10) 0 22%, transparent 46%);
  pointer-events: none;
}
.laptop-base {
  position: relative;
  height: 11px;
  margin: 0 -7%;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #24242a, #101015 62%, #07070a);
  box-shadow: 0 16px 30px rgb(var(--shadow-rgb) / calc(0.55 * var(--shadow-a)));
}
.laptop-base::after {                 /* the notch on the lip */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 13%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 0 0 5px 5px;
  background: rgb(var(--ink-rgb) / 0.12);
}

/* --- the phone --- */
.phone {
  position: absolute;
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
  border-radius: 16px;
  background: #0b0b0d;
  padding: 5px;
  box-shadow:
    0 20px 44px rgb(var(--shadow-rgb) / calc(0.65 * var(--shadow-a))),
    0 0 30px rgb(var(--accent-rgb) / 0.10);
}
.phone img {
  width: 100%;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  /* a desktop screenshot cropped to a phone: take the left edge, where
     the headline and buttons of the real site are */
  object-position: top left;
  border-radius: 12px;
  display: block;
}
.phone::after {                       /* speaker slot */
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  width: 26%;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgb(var(--ink-rgb) / 0.22);
}
.phone--a { width: 21%; right: 12%; bottom: 4%; z-index: 3; }
.phone--b { width: 18%; right: 0;   bottom: 17%; z-index: 2; opacity: 0.94; }

/* --- what the devices stand on --- */
.device-floor {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -4%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
              rgb(var(--emit-rgb) / calc(0.16 * var(--emit-a))), transparent 72%);
  filter: blur(8px);
  pointer-events: none;
}

/* --- the small composite used in the showcase --- */
.device-stack--mini { aspect-ratio: 16 / 9; }
.device-stack--mini .laptop { left: 0; top: 12%; width: 72%; }
.device-stack--mini .laptop-screen { border-radius: 7px 7px 2px 2px; padding: 5px 5px 6px; }
.device-stack--mini .laptop-screen::after { inset: 5px 5px 6px; }
.device-stack--mini .laptop-base { height: 8px; }
.device-stack--mini .phone--a { width: 26%; right: 6%; bottom: 2%; }
.device-stack--mini .phone--b { display: none; }