/* spun.video — sezioni. SPUN Beta (v2) con l'impaginato portfolio di DV-012:
   sala con finestra WebGL, indice ordinabile, schede con titolo XXL e striscia di scene.
   Idee di impaginato riprese da fontsinmovies.com, codice e stile SPUN. */

/* ---------- Accenti di categoria (tutti in palette, DESIGN_SYSTEM §4) --------- */
.sv-sq--coral, .sv-ph--coral { --acc: var(--sx-coral); }
.sv-sq--sky, .sv-ph--sky { --acc: var(--sx-sky); }
.sv-sq--plum, .sv-ph--plum { --acc: var(--sx-plum); }
.sv-sq--paper, .sv-ph--paper { --acc: var(--sx-paper); }
.sv-sq--butter, .sv-ph--butter { --acc: var(--sx-butter); }
.sv-sq--lime, .sv-ph--lime { --acc: var(--sx-lime); }
.sv-sq[class*="sv-sq--"] { background: var(--acc); color: var(--sx-ink); }

.sv-xxl { font-size: clamp(48px, 7vw, 124px); line-height: .92; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }

/* Segnaposto per le produzioni senza immagini: mosaico pixel nel colore della categoria */
.sv-ph {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; aspect-ratio: 16 / 9;
  background-color: color-mix(in srgb, var(--acc, var(--sx-coral)) 14%, var(--sx-ink));
  background-image: linear-gradient(color-mix(in srgb, var(--acc, var(--sx-coral)) 22%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--acc, var(--sx-coral)) 22%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}
.sv-ph-icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--acc, var(--sx-coral)); color: var(--sx-ink); }
.sv-ph-icon .sv-px { width: 32px; height: 32px; }

/* ---------- Stage WebGL (copertina, mirino, etichette) ------------------------- */
.sv-stage { position: absolute; inset: 0; overflow: hidden; background: var(--sx-ink); color: var(--sx-paper); }
.sv-stage-img, .sv-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-stage-img { object-fit: cover; filter: saturate(.9) brightness(.86); transition: opacity .6s steps(6, end); }
.sv-stage-canvas { opacity: 0; transition: opacity .4s steps(4, end); }
.sv-stage.is-gl .sv-stage-canvas { opacity: 1; }
.sv-stage.is-gl .sv-stage-img { opacity: 0; }
.sv-stage-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16, 16, 19, .45) 0%, rgba(16, 16, 19, 0) 26%, rgba(16, 16, 19, 0) 70%, rgba(16, 16, 19, .55) 100%); }
.sv-corner { position: absolute; z-index: 2; font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; color: rgba(250, 250, 244, .7); white-space: nowrap; }
.sv-corner--tl { top: 14px; left: 16px; }
.sv-corner--tr { top: 14px; right: 16px; }
.sv-corner--bl { bottom: 12px; left: 16px; color: rgba(250, 250, 244, .5); font-variant-numeric: tabular-nums; }
.sv-reticle { display: none; position: absolute; z-index: 1; left: var(--rx, 50%); top: var(--ry, 50%); width: 88px; height: 88px; transform: translate(-50%, -50%); pointer-events: none; transition: left .45s steps(9, end), top .45s steps(9, end); }
.sv-reticle i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(250, 250, 244, .85); }
.sv-reticle i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.sv-reticle i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.sv-reticle i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.sv-reticle i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.sv-reticle b { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%); background: var(--sx-video); }
@media (hover: hover) and (min-width: 1024px) { .sv-reticle { display: block; } }
.sv-stage--window { position: relative; inset: auto; aspect-ratio: 16 / 9; border-radius: 10px; }

/* Etichetta mono della scheda */
.sv-scheda-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
/* Solo movimento, niente opacità: se le animazioni si fermano il contenuto resta visibile */
@keyframes sv-rise { from { transform: translateY(14px); } to { transform: none; } }

