/* ============================================================
   Digital Dreams — Portfolio
   ============================================================ */

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

:root {
  --bg: #0a0a0a;
  --fg: #ededed;
  --fg-dim: rgba(237, 237, 237, 0.45);
  --line: rgba(237, 237, 237, 0.12);
  /* Griglia delle colonne (titolo più largo, anno stretto) */
  --cols: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.55fr);
}

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

/* ---------- Sfondo dinamico ---------- */

.background-image {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.9)),
    rgba(10, 10, 10, 0.35);
  pointer-events: none;
}

/* ---------- Impaginazione ---------- */

.page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* safe center: centra se il contenuto ci sta, altrimenti allinea in alto
     lasciandolo scorrevole (evita che la cima finisca fuori schermo) */
  justify-content: safe center;
  /* Il padding verticale libera gli angoli (logo, social, ora, località) */
  padding: clamp(4.5rem, 11vh, 7rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 9vh, 5.5rem);
}

.portfolio {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.portfolio-head {
  margin-bottom: clamp(1.6rem, 4vw, 2.8rem);
}

.heading {
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.subheading {
  margin-top: 0.6rem;
  font-size: clamp(0.68rem, 1.3vw, 0.8rem);
  color: var(--fg-dim);
  letter-spacing: 0.14em;
}

/* ---------- Intestazione colonne ---------- */

.cols-head {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 1.5rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.cols-head span:last-child { text-align: right; }

/* ---------- Righe (ogni riga = un video) ---------- */

.list { list-style: none; }

.row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 1.5rem;
  align-items: baseline;
  padding: clamp(0.85rem, 2vw, 1.15rem) 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.35s ease, color 0.35s ease;
  will-change: opacity;
}

.row .cell {
  font-size: clamp(0.72rem, 1.4vw, 0.9rem);
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row .cell.title {
  font-size: clamp(0.95rem, 2.1vw, 1.35rem);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
}

.row .cell.year { text-align: right; }

/* Indicatore "play" che compare a sinistra del titolo all'hover */
.row .cell.title::before {
  content: "▶";
  position: absolute;
  left: -1.35em;
  font-size: 0.62em;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Stato attivo (riga sotto il mouse) */
.row.active { color: var(--color-accent); }
.row.active .cell,
.row.active .cell.title { color: var(--color-accent); }
.row.active .cell.title::before { opacity: 1; transform: translateX(0); }

/* Quando una riga è attiva, le altre si attenuano */
.list.has-active .row:not(.active) { opacity: 0.28; }

.row:focus-visible {
  outline: none;
  color: var(--color-accent);
}
.row:focus-visible .cell,
.row:focus-visible .cell.title { color: var(--color-accent); }

.empty {
  padding: 2rem 0;
  color: var(--fg-dim);
  font-size: 0.85rem;
}
.empty a { color: var(--color-accent); }

/* ---------- Angoli ---------- */

.corner {
  position: fixed;
  z-index: 4;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.top-left { top: clamp(1rem, 3vw, 1.8rem); left: clamp(1rem, 3vw, 1.8rem); }
.top-right { top: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem); text-align: right; }
.bottom-left { bottom: clamp(1rem, 3vw, 1.8rem); left: clamp(1rem, 3vw, 1.8rem); }
.bottom-right { bottom: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem); }
.bottom-center {
  bottom: clamp(1rem, 3vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.brand { display: inline-flex; opacity: 0.85; transition: opacity 0.3s ease; }
.brand:hover { opacity: 1; }
.brand img { display: block; }

#social-nav a {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.25s ease;
}
#social-nav a:hover { color: var(--color-accent); }
#social-nav .sep { margin: 0 0.5em; opacity: 0.4; }

.time-blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Player video ---------- */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 6, 6, 0.94);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.video-modal.open { opacity: 1; }

.video-frame {
  position: relative;
  width: min(92vw, 1120px);
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-close {
  position: absolute;
  top: clamp(1rem, 3vw, 1.8rem);
  right: clamp(1rem, 3vw, 1.8rem);
  z-index: 51;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(237, 237, 237, 0.3);
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-primary);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.video-close:hover {
  background: var(--fg);
  color: #000;
  border-color: var(--fg);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  :root { --cols: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 0.5fr); }

  /* Mostra solo titolo, artista e anno; nasconde tipo e ruolo */
  .cols-head span:nth-child(3),
  .cols-head span:nth-child(4),
  .row .cell:nth-child(3),
  .row .cell:nth-child(4) { display: none; }

  .cols-head span:nth-child(2) { /* artist */ }
  .cols-head { gap: 1rem; }
  .row { gap: 1rem; }

  .corner { font-size: 0.58rem; }
  /* Su schermi stretti lascia solo i social (in basso al centro):
     località e ora sparirebbero addosso ai social. */
  .bottom-left, .bottom-right { display: none; }
}

@media (max-width: 460px) {
  :root { --cols: minmax(0, 1fr) minmax(0, 0.45fr); }
  /* Solo titolo + anno */
  .cols-head span:nth-child(2),
  .row .cell:nth-child(2) { display: none; }
  .row .cell.title::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .time-blink { animation: none; }
  .background-image { transition: opacity 0.3s ease; }
}