/* ════════════════════════════════════════════════════════════════════════
   landing-gallery.css — several screenshots in one frame (store/index.html)

   The screens slide INSIDE the same phone frame, as if someone
   were using it: swipe with a finger (native horizontal scroll with snap),
   or the ‹ › arrows and the dots below. While sliding, each screen tilts and
   recedes a little according to its distance from the centre (set by the
   page script as --d, from -1 to 1): a light 3D deck. A slot with a single
   screen shows none of this. Under prefers-reduced-motion the screens just
   slide, flat.
   ════════════════════════════════════════════════════════════════════════ */

.gallery { margin: 0; }
.gallery .screen { perspective: 900px; }

.track {
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.track::-webkit-scrollbar { display: none; }

.slide {
  position: relative; flex: 0 0 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  --d: 0;
  transform:
    rotateY(calc(var(--d) * -22deg))
    scale(calc(1 - (var(--d) * var(--d)) * .12));
  opacity: calc(1 - (var(--d) * var(--d)) * .45);
  transform-origin: calc(50% - var(--d) * 50%) 50%;
  will-change: transform, opacity;
}
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Caption of the current screen, under the frame. */
.g-caption { text-align: center; margin-top: 14px; min-height: 1.6em; font-size: 15px; color: var(--muted); }
.g-caption span { display: none; }
.g-caption span.on { display: inline; animation: g-fade .35s ease; }
@keyframes g-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Arrows and dots. */
.g-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.g-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--gold-line); background: var(--surface); color: var(--gold);
  cursor: pointer; transition: background .2s ease, opacity .2s ease;
}
.g-arrow:hover { background: var(--gold-soft); }
.g-arrow:disabled { opacity: .35; cursor: default; }
.g-arrow svg { width: 18px; height: 18px; }
.g-dots { display: flex; gap: 2px; }
.g-dot {
  width: 28px; height: 44px; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.g-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--border);
  box-shadow: inset 0 0 0 1px var(--gold-line);
  transition: width .3s var(--ease), background .3s ease;
}
.g-dot[aria-current="true"]::before { width: 22px; background: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .track { scroll-behavior: auto; }
  .slide { transform: none; opacity: 1; }
  .g-caption span.on { animation: none; }
}