/* ---------- Filtri, ordinamento, vista ------------------------------------------ */
.sv-catalog-bar { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.sv-filters { display: flex; gap: 8px; overflow-x: auto; padding: 16px; scrollbar-width: none; }
.sv-filters::-webkit-scrollbar { display: none; }
.sv-filter { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 40px; padding: 0 14px; border-radius: 6px; background: var(--soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: background-color .2s, color .2s; }
.sv-filter span { color: var(--text-2); }
.sv-filter:hover { background: var(--soft-2); }
.sv-filter[aria-current] { background: var(--btn); color: var(--btn-text); }
.sv-filter[aria-current] span { color: inherit; opacity: .6; }
.sv-catalog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 0 16px 16px; }
.sv-sort, .sv-view { display: flex; align-items: center; gap: 4px; }
.sv-sort .sv-eyebrow { margin-right: 8px; }
.sv-sort-btn, .sv-view button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 6px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.sv-sort-btn .sv-px { width: 8px; height: 8px; transition: transform .2s steps(2, end); opacity: 0; }
.sv-sort-btn[aria-pressed="true"], .sv-view button[aria-pressed="true"] { color: var(--text); background: var(--soft); }
.sv-sort-btn[aria-pressed="true"] .sv-px { opacity: 1; }
.sv-sort-btn[data-dir="desc"] .sv-px { transform: rotate(180deg); }
.sv-view { padding: 2px; background: var(--soft); border-radius: 8px; }
.sv-view button[aria-pressed="true"] { background: var(--bg); }
@media (min-width: 1024px) {
  .sv-catalog-bar { flex-direction: row; align-items: center; justify-content: space-between; }
  .sv-filters { padding: 20px 40px; }
  .sv-catalog-tools { padding: 0 40px 0 0; flex-wrap: nowrap; }
}

/* ---------- Indice: righe o immagini ---------------------------------------------- */
.sv-list { counter-reset: none; }
.sv-item { --i: 0; }
.sv-item.is-in { animation: sv-rise .45s steps(6, end) both; animation-delay: calc(var(--i) * 28ms); }
.sv-item-link { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline; gap: 6px 12px; padding: 20px 16px; border-bottom: 1px solid var(--rule); transition: background-color .2s; }
.sv-item-year { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sv-item-title { font-size: clamp(26px, 3.4vw, 60px); line-height: 1.02; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.sv-item-cat, .sv-item-kind { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sv-item-cat { margin-top: 6px; }
.sv-item-kind b { margin-left: 8px; padding: 1px 6px; border-radius: 4px; background: var(--soft); font-weight: 400; color: var(--text); }
.sv-item-thumb { display: none; }
.sv-item-link:hover, .sv-item-link:focus-visible { background: var(--soft); }
.sv-item-link:hover .sv-item-year, .sv-item-link:focus-visible .sv-item-year { color: var(--sx-video); }
.sv-item-link:focus-visible { outline-offset: -3px; }
.sv-item-link[aria-current="page"] .sv-item-title { color: var(--sx-video); }
@media (min-width: 1024px) {
  .sv-item-link { grid-template-columns: 96px minmax(0, 1fr) 180px 150px; align-items: center; gap: 24px; padding: 26px 40px; }
  .sv-item-cat, .sv-item-kind { grid-column: auto; margin: 0; }
  .sv-item-kind { justify-content: flex-end; }
}
/* Vista immagini */
.sv-catalog[data-view="grid"] .sv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1px; }
.sv-catalog[data-view="grid"] .sv-item { box-shadow: 0 0 0 1px var(--rule); }
.sv-catalog[data-view="grid"] .sv-item-link { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 0 0 24px; border: 0; }
.sv-catalog[data-view="grid"] .sv-item-thumb { display: block; order: -1; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 12px; background: var(--surface); }
.sv-catalog[data-view="grid"] .sv-item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.sv-catalog[data-view="grid"] .sv-item-link:hover .sv-item-thumb img { transform: scale(1.05); }
.sv-catalog[data-view="grid"] .sv-item-link > :not(.sv-item-thumb) { padding-inline: 20px; }
.sv-catalog[data-view="grid"] .sv-item-title { font-size: 26px; line-height: 30px; letter-spacing: -.015em; }
.sv-catalog[data-view="grid"] .sv-item-kind { justify-content: flex-start; }
/* Anteprima che segue il puntatore, solo in vista righe */
.sv-cursor { position: fixed; left: 0; top: 0; z-index: 30; width: 340px; aspect-ratio: 16 / 9; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0); transition: opacity .2s steps(3, end); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); }
.sv-cursor img { width: 100%; height: 100%; object-fit: cover; }
.sv-catalog.is-preview[data-view="list"] .sv-cursor { opacity: 1; }

/* ---------- Categorie ----------------------------------------------------------- */
.sv-cells.sv-cats { grid-template-columns: 1fr; background: transparent; }
.sv-cats > li { box-shadow: 0 0 0 1px var(--rule); }
.sv-cat { position: relative; display: block; min-height: 420px; height: 100%; overflow: hidden; background: var(--sx-ink); color: var(--sx-paper); }
.sv-cat > img, .sv-cat > .sv-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-cat > img { opacity: .5; filter: grayscale(.35); transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .4s steps(4, end), filter .4s steps(4, end); }
.sv-cat > .sv-ph .sv-ph-icon { display: none; }
.sv-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16, 16, 19, .95) 0%, rgba(16, 16, 19, .35) 60%, rgba(16, 16, 19, .1) 100%); }
.sv-cat:hover > img, .sv-cat:focus-visible > img { transform: scale(1.05); opacity: .75; filter: none; }
.sv-cat:focus-visible { outline-offset: -3px; }
.sv-cat-body { position: absolute; z-index: 2; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.sv-cat-count, .sv-cat-go { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: rgba(250, 250, 244, .72); }
.sv-cat-body .sv-sq { margin-bottom: 8px; }
.sv-cat-name { font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -.02em; }
.sv-cat-text { color: rgba(250, 250, 244, .78); }
.sv-cat-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--sx-paper); }
.sv-cat:hover .sv-cat-go { color: var(--acc, var(--sx-lime)); }
.sv-cat--coral { --acc: var(--sx-coral); } .sv-cat--sky { --acc: var(--sx-sky); } .sv-cat--plum { --acc: var(--sx-plum); }
.sv-cat--paper { --acc: var(--sx-paper); } .sv-cat--butter { --acc: var(--sx-butter); }
@media (min-width: 768px) { .sv-cells.sv-cats { grid-template-columns: repeat(2, 1fr); gap: 1px; } }
@media (min-width: 1280px) { .sv-cats--5 { grid-template-columns: repeat(5, 1fr) !important; } .sv-cats--4 { grid-template-columns: repeat(4, 1fr) !important; } .sv-cat { min-height: 540px; } }

