/* Home di spun.video: le produzioni su una pellicola 3D, titolo e descrizione sotto (docs/CONCEPT.md, DV-017, DV-021).
   Palco scuro, linguaggio SPUN: Instrument Sans, Space Mono, tessere pixel, coral per l'azione principale. */

.dk {
  --bg: #060607; --text: var(--sx-paper); --text-2: rgba(250, 250, 244, .7); --rule: rgba(250, 250, 244, .18);
  --btn: var(--sx-coral); --btn-text: var(--sx-ink); --soft: rgba(250, 250, 244, .1); --soft-2: rgba(250, 250, 244, .2); --focus: var(--sx-lime);
  position: relative; min-height: 100svh; padding-top: 48px; color: var(--text);
  background: radial-gradient(90% 60% at 50% 36%, #17171c 0%, #060607 72%) var(--bg);
}
html.dk-open { overflow: hidden; }
.dk .sv-sq--paper { box-shadow: inset 0 0 0 1px rgba(250, 250, 244, .3); }
.dk-soon { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border-radius: 4px; background: var(--sx-paper); color: var(--sx-ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.dk-soon::before { content: ""; width: 6px; height: 6px; background: var(--sx-lime); box-shadow: 0 0 0 1px var(--sx-ink); }
.dk-soon--big { height: 48px; padding: 0 16px; border-radius: 6px; background: var(--sx-ink); color: var(--sx-paper); font-size: 12px; }

/* ---------- Pellicola ------------------------------------------------------------ */
.fs { position: relative; height: calc(100svh - 48px); min-height: 600px; overflow: hidden; }
.fs-stage { position: absolute; inset: 0; }
.fs-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.fs-canvas:active { cursor: grabbing; }

/* Copertina ferma (senza WebGL, movimento ridotto, TV): una cornice di pellicola in CSS */
.fs-still { position: absolute; left: 0; right: 0; top: 0; bottom: var(--fs-reserve, 280px); display: grid; place-items: center; padding: 24px 16px; }
.fs-film {
  width: min(88vw, 1040px, calc((100svh - 48px - var(--fs-reserve, 280px) - 48px) * 1.62)); padding: 4.4% 2.6%; border-radius: 4px; cursor: pointer;
  background-color: #0b0b0d;
  background-image: repeating-linear-gradient(90deg, transparent 0 12px, rgba(226, 226, 220, .85) 12px 26px, transparent 26px 40px),
                    repeating-linear-gradient(90deg, transparent 0 12px, rgba(226, 226, 220, .85) 12px 26px, transparent 26px 40px);
  background-size: 100% 10px, 100% 10px; background-position: 0 1.6%, 0 98.4%; background-repeat: no-repeat;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
}
.fs-film img, .fs-film .sv-ph { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; }

.fs-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px 16px; text-align: center; pointer-events: none; }
.fs-copy > * { pointer-events: auto; }
.fs-logos { position: absolute; z-index: 2; top: 16px; right: 16px; display: flex; align-items: center; gap: 10px; }
.fs-logo { display: inline-flex; align-items: center; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .6)); }
.fs-logo img { display: block; width: auto; height: 28px; }
.fs-logo.is-plate { padding: 6px 10px; border-radius: 6px; background: var(--sx-paper); filter: none; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .8); }
.fs-logo.is-plate img { height: 20px; }
.fs-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.fs-title { max-width: 24ch; font-size: clamp(30px, min(3.4vw, 6svh), 60px); line-height: 1.02; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.fs-logline { max-width: 58ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.fs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.fs-actions .sv-btn--secondary { box-shadow: inset 0 0 0 1px rgba(250, 250, 244, .28); }
.fs-nav { display: flex; align-items: center; gap: 12px; }
.fs-arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 50%; color: var(--text); transition: border-color .2s, background-color .2s; }
.fs-arrow:hover { border-color: var(--text); background: var(--soft); }
.fs-count { min-width: 64px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fs-count b { font-weight: 400; color: var(--text); }
/* Riga legale della home: società, P.IVA, contatti e pagine legali quando esistono */
.fs-legal { font-family: var(--font-mono); font-size: 10px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: rgba(250, 250, 244, .5); }
.fs-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fs-legal a:hover { color: var(--text); }
@media (min-width: 1024px) {
  .fs-copy { gap: 12px; padding: 12px 40px 20px; }
  .fs-logos { top: 24px; right: 40px; }
  .fs-logo img { height: 36px; }
  .fs-logo.is-plate { padding: 8px 12px; }
  .fs-logo.is-plate img { height: 26px; }
  .fs-nav { position: absolute; right: 40px; bottom: 28px; } /* da 1024px il contatore va nell'angolo: più spazio alla pellicola */
  .fs-legal { position: absolute; left: 40px; bottom: 36px; text-align: left; }
}

/* Entrata dopo il setup e uscita verso la pagina */
.fs-copy, .fs-logos { transition: opacity .35s ease, transform .35s ease; }
.dk.is-booting .fs-copy, .dk.is-opening .fs-copy, .dk.is-booting .fs-logos, .dk.is-opening .fs-logos { opacity: 0; transform: translateY(14px); }

/* ---------- Setup pixel ----------------------------------------------------------- */
.dk-boot { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--bg); color: var(--sx-paper); transition: opacity .45s ease; }
.dk-boot.is-out { opacity: 0; pointer-events: none; }
.dk-boot-in { width: min(560px, 88vw); font-family: var(--font-mono); font-size: 13px; line-height: 24px; letter-spacing: .05em; text-transform: uppercase; }
.dk-boot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.dk-caret { width: 8px; height: 15px; background: var(--sx-paper); animation: dk-blink 1s steps(1, end) infinite; }
.dk-boot-lines { min-height: 96px; }
.dk-boot-lines li { display: flex; align-items: baseline; gap: 8px; color: rgba(250, 250, 244, .55); animation: dk-type .28s steps(6, end) both; }
.dk-boot-lines li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted rgba(250, 250, 244, .22); transform: translateY(-4px); }
.dk-boot-lines b { order: 2; font-weight: 400; color: var(--sx-paper); }
.dk-boot-bar { display: flex; align-items: center; gap: 12px; margin: 18px 0 20px; }
.dk-boot-blocks { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; flex: 1; }
.dk-boot-blocks i { height: 12px; background: rgba(250, 250, 244, .12); }
.dk-boot-blocks i.is-on { background: var(--sx-paper); }
.dk-boot-blocks i.is-on:last-of-type, .dk-boot-blocks.is-full i { background: var(--sx-lime); }
.dk-boot-tiles { display: flex; flex-wrap: wrap; gap: 6px; min-height: 62px; }
.dk-boot-tile { width: 24px; height: 24px; background: rgba(250, 250, 244, .12); transform: scale(.35); transition: transform .24s steps(3, end), background-color .24s steps(3, end); }
.dk-boot-tile.is-in { transform: scale(1); }
.dk-boot-skip { margin-top: 22px; font-size: 11px; color: rgba(250, 250, 244, .5); }
.dk-flyer { position: fixed; z-index: 70; transform-origin: 0 0; pointer-events: none; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
@keyframes dk-blink { 50% { opacity: 0; } }
@keyframes dk-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Apertura a tessere e pagina ----------------------------------------- */
.dk-tiles { position: fixed; inset: 0; z-index: 45; display: none; width: 100vw; height: 100vh; pointer-events: none; }
.dk-tiles.is-on { display: block; }
/* Pagina chiara di default; .dk-page--dark per i film il cui logo-titolo rende meglio sul nero (page_theme, DV-021) */
.dk-page {
  --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);
  position: fixed; inset: 48px 0 0 0; z-index: 30; overflow-y: auto; background: var(--bg); color: var(--text);
}
.dk-page--dark {
  --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, .07); --soft-2: rgba(250, 250, 244, .13); --focus: var(--sx-lime);
  color-scheme: dark;
}
.dk-page.is-prep { visibility: hidden; }
/* Scheda /produzioni/<slug>/: la stessa pagina, nel flusso invece che sopra la pellicola (DV-022) */
.dk-page--static { position: relative; inset: auto; z-index: auto; overflow: visible; min-height: 100svh; padding-top: 48px; }
/* Testata sopra la foto: categoria e titolo. Il logo-titolo sta sotto la foto, prima del testo (Eugenio, 15/09) */
.dk-page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 1360px; margin: 0 auto; padding: 28px 80px 28px 16px; }
.dk-page-close { position: fixed; z-index: 35; top: 64px; right: 16px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 6px; background: var(--sx-paper); color: var(--sx-ink); box-shadow: 0 10px 30px -12px rgba(16, 16, 19, .5); }
.dk-page-close:hover { background: var(--sx-ink); color: var(--sx-paper); }
.dk-page--dark .dk-page-close:hover { background: var(--sx-coral); color: var(--sx-ink); }
.dk-page-cover { position: relative; height: min(58svh, 620px); overflow: hidden; background: var(--sx-ink-2); }
.dk-page-cover img, .dk-page-cover .sv-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dk-page-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 1360px; margin: 0 auto; padding: 32px 16px 96px; }
.dk-page.is-open .dk-page-body { animation: dk-rise .5s cubic-bezier(.2, .8, .2, 1) .08s both; }
.dk-page-main { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.dk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.dk-when { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--text-2); }
.dk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dk-page--dark .dk-soon--big { background: var(--sx-paper); color: var(--sx-ink); }
.dk-page-title { font-size: clamp(40px, 5vw, 88px); line-height: .95; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
/* Logo-titolo del tour, solo nella pagina (DV-018): tassello solo se il logo non si legge sul fondo della pagina */
.dk-page-titlelogo { display: block; width: auto; max-width: min(520px, 90%); max-height: 140px; height: auto; }
.dk-page-titlelogo.is-plate { padding: 14px 18px; border-radius: 6px; background: var(--sx-ink); }
.dk-page--dark .dk-page-titlelogo.is-plate { background: var(--sx-paper); }
.dk-page-main > .dk-page-titlelogo { margin-bottom: 10px; }
.dk-page-logline { max-width: 40ch; font-size: 20px; line-height: 28px; color: var(--text-2); }
.dk-page-label { margin-top: 24px; }
.dk-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; width: 100%; }
.dk-scene { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; text-align: left; color: inherit; }
.dk-scene img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--surface); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.dk-scene:hover img { transform: translateY(-3px); }
.dk-scene span { font-family: var(--font-mono); font-size: 11px; line-height: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.dk-page-lead { max-width: 62ch; margin-top: 24px; font-size: 20px; line-height: 30px; }
.dk-page-text { max-width: 62ch; font-size: 16px; line-height: 26px; color: var(--text-2); }
.dk-page-side { display: flex; flex-direction: column; gap: 12px; }
.dk-page-logos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
/* Loghi dei partner: sulla pagina chiara i file "dark" vanno su un tassello ink, su quella scura gli altri su un tassello paper */
.dk-logo { display: inline-flex; align-items: center; height: 64px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); }
.dk-logo img { display: block; width: auto; max-width: 220px; max-height: 36px; }
.dk-logo.is-plate { border-color: var(--sx-ink); background: var(--sx-ink); }
.dk-page--dark .dk-logo.is-plate { border-color: var(--sx-paper); background: var(--sx-paper); }
.dk-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.dk-facts dt { font-family: var(--font-mono); font-size: 11px; line-height: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.dk-facts dd { margin: 0; font-size: 15px; line-height: 22px; }
.dk-facts a { text-decoration: underline; text-underline-offset: 3px; }
.dk-actions .sv-soon { color: var(--text); }
/* Solo movimento, senza opacità: se l'animazione si ferma (scheda nascosta) il testo resta visibile (DESIGN.md §5). */
@keyframes dk-rise { from { transform: translateY(32px); } to { transform: none; } }
@media (min-width: 1024px) {
  .dk-page-close { right: 40px; }
  .dk-page-head { padding: 48px 120px 36px 40px; }
  .dk-page-body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; padding: 48px 40px 120px; }
  .dk-page-side { position: sticky; top: 24px; align-self: start; }
}

.dk-fallback { padding: 120px 40px; display: grid; gap: 8px; font-size: 24px; }

/* ---------- Movimento ridotto: copertina ferma, niente setup né spostamenti -------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-copy { transition: none !important; }
  .dk-boot { display: none !important; }
}