/* ==========================================================================
   Reel — a true perspective ring of cards
   Ported from the mechanic on vision.html and restyled for this palette.

   The cards are not rotated into a fan; they are placed on a cylinder whose
   axis passes through the camera, so each one stays tangent to that cylinder:

       translate3d(R·sinφ, 0, R(1−cosφ)) rotateY(−φ)

   inside a fixed `perspective` equal to R. Because the camera sits at the
   ring's centre, every card faces it square on — vertical sides, with only
   the top and bottom edges slanting. That slant is perspective, not
   rotation, which is what makes the arc read as real depth.

   Geometry is authored in a fixed 1172 x 480 design box and the whole box is
   scaled by --reel-k (written by js/reel.js) so the solved angles survive at
   any viewport.
   ========================================================================== */

.reel {
  --reel-k: 1;

  /* The ring's geometry lives here and ONLY here. js/reel.js writes these
     and reads the same numbers back for its own maths, so the CSS and the
     script cannot describe two different rings — which is exactly what
     hard-coding `perspective: 891px` next to `var R = 891` invites. */
  --reel-bw: 1172px;   /* design box width  */
  --reel-bh: 480px;    /* design box height */
  --reel-r: 685px;     /* ring radius == perspective */
  --reel-eye: 600px;   /* camera height inside the box */

  /* Card size. 9:16 — the wallpapers themselves are 9:16.5, so a card at this
     ratio crops almost nothing; the old 9:20.8 threw away the sides.
     WIDTH is the load-bearing number: card spacing on the ring is
     r * tan(step), so the gap between cards is that minus this width. Change
     it and the tuned gap in js/reel.js goes with it. */
  --reel-cw: 130px;
  --reel-ch: 231px;

  position: relative;
  width: 100%;
  overflow: hidden;
}

.reel__stage {
  position: relative;
  width: var(--reel-bw);
  height: var(--reel-bh);
  margin-inline: auto;
  transform: scale(var(--reel-k));
  transform-origin: 50% 0;

  perspective: var(--reel-r);
  perspective-origin: calc(var(--reel-bw) / 2) var(--reel-eye);
  transform-style: preserve-3d;

  /* The ring runs wider than the design box on purpose, so cards leave and
     enter past the edges instead of popping at a hard boundary. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.reel__card {
  position: absolute;
  left: calc(var(--reel-bw) / 2);
  /* 60.4% down the box, the proportion the original 290/480 sat at. */
  top: calc(var(--reel-bh) * 0.604);
  width: var(--reel-cw);
  height: var(--reel-ch);
  /* Half of each, so left/top place the card's CENTRE on the ring. */
  margin: calc(var(--reel-ch) / -2) 0 0 calc(var(--reel-cw) / -2);

  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-warm);
  box-shadow:
    0 26px 44px rgba(24, 22, 21, 0.16),
    0 4px 10px rgba(24, 22, 21, 0.1);
  backface-visibility: hidden;
  will-change: transform;
}

.reel__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Frames from the turntable carry their own alpha, so they need a ground to
   sit on rather than filling the card edge to edge. */
.reel__card--form {
  background: linear-gradient(170deg, var(--veil), var(--paper-warm));
}

.reel__card--form img {
  object-fit: contain;
  padding: 10% 8% 14%;
}

.reel__card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 10px 9px;
  font-family: var(--font-sans);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--veil);
  background: linear-gradient(transparent, rgba(24, 22, 21, 0.55));
}

.reel__card--form figcaption {
  color: var(--ink-soft);
  background: none;
}

/* A hairline inside the radius keeps the card reading as an object rather
   than a floating crop, the way the reference does. */
.reel__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(24, 22, 21, 0.1);
}

/* ---- Flattened fallbacks --------------------------------------------------
   Without scripting there is no ring to drive, and on touch or reduced
   motion a continuously turning carousel is the wrong call. In each case the
   same cards become a plain horizontal scroller.
   -------------------------------------------------------------------------- */

.reel__stage--flat {
  width: 100%;
  height: auto;
  transform: none;
  perspective: none;
  display: flex;
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.reel__stage--flat .reel__card {
  position: static;
  flex: none;
  width: clamp(8.5rem, 7rem + 12vw, 13rem);
  height: auto;
  aspect-ratio: 9 / 16;
  margin: 0;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
  scroll-snap-align: center;
}

.reel__stage--flat .reel__card figcaption { font-size: var(--text-xs); }

/* The edge fade only makes sense on the ring. The flat scroller has real
   edges of its own, and js/reel.js owns that class — so this no longer keys
   off `pointer: coarse`, which would have stripped the fade from the ring
   now that it turns on touch too. */
.reel__stage--flat {
  -webkit-mask-image: none;
  mask-image: none;
}