/* film.css: le pagine "a film" (cambio-server.html, servizi.html). Si carica DOPO shell.css e PRIMA del css della pagina.
   Schermo largo: il mondo 3D occupa tutto lo schermo e il testo scorre sopra, in schede a sinistra (il soggetto della scena sta a destra).
   Telefono e schermo stretto: la scena sta ferma in alto (58% dello schermo), il testo scorre sotto e ci passa dietro.
   Ogni "battuta" (.cs-beat, con data-scene) e' un tratto di scorrimento: mentre la sua scheda sale, la scena cambia (lo script della pagina).
   Altezze: .cs-tall e .cs-long per le battute con piu' azione, .cs-title per i titoli di capitolo.
   Senza 3D o con movimento ridotto: la scena e' un'immagine ferma (.cs-still). */

:root { --scene-bg: #14171c; --stage-h: 58svh; }
body { background: var(--scene-bg); }
main { display: block; }

/* ---------- testi (come sulle altre pagine) ---------- */
.kicker { font: 650 var(--t-sm)/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: var(--s-2); }
h1 { font-size: var(--t-h1); line-height: 1.05; font-weight: 760; letter-spacing: -.025em; max-width: 16ch; text-wrap: balance; }
.sub { font-size: var(--t-lead); line-height: 1.5; max-width: 40ch; margin-top: var(--s-4); color: var(--fg-mute); text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: var(--s-5); }
.tel-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 650; text-underline-offset: .25em; font-variant-numeric: tabular-nums; }
.more { display: inline-block; padding-block: .6rem; font-weight: 650; color: var(--fg); text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.more::after { content: '→'; content: '→' / ''; display: inline-block; margin-left: .4rem; }
.more-row { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: var(--s-3); }

/* percorso */
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: var(--t-sm); color: var(--fg-mute); margin-bottom: var(--s-4); }
.crumb li + li::before { content: '›'; content: '›' / ''; margin-right: .5rem; color: var(--fg-mute); }
.crumb a { color: var(--fg); text-underline-offset: .25em; }
.crumb [aria-current] { color: var(--fg-mute); }

/* ---------- la scena ---------- */
.cs-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--scene-bg); transition: opacity .5s var(--ease), visibility .5s; }
.cs-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s var(--ease); }
.s3d-on .cs-stage canvas { opacity: 1; }
/* l'immagine ferma (senza 3D, movimento ridotto, 3D in ritardo): sullo schermo largo sta solo nella parte libera, a destra delle schede e sotto la barra
   (revisione n.101). A tutto schermo le immagini quadrate 1200x1200 diventavano 1440x1440: il soggetto finiva sotto la scheda e le nuvolette sotto la barra.
   Il bordo sinistro segue la scheda piu' larga (la testa, 36rem, piu' 1.5rem di aria) e non scende sotto il 41% dello schermo, come la parte libera che
   inquadra il 3D (servizi.js). Cover con il punto al 70%, non al centro: le immagini di Chi siamo hanno il soggetto a destra (Noah al capo del tavolo).
   Il bordo sinistro sfuma nel fondo della scena: tagliata netta, un'immagine chiara (l'ufficio, il poster del 2016) sembrava un pannello appoggiato */
