/* Photo / Video / Direction — 3D ring, same construction as the Stef Fish species carousel. */

.cover-ring {
  --card-w: clamp(150px, 17vw, 260px);
  --card-h: calc(var(--card-w) * 4 / 3);
  --count: 12;
  --step: calc(360deg / var(--count));
  --radius: calc(var(--card-w) * 1.95);
  --spin: 40s;
  --bow: 3deg;
}

.cover-ring__stage {
  position: relative;
  height: clamp(380px, 38vw, 560px);
  margin-top: clamp(12px, 2vw, 28px);
  perspective: calc(var(--radius) * 1.4);
  perspective-origin: 50% 40%;
  overflow: hidden;
}

.cover-ring__tilt,
.cover-ring__world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.cover-ring__tilt {
  transform: rotateX(var(--bow));
}

.cover-ring__world {
  transform: translateZ(var(--radius));
}

.cover-ring__spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin: calc(var(--card-h) / -2) 0 0 calc(var(--card-w) / -2);
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  animation: cover-ring-spin var(--spin) linear infinite;
}

.cover-ring__stage:hover .cover-ring__spin,
.cover-ring__stage:focus-within .cover-ring__spin {
  animation-play-state: paused;
}

.cover-ring__card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * var(--step))) translateZ(calc(var(--radius) * -1));
}

.cover-ring__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--foreground) 18%, transparent);
  border-radius: 12px;
  background: #111;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  backface-visibility: hidden;
}

.cover-ring__face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-ring__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.6rem 0.85rem 0.85rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 28%, rgba(0, 0, 0, 0.92) 58%, #000 100%);
}

.cover-ring__kicker,
.cover-ring__title {
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.cover-ring__kicker {
  margin: 0;
  font-size: calc(var(--card-w) * 0.055);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
}

.cover-ring__title {
  margin: 0.28rem 0 0;
  font-family: var(--font-display);
  font-size: calc(var(--card-w) * 0.078);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}

@keyframes cover-ring-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-1turn);
  }
}

@media (max-width: 900px) {
  .cover-ring {
    --card-w: clamp(130px, 22vw, 200px);
  }

  .cover-ring__stage {
    height: clamp(340px, 56vw, 480px);
  }
}

@media (max-width: 640px) {
  .cover-ring {
    --card-w: 132px;
    --bow: 2deg;
    --spin: 34s;
  }

  .cover-ring__stage {
    height: 320px;
    perspective: calc(var(--radius) * 1.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-ring__spin {
    animation: none;
    transform: rotateY(-40deg);
  }
}