/* Soundwalk's screenshots on iPhones (mockups, the user 2026-10-30: "put an iphone around the images ... at a three
   quarters angle to give it some materiality"; the user picked front, 2026-10-30). js/phone-mockups.js sets the class
   (?phones=flat|row|front for the others):
     flat   each screenshot in a phone, face on
     row    both phones turned three quarters, one a little behind the other
     front  one phone turned three quarters in front; the other flat behind it
   The phone is drawn here, not an image: a dark body with a thin rim, the island, and its side (its thickness) as a
   face turned back from the edge, so it shows when the phone is turned. Sizes in --u, a hundredth of the phone's width (--w).
   On phones every layout is flat, scrolling sideways as before. */

.phones .sw-shots { justify-content: center; gap: 34px; padding: 24px 0 44px; }
.phones .sw-shot {
  --w: 250px; --u: calc(var(--w) / 100);
  --side: calc(10 * var(--u));   /* the phone's thickness */
  position: relative;
  flex: none; width: var(--w);
  aspect-ratio: auto;
  padding: calc(3.6 * var(--u));   /* the bezel */
  border-radius: calc(15 * var(--u));
  background: linear-gradient(150deg, #44484f 0%, #1a1c20 22%, #0d0e11 60%, #23262b 100%);
  box-shadow:
    inset 0 0 0 calc(0.6 * var(--u)) #5a5e66,   /* the rim */
    inset 0 0 0 calc(1.4 * var(--u)) #0b0c0e,
    0 40px 70px -30px rgba(0, 0, 0, 0.85);
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.phones .sw-shot img { height: auto; aspect-ratio: 780 / 1691; border: 0; border-radius: calc(11.5 * var(--u)); }
/* the island */
.phones .sw-shot::after {
  content: ''; position: absolute; z-index: 1;
  top: calc(6.2 * var(--u)); left: 50%; width: calc(29 * var(--u)); height: calc(8.4 * var(--u)); translate: -50% 0;
  border-radius: calc(5 * var(--u)); background: #000;
  transform: translateZ(0.5px);
}
/* the side: from one long edge, turned back 90° (shown on the side the phone turns toward the viewer) */
.phones .sw-shot:is(.side-l, .side-r)::before {
  content: ''; position: absolute; top: calc(12 * var(--u)); bottom: calc(12 * var(--u)); width: var(--side);
  background: linear-gradient(to right, #121316, #3d4148 45%, #5d626a 55%, #16171a);
}
.phones .sw-shot.side-l::before { left: 0; transform-origin: left; transform: rotateY(90deg); }
.phones .sw-shot.side-r::before { right: 0; transform-origin: right; transform: rotateY(-90deg); }

/* row: both turned to the right, the second a little lower and in front */
.phones--row .sw-shots { perspective: 1700px; gap: 0; }
.phones--row .sw-shot { transform: rotateY(30deg) rotateX(5deg); }
.phones--row .sw-shot + .sw-shot { margin-left: -4%; translate: 0 7%; }

/* front: the first flat behind, a little smaller; the second turned and over it */
.phones--front .sw-shots { perspective: 1500px; gap: 0; }
.phones--front .sw-shot:first-child { transform: scale(0.88); transform-origin: 50% 40%; filter: brightness(0.82); }
.phones--front .sw-shot + .sw-shot { z-index: 1; margin-left: -12%; translate: 0 6%; transform: rotateY(-28deg) rotateX(4deg); }

/* a hovered phone turns to face you */
.phones--row .sw-shot:hover, .phones--front .sw-shot + .sw-shot:hover { transform: none; }

@media (max-width: 640px) {
  .phones .sw-shots { justify-content: flex-start; padding-top: 12px; padding-bottom: 24px; }
  .phones .sw-shot { --w: min(62vw, 280px); }
  .phones .sw-shot, .phones--row .sw-shot, .phones--front .sw-shot + .sw-shot, .phones--front .sw-shot:first-child {
    transform: none; translate: none; margin-left: 0; filter: none;
  }
  .phones--row .sw-shots, .phones--front .sw-shots { gap: 16px; }
  .phones .sw-shot:is(.side-l, .side-r)::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .phones .sw-shot { transition: none; } }