/* =========================================================
   CINETECA — stile generale
   ========================================================= */

/* font inclusi nella cartella: funzionano anche senza internet */
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --bg: #0a0a0e;
  --surface: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.09);
  --text: #f4f1ea;
  --muted: #a5a3ad;

  --film: #e50914;
  --film-soft: #ff4d57;
  --serie: #3b82f6;
  --serie-2: #8b5cf6;
  --serie-soft: #7fa8ff;

  --ease: cubic-bezier(.22, .8, .2, 1);
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;

  /* misure delle "locandine" dello sfondo */
  --tile-w: 118px;
  --tile-h: 177px;
  --tile-gap: 18px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;              /* la pagina non scorre: scorrerà solo la lista */
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

.sprite { display: none; }

.ic {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* =========================================================
   VISTE (pagina unica: home / film / serie)
   ========================================================= */

.view {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease), visibility 0s linear .55s;
}

.view.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .55s var(--ease), visibility 0s;
}

/* =========================================================
   HOME — sfondo a parete di locandine
   ========================================================= */

.wall {
  position: absolute;
  inset: -30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--tile-gap);
  transform: rotate(-9deg);
  pointer-events: none;
}

.wall-row {
  display: flex;
  width: max-content;
  animation: wall-scroll var(--dur, 90s) linear infinite;
  will-change: transform;
}

/* la riga contiene due copie identiche: spostandosi del 50% il giro è continuo */
@keyframes wall-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* sfondo fermo quando la home non è visibile: nessun consumo inutile */
.view--home:not(.is-active) .wall-row { animation-play-state: paused; }

.tile {
  flex: none;
  width: var(--tile-w);
  height: var(--tile-h);
  margin-right: var(--tile-gap);   /* margine, non gap: garantisce il giro perfetto */
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, hsl(var(--h) 42% 22%), hsl(var(--h) 38% 9%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  overflow: hidden;
}

.tile .ic {
  width: 42%;
  height: 42%;
  stroke-width: 1.3;
  color: hsl(var(--h) 70% 72% / .5);
}

.tile--poster {
  background-image: var(--poster), linear-gradient(160deg, hsl(var(--h) 42% 22%), hsl(var(--h) 38% 9%));
  background-size: cover;
  background-position: center;
}

/* dissolvenza quando le locandine vengono sostituite */
.wall { opacity: 0; transition: opacity .7s var(--ease); }
.wall.is-ready { opacity: 1; }

.home-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%, rgba(10, 10, 14, .55) 0%, rgba(10, 10, 14, .9) 100%),
    linear-gradient(to bottom, rgba(10, 10, 14, .7), transparent 25%, transparent 70%, rgba(10, 10, 14, .95));
}

/* nota in basso: crediti TMDB (richiesti dai termini d'uso) o promemoria chiave */
.home-note {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 32px);
  text-align: center;
  font-size: .72rem;
  color: rgba(255, 255, 255, .42);
  pointer-events: none;
}

.home-note code {
  font-family: ui-monospace, Consolas, monospace;
  color: rgba(255, 255, 255, .65);
}

.brand {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: .45em;
  padding-left: .45em;          /* compensa la spaziatura dell'ultima lettera */
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  pointer-events: none;
}

/* =========================================================
   HOME — le due metà
   ========================================================= */

.split {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 2;
}

.side {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
  transition: flex-grow .75s var(--ease);
}

/* velatura colorata di ciascun lato */
.side::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  transition: opacity .6s var(--ease);
}

.side--film::before {
  background: linear-gradient(90deg, rgba(229, 9, 20, .38), rgba(229, 9, 20, 0) 80%);
}

.side--serie::before {
  background: linear-gradient(270deg, rgba(59, 130, 246, .36), rgba(139, 92, 246, .12) 55%, rgba(139, 92, 246, 0) 85%);
}

/* oscuramento del lato non attivo */
.side::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6, 6, 9, .6);
  opacity: 0;
  transition: opacity .6s var(--ease);
}

/* separazione morbida: un alone largo e sfumato invece di una linea netta.
   Metà alone sta in ciascun lato, così segue il confine mentre si allarga. */
.seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.side--film .seam  { right: 0; background: linear-gradient(to left,  rgba(255, 255, 255, .035), transparent); }
.side--serie .seam { left: 0;  background: linear-gradient(to right, rgba(255, 255, 255, .035), transparent); }

/* l'oscuramento del lato non attivo sfuma verso il confine, senza bordo netto */
.side--film::after {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 160px);
          mask-image: linear-gradient(to left, transparent, #000 160px);
}
.side--serie::after {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 160px);
          mask-image: linear-gradient(to right, transparent, #000 160px);
}

.side-content {
  text-align: center;
  padding: 2rem;
  transition: transform .75s var(--ease), opacity .4s var(--ease);
}

.side-kicker {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--muted);
}

.side-title {
  margin: .12em 0 .08em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 9rem);
  line-height: .9;
  letter-spacing: .02em;
  white-space: nowrap;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.side--film .side-title  { background-image: linear-gradient(180deg, #fff 35%, var(--film-soft)); }
.side--serie .side-title { background-image: linear-gradient(180deg, #fff 35%, var(--serie-soft)); }

.side-sub {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.side-btn {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease), transform .3s var(--ease);
}

.side-btn .ic { transition: transform .3s var(--ease); }
.side-btn:hover .ic { transform: translateX(4px); }
.side-btn:active { transform: scale(.97); }

.side--film .side-btn:hover,
.side--film .side-btn:focus-visible {
  background: var(--film);
  border-color: var(--film);
  box-shadow: 0 12px 40px -10px rgba(229, 9, 20, .8);
  outline: none;
}

.side--serie .side-btn:hover,
.side--serie .side-btn:focus-visible {
  background: linear-gradient(90deg, var(--serie), var(--serie-2));
  border-color: transparent;
  box-shadow: 0 12px 40px -10px rgba(99, 102, 241, .85);
  outline: none;
}

/* --- effetto ingrandimento al passaggio del mouse --- */
@media (hover: hover) {
  /* la colonna "calda" la decide app (Wall.hot) seguendo i confini obliqui */
  .side.is-hot { flex-grow: 1.7; }
  .side.is-hot::before { opacity: 1; }
  .side.is-hot .side-content { transform: scale(1.08); }
  .split.has-hot .side:not(.is-hot)::after { opacity: 1; }
  .split.has-hot .side:not(.is-hot) .side-content { transform: scale(.94); }
}

/* stesso effetto navigando con la tastiera (Tab) */
.side:has(.side-btn:focus-visible) { flex-grow: 1.7; }
.side:has(.side-btn:focus-visible)::before { opacity: 1; }
.side:has(.side-btn:focus-visible) .side-content { transform: scale(1.08); }

/* --- transizione di uscita: il lato scelto riempie lo schermo --- */
.split.go-film .side--film,
.split.go-serie .side--serie { flex-grow: 60; }

.split.go-film .side--serie,
.split.go-serie .side--film { flex-grow: .0001; }

.split.is-leaving .side-content { opacity: 0; }

/* schermi stretti: le due metà una sopra l'altra */
@media (max-width: 700px) {
  .split { flex-direction: column; }
  .seam { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: 90px;
          -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
                  mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent); }
  .side--film .seam  { bottom: 0; background: linear-gradient(to top, rgba(255, 255, 255, .035), transparent); }
  .side--serie .seam { top: 0;    background: linear-gradient(to bottom, rgba(255, 255, 255, .035), transparent); }
  .side--film::after  { -webkit-mask-image: linear-gradient(to top, transparent, #000 120px); mask-image: linear-gradient(to top, transparent, #000 120px); }
  .side--serie::after { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px); mask-image: linear-gradient(to bottom, transparent, #000 120px); }
  .side--film::before { background: linear-gradient(180deg, rgba(229, 9, 20, .38), transparent 85%); }
  .side--serie::before { background: linear-gradient(0deg, rgba(59, 130, 246, .36), transparent 85%); }
}

/* Le sezioni Film / Serie TV sono in css/sezioni.css */

/* =========================================================
   Movimento ridotto (impostazione di sistema)
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wall-row { animation-duration: 600s !important; }
  .side, .side-content, .view { transition-duration: .01ms !important; }
}

/* pulsante schermo intero (home, in alto a destra) */
.fs-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(10, 10, 14, .45);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.fs-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; transform: scale(1.06); }

/* =========================================================
   HOME A 4 COLONNE (Film · Serie TV · Videogiochi · Musica)
   ========================================================= */
:root {
  --giochi: #a855f7;
  --giochi-soft: #d0a6ff;
  --musica: #1ed760;
  --musica-soft: #7dffae;
}

.split--4 .side-title { font-size: clamp(2.4rem, 4.8vw, 5.8rem); }
.split--4 .side-kicker { font-size: .68rem; letter-spacing: .32em; }
.split--4 .side-sub { font-size: .9rem; }
.split--4 .side-btn { margin-top: 1.5rem; padding: .8rem 1.6rem; }
.split--4 .side-content { padding: 1.2rem; }

/* colonne con uno sfondo tutto loro (coprono il muro di locandine) */
.side-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #0a0a0e;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.side-bg.is-ready { opacity: 1; }
/* velo scuro sopra le copertine vere, così il titolo resta leggibile */
.side-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 38% at 50% 50%, rgba(6, 6, 9, .55), transparent 75%),
    linear-gradient(180deg, rgba(6, 6, 9, .35), rgba(6, 6, 9, .55) 70%, rgba(6, 6, 9, .85));
}
.side-bg--musica::after { background-color: rgba(4, 10, 6, .38); }

/* separazioni morbide tra le colonne */
.split--4 .seam { left: 0; right: auto; background: linear-gradient(to right, rgba(255, 255, 255, .035), transparent); }
.split--4 .side--film .seam { display: none; }
.split--4 .side::after {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}
.split--4 .side--film::after { -webkit-mask-image: linear-gradient(to left, transparent, #000 90px); mask-image: linear-gradient(to left, transparent, #000 90px); }
.split--4 .side--musica::after { -webkit-mask-image: linear-gradient(to right, transparent, #000 90px); mask-image: linear-gradient(to right, transparent, #000 90px); }
.split--4 .side--film::before  { background: linear-gradient(180deg, rgba(229, 9, 20, .34), rgba(229, 9, 20, 0) 85%); }
.split--4 .side--serie::before { background: linear-gradient(180deg, rgba(59, 130, 246, .34), rgba(139, 92, 246, .1) 60%, transparent 90%); }
.side--giochi::before { background: linear-gradient(180deg, rgba(168, 85, 247, .36), rgba(168, 85, 247, 0) 85%); }
.side--musica::before { background: linear-gradient(180deg, rgba(30, 215, 96, .3), rgba(30, 215, 96, 0) 85%); }
.side--giochi .side-title { background-image: linear-gradient(180deg, #fff 35%, var(--giochi-soft)); }
.side--musica .side-title { background-image: linear-gradient(180deg, #fff 35%, var(--musica-soft)); }
.side--giochi .side-btn:hover, .side--giochi .side-btn:focus-visible {
  background: var(--giochi); border-color: var(--giochi); box-shadow: 0 12px 40px -10px rgba(168, 85, 247, .85); outline: none;
}
.side--musica .side-btn:hover, .side--musica .side-btn:focus-visible {
  background: var(--musica); border-color: var(--musica); color: #04140a; box-shadow: 0 12px 40px -10px rgba(30, 215, 96, .8); outline: none;
}
.split.go-giochi .side--giochi, .split.go-musica .side--musica { flex-grow: 60; }
.split.go-giochi .side:not(.side--giochi), .split.go-musica .side:not(.side--musica),
.split.go-film.split--4 .side:not(.side--film), .split.go-serie.split--4 .side:not(.side--serie) { flex-grow: .0001; }

/* --- Musica: muro di copertine quadrate --- */
.cw-wall { position: absolute; inset: -25% -40%; display: flex; flex-direction: column; justify-content: center; gap: 14px; transform: rotate(-9deg); }
.cw-row { display: flex; width: max-content; animation: wall-scroll var(--dur, 80s) linear infinite; will-change: transform; }
.cw-row--rev { animation-direction: reverse; }
.cw-tile {
  flex: none; width: 104px; height: 104px; margin-right: 14px; border-radius: 8px;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, hsl(var(--h) 45% 24%), hsl(var(--h) 40% 9%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.cw-tile .ic { width: 40%; height: 40%; color: hsl(var(--h) 70% 70% / .5); stroke-width: 1.3; }
.cw-tile--img { background: var(--poster) center / cover, hsl(var(--h) 40% 15%); }

/* --- Videogiochi: sfilata 3D di copertine --- */
.cg-stage {
  position: absolute; inset: -8% -60%;
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  transform: perspective(900px) rotateY(-16deg) rotateZ(-3deg);
}
.cg-row { display: flex; width: max-content; animation: wall-scroll var(--dur, 60s) linear infinite; will-change: transform; }
.cg-row--rev { animation-direction: reverse; }
.cg-cover {
  flex: none; width: 150px; height: 200px; margin-right: 24px; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, hsl(var(--h) 75% 55% / .55), transparent 45%), linear-gradient(170deg, hsl(var(--h) 55% 26%), hsl(var(--h) 55% 9%));
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.cg-cover .ic { width: 42%; height: 42%; color: hsl(var(--h) 80% 78% / .55); stroke-width: 1.3; }
.cg-cover--img { background: var(--poster) center / cover, hsl(var(--h) 40% 15%); }
.view--home:not(.is-active) .cw-row, .view--home:not(.is-active) .cg-row { animation-play-state: paused; }

/* schermi stretti: 4 fasce una sotto l'altra */
@media (max-width: 700px) {
  .split--4 .side::after { -webkit-mask-image: none; mask-image: none; }
  .split--4 .seam { display: none; }
  .split--4 .side-title { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .split--4 .side-kicker, .split--4 .side-sub { display: none; }
  .split--4 .side-btn { margin-top: .8rem; padding: .55rem 1.2rem; }
  .split--4 .side--film .side-content { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-row, .cg-row { animation-duration: 600s !important; }
}

/* =========================================================
   HOME — rifinitura
   ========================================================= */

/* --- parete Film / Serie TV: due strati che si scambiano al confine --- */
.wall-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .7s var(--ease);
  --band: 130px;                 /* metà della fascia in cui la serie diventa film */
}
.wall-wrap.is-ready { opacity: 1; }
.wall-layer { position: absolute; inset: 0; }
.wall-layer > .wall { opacity: 1; }


/* grana da pellicola su tutta la home: unisce le quattro colonne */
/* grana da pellicola: ora è uno strato dello sfondo scuro (.home-shade),
   un elemento in meno da sovrapporre a tutto lo schermo */
.home-grain { display: none; }
.home-shade { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 75% 70% at 50% 50%, rgba(10, 10, 14, .55) 0%, rgba(10, 10, 14, .9) 100%),
    linear-gradient(to bottom, rgba(10, 10, 14, .7), transparent 25%, transparent 70%, rgba(10, 10, 14, .95)); }
.split { z-index: 3; }

/* --- nome e saluto in alto --- */
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-left: 0; letter-spacing: 0; }
.brand-name { letter-spacing: .45em; padding-left: .45em; }
.brand-date {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: none;
  color: rgba(255, 255, 255, .45);
  white-space: nowrap;
}
.brand-date::first-letter { text-transform: uppercase; }
.brand, .fs-btn { z-index: 4; }

/* --- emblema di ogni colonna (al posto di "La tua collezione") --- */
.side--film   { --c: 229, 9, 20; }
.side--serie  { --c: 99, 120, 255; }
.side--giochi { --c: 168, 85, 247; }
.side--musica { --c: 30, 215, 96; }
.side-emblem {
  width: 54px;
  height: 54px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgb(var(--c));
  background: radial-gradient(circle at 50% 35%, rgba(var(--c), .28), rgba(var(--c), .08) 70%);
  border: 1px solid rgba(var(--c), .45);
  box-shadow: 0 0 0 6px rgba(var(--c), .06), 0 10px 40px -8px rgba(var(--c), .55);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .5s var(--ease);
}
.side-emblem .ic { width: 24px; height: 24px; stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(var(--c), .7)); }
.side--film .side-emblem { color: #ff5a62; }
.side--serie .side-emblem { color: #93a6ff; }
.side--giochi .side-emblem { color: #cf9dff; }
.side--musica .side-emblem { color: #5ff09a; }
@media (hover: hover) {
  .side.is-hot .side-emblem { transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 8px rgba(var(--c), .1), 0 14px 50px -6px rgba(var(--c), .8); }
}

/* --- numeri in pillole + novità --- */
.side-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: .55rem; }
.side-stats[hidden] { display: none; }
.ss {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .72);
  background: rgba(10, 10, 14, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  white-space: nowrap;
}
.ss b { color: #fff; font-weight: 700; }
.ss--news {
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  background: rgba(var(--c), .22);
  border-color: rgba(var(--c), .6);
  transition: background .2s, transform .2s;
}
.ss--news:hover { background: rgba(var(--c), .4); transform: translateY(-1px); }
.ss--news i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 0 0 rgba(var(--c), .7); animation: ss-pulse 2s ease-out infinite; }
.side--musica .ss--news i, .side--musica .ss--news:hover { color: #fff; }
@keyframes ss-pulse { 70% { box-shadow: 0 0 0 7px rgba(var(--c), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--c), 0); } }

/* --- barra luminosa in fondo alla colonna --- */
.side-bar {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, transparent, rgb(var(--c)), transparent);
  box-shadow: 0 0 24px 2px rgba(var(--c), .7);
  transform: scaleX(.15);
  opacity: .35;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
  pointer-events: none;
}
@media (hover: hover) { .side.is-hot .side-bar { transform: scaleX(1); opacity: 1; } }
.side:has(.side-btn:focus-visible) .side-bar { transform: scaleX(1); opacity: 1; }

/* --- linee sottili tra le colonne --- */
.split--4 .seam::after {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(transparent, rgba(255, 255, 255, .14), transparent);
}

/* --- titoli: un filo di luce che passa al passaggio del mouse --- */
.side-title { position: relative; background-size: 100% 100%; }
@media (hover: hover) {
  .side.is-hot .side-title { text-shadow: 0 0 40px rgba(var(--c), .35); }
}

/* --- entrata delle colonne --- */
.split.is-entering .side-content { animation: side-in .9s var(--ease) both; }
.split.is-entering .side:nth-child(2) .side-content { animation-delay: .08s; }
.split.is-entering .side:nth-child(3) .side-content { animation-delay: .16s; }
.split.is-entering .side:nth-child(4) .side-content { animation-delay: .24s; }
@keyframes side-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }

/* schermi stretti */
@media (max-width: 700px) {
  .side-emblem { width: 38px; height: 38px; margin-bottom: .4rem; }
  .side-emblem .ic { width: 18px; height: 18px; }
  .split--4 .side-stats { display: none; }
  .split--4 .side--film .side-content { padding-top: 78px; }
  .brand-date { font-size: .62rem; }
  .side-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss--news i { animation: none; }
}

/* tra Film e Serie TV niente bordi netti: le velature sfumano, così il cambio delle locandine è continuo */
.split--4 .side--serie .seam::after { display: none; }
.split--4 .side--film::before {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 170px);
          mask-image: linear-gradient(to left, transparent, #000 170px);
}
.split--4 .side--serie::before {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 170px);
          mask-image: linear-gradient(to right, transparent, #000 170px);
}
@media (max-width: 700px) {
  .split--4 .side--film::before, .split--4 .side--serie::before { -webkit-mask-image: none; mask-image: none; }
}

/* quando si passa su Videogiochi o Musica, Film e Serie si scuriscono insieme:
   niente fascia chiara sul loro confine comune */
@media (hover: hover) {
  .split--4:has(.side--giochi.is-hot, .side--musica.is-hot) .side--film::after { -webkit-mask-image: none; mask-image: none; }
  .split--4:has(.side--giochi.is-hot, .side--musica.is-hot) .side--serie::after {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 90px);
            mask-image: linear-gradient(to left, transparent, #000 90px);
  }
}

/* =========================================================
   HOME — una sola parete per le quattro colonne, confini obliqui
   ========================================================= */

:root { --sk: calc(100vh * .15838); }   /* tan(9°): stessa pendenza delle locandine */

/* --- riquadri con quattro copertine sovrapposte (film, serie, gioco, album) --- */
.tile--multi {
  position: relative;
  display: block;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.tk {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  font-style: normal;
  visibility: hidden;
  opacity: 0;
  background: linear-gradient(160deg, hsl(var(--h) 42% 22%), hsl(var(--h) 38% 9%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.tk .ic { width: 42%; height: 42%; stroke-width: 1.3; color: hsl(var(--h) 70% 72% / .5); }
.tk--poster {
  background-image: var(--poster), linear-gradient(160deg, hsl(var(--h) 42% 22%), hsl(var(--h) 38% 9%));
  background-size: cover;
  background-position: center;
}
/* copertine dei videogiochi: un filo di lucentezza da custodia */
.tk--game::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .14), transparent 32%, transparent 70%, rgba(255, 255, 255, .05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
/* dischi: copertina quadrata in alto e il vinile che esce dalla busta */
.tk--album {
  display: block;
  overflow: visible;
  background: linear-gradient(180deg, hsl(var(--h) 30% 13%), hsl(var(--h) 30% 6%));
}
/* vinile: un elemento a parte, così può scivolare fuori dalla busta e girare */
.tk--album .vn {
  position: absolute;
  z-index: 0;
  left: 7%;
  width: 86%;
  aspect-ratio: 1;
  top: calc(var(--tile-w) * .5);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 17%, #0c0c0f 17.5% 19%, transparent 19.5%),
    repeating-radial-gradient(circle, #141418 0 2px, #1d1d22 2px 4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .05);
  translate: 0 0;
  transition: translate .7s cubic-bezier(.2, .8, .2, 1);
}
/* etichetta a spicchi (così si vede che gira) e foro centrale */
.tk--album .vn::before {
  content: '';
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background: conic-gradient(hsl(var(--h) 70% 62%) 0 25%, hsl(var(--h) 50% 34%) 0 50%, hsl(var(--h) 70% 62%) 0 75%, hsl(var(--h) 50% 34%) 0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.tk--album .vn::after {
  content: '';
  position: absolute;
  inset: 47.5%;
  border-radius: 50%;
  background: #0c0c0f;
}
/* riflesso fermo sopra il disco (il disco gira, la luce no) */
.tk--album::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 7%;
  width: 86%;
  aspect-ratio: 1;
  top: calc(var(--tile-w) * .5);
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 6%, rgba(255, 255, 255, .11) 11%, transparent 17% 56%, rgba(255, 255, 255, .07) 61%, transparent 67%);
  pointer-events: none;
  translate: 0 0;
  transition: translate .7s cubic-bezier(.2, .8, .2, 1);
}
.tk--album::after {                       /* copertina */
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px 10px 4px 4px;
  background: var(--poster, none) center / cover, linear-gradient(150deg, hsl(var(--h) 50% 30%), hsl(var(--h) 45% 12%));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}
.tk--album.tk--empty .ic {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--tile-w) * .5);
  width: 40%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
/* passando sulla colonna Musica: i dischi scivolano fuori dalla busta e girano */
@keyframes vn-spin { to { rotate: 360deg; } }
.tk--album.is-on .vn { animation: vn-spin 1.8s linear infinite paused; }
@media (hover: hover) {
  .wall-wrap.is-spin .tk--album.is-on .vn,
  .wall-wrap.is-spin .tk--album.is-on::before { translate: 0 calc(var(--tile-w) * .13); }
  .wall-wrap.is-spin .tk--album.is-on .vn { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) { .tk--album.is-on .vn { animation: none; } }

/* luce dei cambi: una fascia obliqua per ogni confine, con i colori delle due colonne */
.wall-glow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(270px + var(--sk));
  translate: 50vw 0;                 /* posizione scritta da Wall (si sposta senza ridisegnare) */
  transform: translateX(-50%);
  will-change: translate;
  pointer-events: none;
  /* fascia obliqua disegnata dalla sfumatura stessa (81° = pendenza dei confini):
     niente rotazione né maschera, molto più leggera da comporre */
  background: linear-gradient(81deg, transparent 26.5%, rgb(var(--ga) / .08) 40.6%, rgba(255, 245, 235, .06) 50%, rgb(var(--gb) / .09) 59.4%, transparent 73.5%);
}
.wall-glow--1 { translate: 25vw 0; --ga: 229 9 20;   --gb: 91 108 255; }
.wall-glow--2 { translate: 50vw 0; --ga: 91 108 255; --gb: 168 85 247; }
.wall-glow--3 { translate: 75vw 0; --ga: 168 85 247; --gb: 30 215 96; }
.wall-wrap.is-vert .wall-glow { display: none; }

/* --- colonne con i bordi obliqui (stessa pendenza delle locandine) --- */
@media (min-width: 701px) {
  .split--4 .side { margin: 0 calc(var(--sk) / -2); }
  .split--4 .side:first-child { margin-left: 0; }
  .split--4 .side:last-child { margin-right: 0; }
  /* niente clip-path (pesante mentre le colonne si allargano): velature e
     oscuramento sono parallelogrammi inclinati, il resto è trasparente */
  .split--4 .side::before,
  .split--4 .side::after { left: calc(var(--sk) / 2); right: calc(var(--sk) / 2); transform: skewX(9deg); }
  .split--4 .side:first-child::before,
  .split--4 .side:first-child::after { left: calc(var(--sk) * -1.5); }
  .split--4 .side:last-child::before,
  .split--4 .side:last-child::after { right: calc(var(--sk) * -1.5); }
  /* linea sottile lungo il confine obliquo */
  .split--4 .seam {
    left: 0;
    width: var(--sk);
    background: linear-gradient(to top right, transparent calc(50% - .7px), rgba(255, 255, 255, .16) 50%, transparent calc(50% + .7px));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  }
  .split--4 .seam::after { display: none; }
  .split--4 .side--film .seam { display: none; }
  /* il contenuto sta al centro della parte visibile */
  .split--4 .side:first-child .side-content { margin-right: calc(var(--sk) / 2); }
  .split--4 .side:last-child .side-content { margin-left: calc(var(--sk) / 2); }
  /* oscuramento e velature seguono l'obliquo, senza sfumature verticali */
  .split--4 .side::after,
  .split--4 .side--film::before, .split--4 .side--serie::before { -webkit-mask-image: none !important; mask-image: none !important; }
  .side-bar { left: 22%; right: 22%; }
}

/* --- profondità: la parete si sposta un poco col mouse, i titoli nell'altro verso --- */
.wall-layer > .wall {
  transform: rotate(-9deg) scale(1.02);
  transition: translate 1.2s cubic-bezier(.2, .7, .2, 1), opacity .7s var(--ease);
}
.split--4 .side-content { transition: transform .75s var(--ease), opacity .4s var(--ease), translate 1s cubic-bezier(.2, .7, .2, 1); }

/* --- colori secondo l'ora: più caldi la sera, più freddi di giorno --- */
.home-tone {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease, background 2s ease;
}
.home-tone.is-on { opacity: 1; }
.home-tone--mattina  { background: linear-gradient(180deg, rgba(150, 200, 255, .10), rgba(255, 220, 190, .045) 60%, rgba(255, 230, 200, .02)); }
.home-tone--giorno   { background: linear-gradient(180deg, rgba(140, 190, 255, .10), rgba(120, 170, 255, .045) 70%, rgba(120, 170, 255, .02)); }
.home-tone--tramonto { background: linear-gradient(180deg, rgba(255, 120, 80, .11), rgba(255, 170, 70, .07) 55%, rgba(120, 40, 120, .06)); }
.home-tone--sera     { background: linear-gradient(180deg, rgba(255, 150, 70, .09), rgba(200, 80, 60, .06) 60%, rgba(60, 20, 40, .08)); }
.home-tone--notte    { background: linear-gradient(180deg, rgba(60, 70, 160, .13), rgba(120, 60, 140, .06) 60%, rgba(255, 150, 80, .03)); }
@media (prefers-reduced-motion: reduce) { .home-tone { transition: none; } .wall-layer > .wall { transition: none; } }

/* --- modalità leggera (attivata da sola se il PC fatica) --- */
.fx-lite .wall-glow { display: none; }
.fx-lite .side.is-hot .side-title { text-shadow: none; }
.fx-lite .side-emblem .ic { filter: none; }
.fx-lite .side-bar { box-shadow: none; }
.fx-lite .side.is-hot .side-emblem { box-shadow: 0 0 0 8px rgba(var(--c), .1); }
.fx-lite .tk--album.is-on .vn { animation: none; }
.fx-lite .home-tone { transition: none; }