.cs-still { --still-x: max(41%, calc(var(--pad) + 37.5rem)); position: absolute; top: var(--bar-h); left: var(--still-x); width: calc(100% - var(--still-x)); height: calc(100% - var(--bar-h)); object-fit: cover; object-position: 70% 50%; mask-image: linear-gradient(90deg, transparent, #000 4rem); opacity: 0; transition: opacity .6s var(--ease); }
.cs-still.on { opacity: 1; }
/* nei poster 16:10 il soggetto sta tra il 51% e il 92% della larghezza (il server, la fattura di InfoTime): il ritaglio toglie quasi tutto a sinistra.
   Fuori dalla media query di proposito: anche sul telefono la scena in alto e' quasi quadrata, e al 60% della regola del telefono il server del 2026
   toccava il bordo destro; all'85% sta intero, con aria intorno */
.cs-still[width="1600"] { object-position: 85% 50%; }
/* le due immagini larghe, lavori-tutti (1200x662) e la mappa di servizi (1200x900), stanno sempre intere, come le inquadra il 3D all'apertura: i due
   plastici, la mappa tutta. In cover nella parte libera, piu' alta che larga, se ne vedeva la meta' (a 1440x900 il 52% di lavori e il 71% della mappa:
   l'officina e la sede tagliate al bordo destro, lo studio fuori), sul telefono il 50% e il 68%. Si riconoscono dal file: la regola delle immagini
   quadrate qui sotto guarda solo width="1600", e nell'HTML hanno le loro misure vere (1200x662, 1200x900). Il loro fondo e' quello della scena: sopra e
   sotto non si vede dove finiscono */
.cs-still:is([src$="/lavori-tutti.webp"], [data-src$="/lavori-tutti.webp"], [src$="/mappa.webp"], [data-src$="/mappa.webp"]) { object-fit: contain; }
/* parte libera piu' alta che larga (1024x768, 1280x1024, 4:3; e il 16:10 sotto i 1440 px, 1280x800): in cover l'immagine quadrata perdeva un terzo dei
   lati e il soggetto con lei (la nuvoletta della chiavetta in cnc, una delle due caselle di posta in lavori; a 1280x800 un settimo, e la nuvoletta
   finiva nella sfumatura). Qui sta intera, larga quanto la parte libera e al centro in altezza.
   I poster 16:10 (width 1600: cambio del server, InfoTime) restano in cover: hanno gia' il soggetto a destra, e interi sarebbero una striscia.
   Ma qui la finestra e' stretta (383 px a 1024x768) e all'85% la fattura di InfoTime perdeva l'inizio («ttura») e il server del 2016 il fianco
   sinistro: all'80% stanno dentro tutti e due. Per lo stesso motivo la sfumatura a sinistra non supera l'8% della parte libera: 4rem ne erano
   un sesto, e ci finiva il titolo della fattura */
@media (min-width: 60rem) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2), (min-width: 60rem) and (max-width: 74.99rem) and (min-aspect-ratio: 1/1), (min-width: 75rem) and (max-width: 89.99rem) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 16/10) {
  .cs-still:not([width="1600"]) { object-fit: contain; }
  .cs-still[width="1600"] { object-position: 80% 50%; }
  .cs-still { mask-image: linear-gradient(90deg, transparent, #000 min(4rem, 8%)); }
}
.s3d-on .cs-still { opacity: 0; }
/* mentre il 3D sta arrivando (~1-1.5 s) niente immagine ferma: si vedrebbe un'immagine diversa (e ingrandita) e poi la scena che si costruisce.
   Se tarda piu' di 5 s (.cs-slow, dallo script della pagina) l'immagine torna */
.s3d:not(.s3d-on):not(.cs-slow) .cs-still { opacity: 0; transition: none; }
.cs-past .cs-stage { opacity: 0; visibility: hidden; }

/* ---------- le battute e le schede ---------- */
/* --film-len: quanto si allunga lo scorrimento di ogni battuta (piu' lungo = la scena va piu' piano sotto la rotellina). 8 ott 2026, Noah: «anche
   scorrendo piano l'animazione va troppo veloce», su tutte le pagine a film (come era gia' successo a Chi siamo, --cs-len). La testa non e' una battuta
   (nessun data-scene) e resta alta uno schermo. Con le battute lunghe, sullo schermo largo la scheda resta ferma mentre la scena va avanti (sotto) */
:root { --film-len: 1.8; }
.cs { position: relative; z-index: 1; }
.cs-beat { min-height: calc(100svh * var(--film-len)); display: grid; align-items: center; padding: calc(var(--bar-h) + 1.5rem) var(--pad) 1.5rem; }
.cs-tall { min-height: calc(135svh * var(--film-len)); }
.cs-long { min-height: calc(160svh * var(--film-len)); }
.cs-title { min-height: calc(85svh * var(--film-len)); }
.cs-beat.cs-hero { min-height: 100svh; }
/* la scheda ferma: in alto sotto la barra; se e' piu' alta dello schermo si ferma solo quando se ne vede il fondo (prima scorre e si legge la parte alta).
   --ch = l'altezza della scheda (shell.js). (:where: Chi siamo ha le sue schede ferme, piu' in basso, e le sue regole vincono) */
@media (min-width: 60rem) and (min-aspect-ratio: 1/1) {
  .cs-beat:not(.cs-hero) { align-items: start; }
  :where(.cs-beat:not(.cs-hero)) > .cs-card { position: sticky; top: min(calc(var(--bar-h) + 1.5rem), calc(100svh - var(--ch, 0px) - 1.5rem)); }
}
.cs-card { width: min(100%, 31rem); padding: clamp(1.4rem, 2.6vw, 2.1rem); border-radius: 1.4rem; background: rgb(20 23 28 / .9); border: 1px solid rgb(245 243 238 / .1); box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / .45); }
.cs-hero .cs-card { width: min(100%, 36rem); }
.cs-wide .cs-card { width: min(100%, 35rem); }
.cs-card h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 720; letter-spacing: -.02em; text-wrap: balance; }
.cs-card h3 { font-size: var(--t-step); line-height: 1.25; font-weight: 680; letter-spacing: -.01em; text-wrap: balance; }
.cs-card > p:not(.kicker):not(.more-row):not(.note):not(.cs-lab):not(.sub) { font-size: var(--t-lead); line-height: 1.5; margin-top: var(--s-3); color: var(--fg-mute); text-wrap: pretty; }
.cs-steps ol { list-style: none; }
.cs-n { display: block; font-family: var(--pixel); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--cyan); margin-bottom: .6rem; }

.note { font-size: var(--t-sm); color: var(--fg-mute); margin-top: var(--s-3); }

