/* shots.css, real app screenshots in clay device frames (shared, reusable).
   A .device wraps a .device-screen that clips the screenshot. Phone frames get
   a soft bezel, a Dynamic Island, and the same puffy clay shadow as the cards.
   Used on the home showcase and the Companion page. */

.showcase {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap; margin-top: 2.4rem;
}

/* A framed device. */
.device { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.device figcaption {
  font: 600 .9rem var(--round); color: var(--text-2); text-align: center;
}

/* Phone: a rounded clay slab holding the screen. */
.device-phone .device-screen {
  position: relative; width: clamp(200px, 62vw, 268px); aspect-ratio: 720 / 1565;
  background: #0b0b10; border-radius: 40px;
  padding: 8px;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent),
    var(--clay-shadow);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.device-phone .device-screen img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 32px;
}
/* No fake Dynamic Island: the screenshots already include the real one. */

/* The centre device sits taller and forward; the siblings tilt back a touch. */
.showcase .tilt-l .device-screen { transform: rotate(-4deg) translateY(14px); }
.showcase .tilt-r .device-screen { transform: rotate(4deg)  translateY(14px); }
.showcase .feature .device-screen {
  width: clamp(220px, 66vw, 300px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--text) 16%, transparent),
    0 26px 60px rgba(60, 70, 130, 0.28);
}
[data-theme="dark"] .showcase .feature .device-screen {
  box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 26px 60px rgba(0,0,0,.6);
}
.showcase .device:hover .device-screen { transform: translateY(-6px) rotate(0deg); }

/* A single hero phone (used on the Companion page intro). */
.device.solo .device-screen { width: clamp(230px, 70vw, 300px); }

/* Stack on narrow screens: feature first, tilts flat. */
@media (max-width: 720px) {
  .showcase { gap: 1.6rem; }
  .showcase .tilt-l .device-screen,
  .showcase .tilt-r .device-screen { transform: rotate(0deg) translateY(0); }
  .showcase .feature { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .device-phone .device-screen { transition: none; }
}