/* ---------- Testata delle pagine ------------------------------------------------- */
.sv-pagehead { display: grid; gap: 40px; align-items: end; padding: 112px 16px 56px; border-bottom: 1px solid var(--rule); }
.sv-pagehead-text { display: flex; flex-direction: column; gap: 20px; }
.sv-pagehead .sv-lead { max-width: 560px; color: var(--text-2); }
@media (min-width: 1024px) {
  .sv-pagehead { padding: 168px 40px 72px; }
  .sv-pagehead--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- Scheda: titolo XXL e striscia di scene -------------------------------- */
/* Testata della scheda: scura (D-027 c) o chiara, secondo il tema scelto per il film (page_theme, DV-021) */
.sv-scheda {
  --bg: var(--sx-ink); --surface: var(--sx-ink-2); --rule: var(--sx-ink-3); --text: var(--sx-paper); --text-2: var(--sx-muted-2);
  --btn: var(--sx-paper); --btn-text: var(--sx-ink); --soft: rgba(250, 250, 244, .08); --soft-2: rgba(250, 250, 244, .14); --focus: var(--sx-lime);
  position: relative; background: var(--bg); color: var(--text); border-bottom: 1px solid var(--rule);
}
.sv-scheda--light {
  --bg: var(--sx-paper); --surface: var(--sx-paper-2); --rule: var(--sx-line-light); --text: var(--sx-ink); --text-2: var(--sx-muted);
  --btn: var(--sx-ink); --btn-text: var(--sx-paper); --soft: rgba(16, 16, 19, .05); --soft-2: rgba(16, 16, 19, .1); --focus: var(--sx-cobalt);
}
.sv-strip-rail { padding: 104px 16px 40px; }
.sv-scheda-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sv-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sv-back:hover { color: var(--text); }
.sv-scheda-title { font-size: clamp(44px, 5.6vw, 108px); line-height: .92; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
.sv-scheda-when { font-size: clamp(26px, 2.8vw, 52px); line-height: 1; letter-spacing: -.02em; color: var(--text-2); }
.sv-scheda-logline { max-width: 36ch; font-size: 20px; line-height: 28px; letter-spacing: -.02em; }
.sv-scheda-text .sv-actions { margin-top: 8px; }
/* Logo-titolo del tour e loghi dei partner, solo nella scheda (DV-018) */
.sv-scheda-titlelogo { display: block; width: auto; max-width: min(520px, 86%); max-height: 150px; height: auto; }
.sv-scheda-titlelogo.is-plate { padding: 12px 16px; border-radius: 6px; background: var(--sx-paper); }
.sv-scheda--light .sv-scheda-titlelogo.is-plate { background: var(--sx-ink); }
.sv-scheda-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; }
.sv-scheda-logo { display: inline-flex; align-items: center; }
.sv-scheda-logo img { display: block; width: auto; max-width: 200px; height: 40px; }
.sv-scheda-logo.is-plate { padding: 6px 10px; border-radius: 6px; background: var(--sx-paper); }
.sv-scheda--light .sv-scheda-logo.is-plate { background: var(--sx-ink); }
.sv-scheda-logo.is-plate img { height: 30px; }
.sv-soon { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.sv-strip-shots { margin-top: 48px; }
.sv-strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sv-strip-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.sv-strip-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.sv-shot { flex: none; width: 82vw; scroll-snap-align: start; }
.sv-shot-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); color: var(--sx-paper); }
.sv-shot-frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
button.sv-shot-frame:hover > img, button.sv-shot-frame:focus-visible > img { transform: scale(1.04); }
button.sv-shot-frame:focus-visible { outline-offset: -4px; }
.sv-stage--shot { position: absolute; inset: 0; }
.sv-shot-plus { position: absolute; z-index: 3; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; background: rgba(16, 16, 19, .6); color: var(--sx-paper); transition: background-color .2s steps(2, end); }
button.sv-shot-frame:hover .sv-shot-plus, button.sv-shot-frame:focus-visible .sv-shot-plus { background: var(--sx-video); color: var(--sx-ink); }
.sv-shot-cap { display: flex; gap: 12px; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.sv-shot-cap span { color: var(--text); }
.sv-strip-hint { display: none; }
@media (min-width: 768px) { .sv-shot { width: 48vw; } .sv-shot--cover { width: 64vw; } }
/* Striscia guidata dallo scroll (desktop, JS attivo, niente TV né movimento ridotto) */
@media (min-width: 1024px) {
  .sv-strip-on .sv-scheda { height: var(--strip-h, 100svh); }
  .sv-strip-on .sv-strip-pin { position: sticky; top: 48px; height: calc(100svh - 48px); overflow: hidden; }
  .sv-strip-on .sv-strip-rail { display: flex; align-items: center; gap: 72px; height: 100%; padding: 0 40px; transform: translate3d(calc(var(--x, 0) * -1px), 0, 0); will-change: transform; }
  .sv-strip-on .sv-scheda-text { flex: none; width: min(46vw, 820px); }
  .sv-strip-on .sv-strip-shots { flex: none; margin: 0; }
  .sv-strip-on .sv-strip-track { overflow: visible; gap: 32px; padding: 0; }
  .sv-strip-on .sv-shot { width: min(40vw, 720px); }
  .sv-strip-on .sv-shot--cover { width: min(56vw, 1000px); }
  .sv-strip-on .sv-strip-hint { position: absolute; left: 40px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); opacity: calc(1 - var(--sp, 0) * 4); }
  .sv-strip-rail:not(.sv-strip-on *) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 136px 40px 56px; }
}