/* domande: fondo pieno, la scena e' finita */
.cs-faq { position: relative; z-index: 3; background: var(--scene-bg); padding: clamp(4rem, 12vh, 7rem) var(--pad); border-top: 1px solid rgb(245 243 238 / .1); }
.cs-faq-in { max-width: 44rem; }
.cs-faq h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 720; letter-spacing: -.02em; text-wrap: balance; margin-bottom: var(--s-4); }
.cs-faq details { border-top: 1px solid rgb(245 243 238 / .12); }
.cs-faq details:last-of-type { border-bottom: 1px solid rgb(245 243 238 / .12); }
.cs-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .75rem 0; font: 650 var(--t-lead)/1.35 var(--font); cursor: pointer; list-style: none; }
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary::after { content: '+'; content: '+' / ''; font-size: 1.5rem; line-height: 1; color: var(--cyan); transition: transform .25s var(--ease); flex: none; }
.cs-faq details[open] summary::after { transform: rotate(45deg); }
.cs-faq details p { font-size: var(--t-base); line-height: 1.55; color: var(--fg-mute); padding: 0 0 1rem; text-wrap: pretty; }
.foot { position: relative; z-index: 3; }

/* ---------- telefono e schermi stretti o alti: scena ferma in alto, testo sotto ---------- */
@media (max-width: 59.99rem), (max-aspect-ratio: 999/1000) {
  .cs-stage { inset: var(--bar-h) 0 auto 0; height: calc(var(--stage-h) - var(--bar-h)); z-index: 2; border-bottom: 1px solid rgb(245 243 238 / .1); }
  /* qui la scena e' tutta libera: l'immagine la riempie */
  .cs-still { inset: 0; width: 100%; height: 100%; object-position: 60% 50%; mask-image: none; }
  /* col Tab l'elemento col fuoco finiva sotto la scena ferma in alto, a meta' schermo (revisione n.98, WCAG 2.4.11): con scroll-padding-top il browser
     lo porta sotto la scena. Solo dove la scena e' fissa (.cs-stage): nei contatti e nelle pagine d'errore scorre via con la pagina */
  html:has(.cs-stage) { scroll-padding-top: calc(var(--stage-h) + 1rem); }
  /* le ancore della testa (che ha la scena nel suo padding-top) e #mappa (il "Menu" senza JS) arrivano 1rem sotto la barra: con lo scroll-padding qui
     sopra il loro titolo finiva sotto lo schermo. Tutto il resto, battute comprese (dall'8 ott 2026 senza la scena nel padding-top, vedi sotto),
     arriva sotto la scena con lo scroll-padding */
  html:has(.cs-stage) :is(.cs .cs-hero[id], .cs section[id]:has(> .cs-hero:first-child), .foot-grid) { scroll-margin-top: calc(var(--bar-h) - var(--stage-h)); }
  /* (qui il testo scorre sotto la scena e di solito e' gia' piu' alto della battuta: si allunga meno) */
  :root { --film-len: 1.3; }
  /* la scheda resta ferma sotto la scena mentre la scena va avanti, come il testo della home; finita la battuta passa oltre. 8 ott 2026, Noah sul
     telefono: «non segue gli step ma mi fa scorrere vedendo anche delle parti vuote». Una scheda piu' alta dello spazio sotto la scena si ferma quando
     se ne vede il fondo: prima scorre e si legge la parte alta, che poi passa dietro la scena (--ch da shell.js; Chi siamo ha le sue regole, che vincono) */
  :where(.cs-beat:not(.cs-hero)) > .cs-card { position: sticky; top: min(calc(var(--stage-h) + 1rem), calc(100svh - var(--ch, 0px) - 1rem)); }
  /* la scheda ferma arriva subito dopo quella di prima: con lo spazio della scena in cima a ogni battuta, tra una scheda e l'altra passava mezzo
     schermo vuoto. La testa tiene lo spazio (riga sotto): e' la prima schermata, con la scena sopra */
  .cs-beat { min-height: calc(92svh * var(--film-len)); align-items: start; padding: 1.25rem var(--pad) 2rem; }
  .cs-tall { min-height: calc(120svh * var(--film-len)); }
  .cs-long { min-height: calc(140svh * var(--film-len)); }
  .cs-title { min-height: calc(70svh * var(--film-len)); }
  .cs-beat.cs-hero { min-height: 92svh; }
  .cs-hero { padding-top: calc(var(--stage-h) + 1.25rem); }
  .cs-card { width: 100%; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .cs-faq { z-index: 3; }
}
/* pagina senza 3D sul telefono: l'immagine ferma resta in alto come la scena */

@media (prefers-reduced-motion: reduce) {
  /* (immagini ferme al posto del 3D: niente da far andare piano, le battute tornano corte) */
  :root { --film-len: 1; }
  .cs-stage, .cs-stage canvas, .cs-still, .cs-faq summary::after { transition: none; }
}
@media (forced-colors: active) {
  .cs-card { border: 1px solid CanvasText; }
}