/* ============================================================
   Digital Dreams — Originals (carosello 3D "coverflow")
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #080809;
  --fg: #ededed;
  --fg-dim: rgba(237, 237, 237, 0.5);
  --card-w: min(66vw, 560px);
}

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image: radial-gradient(100% 60% at 50% 120%, rgba(40, 40, 55, 0.4), transparent 60%);
  background-repeat: no-repeat;
}

.originals {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.4rem, 3.5vh, 2.4rem);
  padding: clamp(5.5rem, 13vh, 8rem) 0 clamp(1.5rem, 5vh, 3rem);
  overflow: hidden;
}

.originals-head {
  text-align: center;
  padding: 0 1.5rem;
}
.heading {
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.subheading {
  margin-top: 0.6rem;
  font-size: clamp(0.9rem, 1.9vw, 1.1rem);
  color: var(--fg-dim);
}

/* ---------- Stage 3D ---------- */

.reel {
  position: relative;
  height: min(52vh, 400px);
  perspective: 1700px;
  perspective-origin: 50% 45%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;      /* verticale = scroll pagina; orizzontale lo gestisce il JS */
  user-select: none;
  outline: none;
}
.reel.dragging { cursor: grabbing; }

.reel-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ---------- Card ---------- */

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  aspect-ratio: 16 / 9;
  transform-style: preserve-3d;
  cursor: pointer;
  will-change: transform, opacity;
  /* transform / opacity impostati dal JS */
  transition: box-shadow 0.3s ease;
}

.card-media {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background-color: #111;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  /* riflesso in basso per profondità */
}
.card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%);
}
/* le card non centrali sono un po' più scure */
.card:not(.is-focused) .card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 9, 0.35);
  transition: background 0.3s ease;
}

.card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(54px, 6vw, 72px);
  height: clamp(54px, 6vw, 72px);
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.card.is-focused .card-play { opacity: 1; }
.card.is-focused:hover .card-play { background: rgba(255, 255, 255, 0.95); }
.card-play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transition: border-left-color 0.3s ease;
}
.card.is-focused:hover .card-play::after { border-left-color: #0a0a0a; }

/* ---------- Caption (film in primo piano) ---------- */

.reel-caption {
  text-align: center;
  min-height: 3.4em;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rc-title {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}
.rc-note {
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}

/* ---------- Frecce ---------- */

.reel-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.rn-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--fg);
  font-family: var(--font-primary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.rn-btn:hover,
.rn-btn:focus-visible {
  background: var(--fg);
  color: #0a0a0a;
  border-color: var(--fg);
}

.reel-hint {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.empty {
  text-align: center;
  padding: 2rem 1.5rem;
  color: var(--fg-dim);
  font-size: 0.85rem;
}
.empty code { color: #fff; }

/* ---------- Player video (in aggiunta a base.css) ---------- */

.video-modal { z-index: 90; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

/* ---------- Mobile: card più grandi, meno vuoto verticale ---------- */

@media (max-width: 640px) {
  :root { --card-w: min(62vw, 320px); }
  .card { aspect-ratio: 3 / 4; }        /* verticale su telefono */
  .reel { height: clamp(360px, 56vh, 480px); }
  .originals { gap: clamp(1.6rem, 4vh, 2.2rem); }
}