/* ---------- Sinossi e scheda tecnica -------------------------------------------- */
.sv-work { display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-work-text { display: flex; flex-direction: column; gap: 20px; padding: 56px 16px; max-width: 900px; }
.sv-work-text .sv-h3 { margin-bottom: 8px; }
.sv-work-sheet { display: flex; flex-direction: column; gap: 16px; padding: 40px 16px 56px; border-top: 1px solid var(--rule); }
.sv-sheet > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.sv-sheet > div:first-child { border-top: 1px solid var(--rule); }
.sv-sheet dt { padding-top: 3px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sv-sheet dd { font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.sv-sheet a { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; }
.sv-sheet a .sv-px { width: 8px; height: 8px; }
@media (min-width: 1024px) {
  .sv-work { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sv-work-text { padding: 96px 64px 96px 40px; }
  .sv-work-sheet { padding: 96px 40px; border-top: 0; border-left: 1px solid var(--rule); }
}
.sv-facade-wrap { padding: 16px; }
.sv-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh; overflow: hidden; background: var(--sx-ink); color: var(--sx-paper); text-align: left; }
.sv-facade > img, .sv-facade > .sv-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-facade > img { opacity: .62; transition: opacity .3s steps(3, end), transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.sv-facade:hover > img, .sv-facade:focus-visible > img { opacity: .8; transform: scale(1.02); }
.sv-facade-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 72px; height: 72px; transform: translate(-50%, -50%); background: var(--sx-video); color: var(--sx-ink); }
.sv-facade-play .sv-px { width: 32px; height: 32px; }
.sv-facade-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 20px; background: linear-gradient(0deg, rgba(16, 16, 19, .9), rgba(16, 16, 19, 0)); }
.sv-facade-label b { font-size: 18px; font-weight: 500; }
.sv-facade-label span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(250, 250, 244, .7); }
@media (min-width: 1024px) { .sv-facade-wrap { padding: 40px; } .sv-facade-play { width: 112px; height: 112px; } .sv-facade-play .sv-px { width: 48px; height: 48px; } }

/* ---------- Prossima produzione ------------------------------------------------- */
.sv-nextbig { display: grid; gap: 24px; padding: 48px 16px; transition: background-color .2s; }
.sv-nextbig-text { display: flex; flex-direction: column; gap: 14px; }
.sv-nextbig-title { font-size: clamp(40px, 6vw, 116px); line-height: .92; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.sv-nextbig-meta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sv-nextbig-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.sv-nextbig-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.sv-nextbig:hover { background: var(--soft); }
.sv-nextbig:hover .sv-nextbig-media img { transform: scale(1.04); }
.sv-nextbig:hover .sv-nextbig-title { color: var(--sx-video); }
.sv-nextbig:focus-visible { outline-offset: -3px; }
@media (min-width: 1024px) { .sv-nextbig { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 48px; padding: 96px 40px; } }

/* ---------- Live ------------------------------------------------------------------ */
.sv-hero {
  --text: var(--sx-paper); --text-2: rgba(250, 250, 244, .72); --btn: var(--sx-paper); --btn-text: var(--sx-ink); --soft: rgba(250, 250, 244, .12); --focus: var(--sx-lime);
  position: relative; overflow: hidden; background: var(--sx-ink); color: var(--sx-paper); border-bottom: 1px solid var(--rule);
}
.sv-hero--live { min-height: min(64svh, 640px); }
.sv-hero .sv-corner--tl, .sv-hero .sv-corner--tr { top: 64px; }
.sv-hero .sv-corner--tl { left: var(--pad); } .sv-hero .sv-corner--tr { right: var(--pad); }
.sv-hero .sv-corner--bl { top: 82px; bottom: auto; left: var(--pad); }
.sv-hero-grid { position: relative; z-index: 2; max-width: 1728px; margin-inline: auto; display: grid; align-content: end; min-height: inherit; padding: 112px 16px 32px; }
.sv-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sv-hero .sv-lead { color: rgba(250, 250, 244, .84); }
@media (min-width: 1024px) { .sv-hero-grid { padding: 136px 40px 56px; } }
.sv-live-band { display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-live-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 56px 16px; }
.sv-signal { position: relative; min-height: 280px; overflow: hidden; background: #0B0B0D; border-top: 1px solid var(--rule); color: var(--sx-paper); }
.sv-signal p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 10px; background: var(--sx-ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sv-signal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.sv-stage--signal { background: #0B0B0D; }
@media (min-width: 1024px) {
  .sv-live-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sv-live-copy { justify-content: center; padding: 96px 40px; }
  .sv-signal { min-height: 480px; border-top: 0; border-left: 1px solid var(--rule); }
}
.sv-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 48px 16px 56px; }
.sv-empty .sv-body { max-width: 640px; }
.sv-404 { padding-top: 144px; padding-bottom: 120px; }
@media (min-width: 1024px) { .sv-empty { padding: 72px 40px 80px; } .sv-404 { padding-top: 200px; } }
.sv-live-list { grid-template-columns: 1fr; }
.sv-live-item { display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-live-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sv-live-item > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
@media (min-width: 1024px) { .sv-live-item { grid-template-columns: 5fr 7fr; } }

/* ---------- Contatti -------------------------------------------------------------- */
.sv-contact { display: grid; grid-template-columns: minmax(0, 1fr); }
.sv-contact-copy { display: flex; flex-direction: column; gap: 24px; padding: 112px 16px 48px; }
.sv-contact-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.sv-contact-list li { display: flex; flex-direction: column; gap: 4px; font-size: 18px; }
.sv-contact-list a { text-decoration: underline; text-underline-offset: 4px; }
.sv-form { display: flex; flex-direction: column; gap: 20px; padding: 40px 16px 56px; border-top: 1px solid var(--rule); }
.sv-form label > span, .sv-form legend { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sv-form input:not([type="radio"]), .sv-form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; }
.sv-form textarea { resize: vertical; }
.sv-form fieldset { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-form legend { width: 100%; }
.sv-radio { position: relative; }
.sv-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sv-radio span { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 6px; background: var(--soft); font-size: 14px; font-weight: 500; }
.sv-radio input:checked + span { background: var(--btn); color: var(--btn-text); }
.sv-radio input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.sv-form-error { color: var(--sx-coral); font-size: 14px; }
.sv-form .sv-btn { align-self: flex-start; }
@media (min-width: 1024px) {
  .sv-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sv-contact-copy { padding: 176px 40px 96px; }
  .sv-form { padding: 176px 40px 96px; border-top: 0; border-left: 1px solid var(--rule); }
}

/* ---------- Player a tutto schermo ----------------------------------------------- */
.sv-player { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #050506; color: var(--sx-paper); }
.sv-player[open] { display: grid; grid-template-rows: 48px minmax(0, 1fr) auto; }
.sv-player::backdrop { background: rgba(0, 0, 0, .9); }
.sv-player-bar { display: flex; align-items: stretch; border-bottom: 1px solid rgba(250, 250, 244, .12); }
.sv-player-title { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 16px; margin-right: auto; white-space: nowrap; overflow: hidden; }
.sv-player-title b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.sv-player-title span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(250, 250, 244, .6); }
.sv-player-kind { padding: 2px 6px; background: var(--sx-video); color: var(--sx-ink) !important; }
.sv-player-btn { display: none; align-items: center; gap: 8px; padding: 0 16px; border-left: 1px solid rgba(250, 250, 244, .12); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sv-player-btn:hover { background: rgba(250, 250, 244, .08); }
.sv-player-close { display: grid; place-items: center; width: 48px; padding: 0; }
.sv-player-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.sv-player-stage iframe, .sv-player-stage video { width: 100%; height: 100%; border: 0; background: #000; }
.sv-player-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sv-player:is([data-kind="youtube"], [data-kind="vimeo"], [data-kind="file"], [data-kind="playlist"]) .sv-player-stage :is(iframe, video) { width: min(100%, calc((100dvh - 96px) * 16 / 9)); height: auto; aspect-ratio: 16 / 9; }
.sv-player-note { padding: 12px 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(250, 250, 244, .5); border-top: 1px solid rgba(250, 250, 244, .12); }
.sv-player :focus-visible { outline-color: var(--sx-lime); outline-offset: -3px; }
@media (min-width: 768px) { .sv-player-btn { display: inline-flex; } }
html.sv-playing { overflow: hidden; }

/* ---------- Modalità TV e telecomando --------------------------------------------- */
:root[data-tv] { --pad: 48px; }
:root[data-tv] .sv-nav-links, :root[data-tv] .sv-nav-end .sv-btn { display: flex; }
:root[data-tv] .sv-menu-btn { display: none; }
:root[data-tv] .sv-reticle, :root[data-tv] .sv-cursor { display: none; }
:root[data-tv] .sv-marquee-track { animation: none; }
:root[data-tv] .sv-sala { height: 100svh !important; --z: 0 !important; }
:root[data-tv] .sv-shot { width: 30vw; }
/* In TV le scene stanno sotto il testo: dal bottone principale la freccia giù porta alla riga delle scene */
:root[data-tv] .sv-strip-rail { display: block !important; padding: 112px var(--pad) 48px; }
:root[data-tv] .sv-strip-shots { margin-top: 40px; }
:root[data-tv] :focus-visible, :root.sv-keys :focus-visible { outline: 4px solid var(--sx-lime); outline-offset: -4px; }
:root[data-tv] .sv-btn:focus-visible, :root.sv-keys .sv-btn:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 8px rgba(182, 243, 107, .18); }
:root[data-tv] .sv-item-link:focus-visible .sv-item-title { color: var(--sx-lime); }

/* ---------- Movimento ridotto: tutto visibile e fermo ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sv-marquee-viewport { overflow-x: auto; }
  .sv-stage-canvas { display: none; }
  .sv-stage .sv-stage-img { opacity: 1 !important; }
  .sv-reticle, .sv-cursor { display: none !important; }
  .sv-sala { height: auto !important; --z: 0 !important; }
}