/* ============================================================================
   MESSA A REGISTRO — motion.css
   Il vocabolario di movimento, CHIUSO A OTTO. Nell'ordine del SISTEMA:

     1 · Messa a registro      5 · Segnatura
     2 · Passata di colore     6 · Deriva
     3 · Il disco              7 · Righello
     4 · Riga di piombo        8 · Tendina

   Nessun effetto fuori da questi otto. Nessuna animazione in loop infinito.
   Si anima SOLO transform / translate / scale / rotate / opacity / clip-path /
   background-color: mai width, height, top, left, margin, padding, font-size.
   Nessun listener di scroll, nessun rAF: scroll-timeline native dentro
   @supports; dove non ci sono, l'elemento resta fermo e la pagina è corretta.

   PROPRIETÀ (contratto §0.1). I comportamenti 4 (Riga di piombo, su
   .riga-titolo), 5 (Segnatura, su .segnatura/.cifra) e 7 (Righello, su
   .tacca) appartengono a `base`: qui se ne scrive soltanto il contesto che
   `layout` possiede davvero, e la sezione resta al suo posto nell'ordine.
   ========================================================================== */


/* ════════════════════════════════════════════════════════════════════════
   1 · MESSA A REGISTRO
   720ms lastra / 560ms immagine con 90ms di ritardo · var(--e-entrata)
   La lastra si allinea al foglio: contenitore e immagine convergono.
   Nessun blur. Solo transform e opacity.
   ═══════════════════════════════════════════════════════════════════════ */

/* Lo stato di partenza vive SOLO su chi riceverà .e-dentro (data-obs):
   .opera--vetrina, .opera--scheda e .opera--vicino non sono osservate e non
   devono mai restare invisibili. */
.opera[data-obs]{
  --ritardo: calc(var(--i, 0) * 80ms);
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.985);
  transition:
    opacity   var(--d-lunga) var(--e-entrata) var(--ritardo),
    transform var(--d-lunga) var(--e-entrata) var(--ritardo);
  will-change: transform, opacity;
}
.opera[data-obs].e-dentro{
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* L'immagine rientra da sinistra con 90ms di ritardo sul contenitore.
   Usa `translate` e non `transform`: `transform` resta libero per la Deriva. */
/* `.con-js` non è pignoleria: da quando index.html è pre-renderizzato, le
   tavole SONO nel documento anche senza JavaScript, e senza questa guardia
   resterebbero tutte a opacity 0 sopra il proprio placeholder — un portfolio
   di lastre sfocate. Il CONTRATTO §20 lo dice da sempre: in `.senza-js` il
   CSS non nasconde contenuto. Prima la regola era innocua perché senza JS
   non c'era nessuna immagine in pagina; ora non lo è più. */
.con-js .lastra__img{
  opacity: 0;
  transition:
    opacity var(--d-media) var(--e-entrata) calc(var(--ritardo, 0ms) + 90ms),
    filter  var(--d-micro) var(--e-scatto);
}
.opera[data-obs] .lastra__img{
  translate: -14px 0;
  transition:
    opacity   var(--d-media) var(--e-entrata) calc(var(--ritardo) + 90ms),
    translate var(--d-media) var(--e-entrata) calc(var(--ritardo) + 90ms),
    filter    var(--d-micro) var(--e-scatto);
}
.lastra__img.e-carica{ opacity: 1 }
.opera[data-obs].e-dentro .lastra__img{ translate: 0 0 }

/* .e-rotta (engine.immagini, CONTRATTO §20): il src è fallito e l'engine
   aggiunge .e-carica insieme a .e-rotta. Senza questa regola l'immagine
   arriverebbe a opacity 1 senza sorgente — icona rotta o testo alternativo
   sopra il LQIP. Il contratto dice «resta il LQIP»: allora resta il LQIP. */
.lastra__img.e-rotta{ opacity: 0 }

/* --- 1.1 l'arrivo dell'insegna. Totale ~1.7s, poi la hero è ferma. --- */

/* 0ms · le 11 hairline si disegnano dall'alto, stagger 40ms da sinistra */
.insegna__griglia i{
  opacity: .08;
  transform: scaleY(0);
  transform-origin: 50% 0;
  animation: registro-filo 700ms var(--e-entrata) both;
  animation-delay: calc(var(--n) * 40ms);
}
@keyframes registro-filo{
  from{ transform: scaleY(0) }
  to  { transform: scaleY(1) }
}

/* 620ms · il disco. Nessuna rotazione d'ingresso: il disco gira solo se scrolli.
   Sta su `transform`, così `translate`/`scale`/`rotate` restano alla corsa. */
@keyframes disco-arrivo{
  from{ transform: scale(.86); opacity: 0 }
  to  { transform: scale(1);   opacity: 1 }
}

/* 760ms · le tre lastre della vetrina, stagger 80ms.
   L'opacità sta sulla .lastra perché su .opera--vetrina il transform e
   l'opacity sono già impegnati dalla consegna verso l'indice (§1.2). */
.opera--vetrina > .lastra{
  animation: registro-vetrina var(--d-lunga) var(--e-entrata) both;
}
.opera--vetrina[data-slot="1"] > .lastra{ animation-delay: 760ms }
.opera--vetrina[data-slot="2"] > .lastra{ animation-delay: 840ms }
.opera--vetrina[data-slot="3"] > .lastra{ animation-delay: 920ms }
@keyframes registro-vetrina{
  from{ opacity: 0; translate: -14px 26px }
  to  { opacity: 1; translate: 0 0 }
}

/* 900ms · il filo di piede (qui solo il contenitore, che è di layout) */
.insegna__piede{
  animation: registro-piede 420ms var(--e-entrata) 900ms both;
}
@keyframes registro-piede{
  from{ opacity: 0; transform: translate3d(0, 8px, 0) }
  to  { opacity: 1; transform: none }
}

/* --- 1.2 la consegna: le tre lastre della vetrina vanno verso la prima riga
       dell'indice. Non c'è un fotogramma in cui si veda «la hero che finisce».
       Geometria approssimata in unità di colonna: il CSS non può misurare il
       rect di destinazione, e fra insegna e indice si interpone l'apertura. --- */
.opera--vetrina{
  --consegna-x: 0px;
  --consegna-y: 34dvh;
  --consegna-s: 2.38;   /* 1 / .42 — la lastra della vetrina è .42 di --riga */
  transform-origin: 100% 0;
}
.opera--vetrina[data-slot="1"]{ --consegna-x: calc(-9 * var(--passo)); --consegna-y: 30dvh }
.opera--vetrina[data-slot="2"]{ --consegna-x: calc(-5 * var(--passo)); --consegna-y: 36dvh }
.opera--vetrina[data-slot="3"]{ --consegna-x: calc(-1 * var(--passo)); --consegna-y: 42dvh }

/* --- 1.3 il crossfade della vetrina (variante di Messa a registro: stesso
       gesto, stessa curva). Due piani sovrapposti, app.js sposta .e-sopra. --- */
/* la specificità è deliberata: `.lastra__img.e-carica{opacity:1}` non deve
   accendere il piano che sta SOTTO, che l'engine carica comunque. */
.vetrina__piano.lastra__img:not(.e-sopra){
  opacity: 0;
}
.vetrina__piano{
  transform: scale(1.03);
  transition:
    opacity   700ms var(--e-entrata),
    transform 700ms var(--e-entrata);
}
.vetrina__piano.e-sopra.e-carica{
  opacity: 1;
  transform: none;
}

/* --- 1.4 le hairline della scheda tecnica: scaleX(0)→1 da sinistra --- */
.scheda-tecnica__riga::before{
  transform: scaleX(0);
  transition: transform var(--d-media) var(--e-entrata) calc(var(--i, 0) * 80ms);
}
.bio__titolo.e-dentro ~ .bio__scheda-tecnica .scheda-tecnica__riga::before{
  transform: scaleX(1);
}


/* ════════════════════════════════════════════════════════════════════════
   2 · PASSATA DI COLORE
   180ms in / 240ms out; crocini 220ms con stagger orario 40ms · var(--e-scatto)
   L'immagine NON si muove e la lastra NON si solleva: cambia solo l'apparato.
   Ogni :hover ha il gemello :focus-visible identico; su touch vale .e-attiva.
   ═══════════════════════════════════════════════════════════════════════ */

/* la hairline passa da --registro a --rosso-ink */
.lastra{
  transition: border-color var(--d-corta) var(--e-scatto);
}
/* `.scheda__vicino` è l'ANTENATO della .opera--vicino, non un suo discendente:
   il focus da tastiera atterra sull'<a> e né :focus-within sull'opera né
   :focus-visible sulla lastra (che lì è uno <span>) possono scattare. Senza il
   gemello, la Passata di colore della navigazione prec/succ valeva col mouse
   e non da tastiera — che è il divieto più esplicito del SISTEMA. */
.opera:hover .lastra,
.opera:focus-within .lastra,
.opera.e-attiva .lastra,
.lastra:focus-visible,
.lastra.e-attiva,
.scheda__vicino:focus-visible .lastra{
  border-color: var(--rosso-ink);
  transition-duration: var(--d-micro);
}

/* la lamina rossa sale da sotto, z-index SOTTO l'immagine: il rosso appare
   solo dietro e sotto il lavoro, mai sopra. Alta quanto il passe-partout,
   così la campitura resta ampiamente sotto il tetto del 2%. */
.lastra::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: max(var(--pad), 6px);
  z-index: 0;
  background-color: var(--rosso);
  transform: translateY(101%);
  transition: transform var(--d-corta) var(--e-scatto);
}
.opera:hover .lastra::after,
.opera:focus-within .lastra::after,
.opera.e-attiva .lastra::after,
.lastra:focus-visible::after,
.lastra.e-attiva::after,
.scheda__vicino:focus-visible .lastra::after{
  transform: translateY(0);
  transition-duration: var(--d-micro);
}

/* i crocini di registro, in CSS puro: due linear-gradient per angolo,
   croce 1px, braccio 12px. Zero SVG, zero immagini. */
.crocini i{
  color: var(--rosso-ink);
  background-image:
    linear-gradient(to right,  currentColor 0 100%),
    linear-gradient(to bottom, currentColor 0 100%);
  background-size: 100% 1px, 1px 100%;
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat;

  opacity: 0;
  transform: scale(.6);
  transition:
    opacity   240ms var(--e-scatto),
    transform 240ms var(--e-scatto);
}
.opera:hover .crocini i,
.opera:focus-within .crocini i,
.opera.e-attiva .crocini i,
.lastra:focus-visible .crocini i,
.lastra.e-attiva .crocini i,
.scheda__vicino:focus-visible .crocini i{
  opacity: 1;
  transform: scale(1);
  transition-duration: 220ms;
  transition-delay: calc(var(--k) * 40ms);
}
/* stagger orario: alto-sinistra → alto-destra → basso-destra → basso-sinistra */
.crocini i:nth-child(1){ --k: 0 }
.crocini i:nth-child(2){ --k: 1 }
.crocini i:nth-child(3){ --k: 2 }
.crocini i:nth-child(4){ --k: 3 }

/* sull'opera nulla, o al massimo saturate(1.06). Mai un filtro di default. */
.opera:hover .lastra__img,
.opera:focus-within .lastra__img,
.opera.e-attiva .lastra__img,
.lastra:focus-visible .lastra__img,
.lastra.e-attiva .lastra__img,
.scheda__vicino:focus-visible .lastra__img{
  filter: saturate(1.06);
}


/* ════════════════════════════════════════════════════════════════════════
   3 · IL DISCO
   Legato allo scroll (linear: è un meccanismo, non un'animazione);
   520ms var(--e-entrata) per il cambio di stato discreto in fallback.
   Il disco si muove PIÙ del nome — disco −12dvh, nome −6dvh — così la B esce
   dal cerchio salendo: è il gesto del marchio, non un'animazione inventata.
   ═══════════════════════════════════════════════════════════════════════ */

/* fill `backwards` e non `both`: `disco-arrivo` anima `transform`, e con `both`
   resterebbe a imporre scale(1) dall'origine "animazione" per sempre — che nella
   cascata batte qualunque dichiarazione normale, compreso lo scale(5.55) del
   terzo stato (.e-chiusura), che così non entrava mai in vigore. A corsa finita
   il valore a riposo è comunque transform:none, opacity 1. */
.disco{
  animation: disco-arrivo var(--d-media) var(--e-entrata) 620ms backwards;
}

/* la corsa sta su `translate` + `scale` (proprietà individuali); `transform`
   resta libero per l'arrivo.
   NIENTE ROTAZIONE: il giro continuo legato allo scroll è stato tolto su
   richiesta. Il disco è il marchio, e un marchio che gira per tutta la
   scrollata si legge come storto, non come vivo. Il disco ora fa una cosa
   sola — rimpicciolisce e si aggancia in colonna 1 — e quella la fa bene. */
@keyframes disco-corsa{
  from{ translate: 0 0;                                        scale: 1 }
  to  { translate: var(--disco-sinistra) var(--disco-salita);  scale: var(--disco-scala) }
}

/* la griglia dichiarata muore entro il 30% del primo scroll e non torna mai */
@keyframes griglia-spegni{
  from{ opacity: .08 }
  to  { opacity: 0 }
}

/* il nome scala a .34 e trasla in alto a sinistra verso la testata sticky.
   Nessun cambio di font-size, nessun reflow: solo transform. */
@keyframes insegna-nome-corsa{
  from{ transform: translate3d(0, 0, 0) scale(1) }
  to  { transform: translate3d(calc(-1 * var(--passo)), -6dvh, 0) scale(.34) }
}

/* le tre lastre della vetrina verso il proprio slot nell'indice */
@keyframes vetrina-consegna{
  from{ transform: translate3d(0, 0, 0) scale(1); opacity: 1 }
  70% { opacity: 1 }
  to  { transform: translate3d(var(--consegna-x), var(--consegna-y), 0)
                   scale(var(--consegna-s));
        opacity: 0 }
}

@supports (animation-timeline: scroll()){

  .disco[data-modo="nativo"]{
    animation:
      disco-arrivo var(--d-media) var(--e-entrata) 620ms backwards,
      disco-corsa  linear both;
    animation-timeline: auto, scroll(root block);
    animation-range:    normal, 0 100vh;
  }

  /* Sotto 720px il disco non corre: resta l'arrivo, che è l'ingresso della
     hero, e sparisce la corsa verso la colonna 1 — colonna che a quella
     larghezza non esiste (layout §4). Senza questa riga il disco tornerebbe
     ad ancorarsi per via dell'animazione, qualunque cosa dica `position`. */
  @media (max-width: 719.98px){
    .disco[data-modo="nativo"]{
      animation: disco-arrivo var(--d-media) var(--e-entrata) 620ms backwards;
      animation-timeline: auto;
      animation-range: normal;
    }
  }

  .insegna__griglia i{
    animation:
      registro-filo   700ms var(--e-entrata) both,
      griglia-spegni  linear both;
    animation-delay: calc(var(--n) * 40ms), 0s;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0 30vh;
  }

  .insegna__nome{
    animation: insegna-nome-corsa linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }

  .opera--vetrina{
    animation: vetrina-consegna linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
}

/* Fallback: tre stati discreti commutati dall'osservatore unico, stessa curva.
   Nessun rAF di ripiego, nessun listener di scroll. */
.disco[data-modo="discreto"]{
  transition:
    translate 520ms var(--e-entrata),
    scale     520ms var(--e-entrata);
}
.disco[data-modo="discreto"].e-bullet{
  translate: var(--disco-sinistra) var(--disco-salita);
  scale: var(--disco-scala);
}
/* Il gemello mobile della regola qui sopra: niente aggancio, per le stesse
   ragioni del ramo nativo. L'engine continua a scrivere `.e-bullet` — non lo
   sa e non deve saperlo: dove metterlo è una decisione del layout. */
@media (max-width: 719.98px){
  .disco[data-modo="discreto"].e-bullet{
    translate: none;
    scale: none;
  }
}

/* Terzo stato: la chiusura nel colophon. Il disco torna a scala 1 e chiude la
   corsa — l'unica campitura rossa larga oltre alla hero. La compensazione
   `scale(5.55)` annulla lo .18 della corsa: 5.55 × .18 = 1. */
.disco{
  --chiusura-x: calc(4 * var(--passo));
  --chiusura-y: 26dvh;
}
.disco.e-chiusura{
  transform: scale(5.55) translate(var(--chiusura-x), var(--chiusura-y));
  transition: transform var(--d-lunga) var(--e-entrata);
}
/* Nel terzo stato la B esce di scena e resta il solo cerchio: qui il disco non
   fa più il marchio, fa la CAMPITURA — «chiude il cerchio letteralmente».
   Due ragioni concrete, oltre a quella dichiarata nel SISTEMA. La B fuori dal
   cerchio è --inchiostro su fondo --notte: sul blocco scuro non si legge come
   lettera, si legge come un rettangolo più chiaro, cioè come un errore. E la
   copia bianca dentro il cerchio finirebbe sotto il titolo bianco, che da qui
   in poi passa sopra il disco (base.css §6): bianco su bianco, e le lettere che
   ci cascano sopra sparirebbero. Il cerchio pieno non ha nessuno dei due
   problemi. */
.disco.e-chiusura .disco__b,
.disco.e-chiusura .disco__clip{
  opacity: 0;
  transition: opacity var(--d-media) var(--e-entrata);
}
/* Il giro si spegne solo dove esiste: nel ramo nativo. Nel ramo discreto la
   lista di animazioni è di UNA voce, e riscriverne tre qui dentro farebbe
   partire `disco-corsa` una volta sola a tempo, rimandando il disco in hero
   per la durata del ritardo. */
.disco[data-modo="nativo"].e-chiusura{
  animation-name: disco-arrivo, disco-corsa, none;
}


/* ════════════════════════════════════════════════════════════════════════
   4 · RIGA DI PIOMBO
   640ms, stagger 70ms per riga · var(--e-piombo)
   Ogni riga di titolo entra da translateY(.92em) rotate(1.2deg) dentro un
   clip-path: inset(0). La rotazione di 1.2° è la sola licenza figurativa.

   PROPRIETARIO: base — .riga-titolo (tipografia + Riga di piombo + Fuori
   registro). `layout` non scrive mai una dichiarazione che termina su
   .riga-titolo. Qui restano solo i contenitori, che sono di layout: non
   devono tagliare la riga che entra da sotto, né creare un contesto che
   annulli il clip degli span.
   ═══════════════════════════════════════════════════════════════════════ */

.insegna__nome,
.apertura__titolo,
.progetto__titolo,
.scheda__titolo,
.bio__titolo{
  overflow: visible;
  transform-style: flat;
}


/* ════════════════════════════════════════════════════════════════════════
   5 · SEGNATURA
   380ms per cifra, stagger 30ms da destra a sinistra · var(--e-scatto)
   Le cifre montano come i contatori meccanici di una macchina da stampa.
   Nessun conteggio incrementale: scorre solo la cifra finale.

   PROPRIETARIO: base — .segnatura / .segnatura__cifre / .cifra / .cifra__glifo.
   Qui restano solo i contenitori di layout che ospitano una segnatura, e che
   non devono ritagliarla né spostarla: la testa del progetto e la testa del
   rail sono inchiodate, come tutto l'apparato.
   ═══════════════════════════════════════════════════════════════════════ */

.progetto__testa,
.rail__testa{
  overflow: visible;
}
/* l'apparato non ha MAI parallasse: la profondità esiste perché qualcosa
   sta fermo. Nessuna Deriva, nessun transform, in nessuna condizione. */
.progetto__testa,
.rail__testa,
.progetto__meta,
.scheda__dati{
  transform: none;
}


/* ════════════════════════════════════════════════════════════════════════
   6 · DERIVA
   L'intera view() timeline della lastra · linear, obbligatoria
   L'immagine si sposta di ±3% in Y dentro il passe-partout. Due piani, mai
   tre. Cap duro al 3%. Nessun fallback: dove view() non c'è, l'immagine sta
   ferma e la pagina resta corretta. Non si scrive un rAF per una parallasse.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes deriva{
  from{ transform: translate3d(0, -3%, 0) }
  to  { transform: translate3d(0,  3%, 0) }
}

/* caso estremo della Deriva: il totem (ratio < 0.4). Non una lastra alta venti
   schermate, ma una lastra normale dentro cui l'immagine scorre. */
@keyframes scorri{
  from{ transform: translateY(0) }
  to  { transform: translateY(calc(-100% + var(--riga) - 2 * var(--pad))) }
}

@supports (animation-timeline: view()){
  @media (min-width: 720px){

    .opera[data-obs]:not(.opera--fascia):not(.opera--totem) .lastra__img{
      animation: deriva linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .lastra--totem .lastra__img{
      animation: scorri linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* Senza view(): il totem diventa un contenitore scorribile a mano, ancorato
   in alto. Il lavoro resta leggibile per intero, che è il punto. */
@supports not (animation-timeline: view()){
  .lastra--totem{
    overflow-y: auto;
    overscroll-behavior-block: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--registro) transparent;
  }
  .lastra--totem .lastra__img{ object-position: top }
}


/* ════════════════════════════════════════════════════════════════════════
   7 · RIGHELLO
   240ms per tacca; ingresso della barra 480ms con stagger 28ms · var(--e-scatto)
   23 tacche da 1px, una per progetto. La tacca attiva va a scaleY(2.4) in
   --rosso-ink, le due adiacenti a 1.6 in --grafite. Fa da orologio e da mappa.

   PROPRIETARIO: base — .righello / .tacca / .tacca__segno, e con essi la
   barra di controllo colore (.campione), che ha lo stesso ingresso
   scaleY(0)→1 con transform-origin: bottom. Nessuna dichiarazione di layout
   può terminare lì. `layout` non ha nulla da dichiarare in questo comportamento:
   la sezione resta nell'ordine perché l'ordine degli otto è la legge.
   ═══════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   8 · TENDINA
   640ms · var(--e-tendina); uscita della griglia 280ms var(--e-entrata),
   sovrapposta. FLIP puro dove non c'è View Transitions — engine.tendina.
   È l'UNICA transizione di vista del sito: nessun wipe, nessun disco che
   copre lo schermo. Continuità di stato, non taglio.
   ═══════════════════════════════════════════════════════════════════════ */

/* l'uscita della griglia mentre la scheda monta */
#indice,
#apertura,
#bio{
  transition:
    opacity   280ms var(--e-entrata),
    transform 280ms var(--e-entrata);
}
body.e-aperta #indice,
body.e-aperta #apertura,
body.e-aperta #bio{
  opacity: 0;
  transform: scale(.98);
}
body.e-aperta{ overflow: hidden }

/* la scheda entra con la stessa curva della Tendina */
.scheda{
  opacity: 0;
  transition: opacity var(--d-vista) var(--e-tendina);
}
body.e-aperta .scheda{ opacity: 1 }

/* L'uscita dei progetti esclusi dal filtro (CONTRATTO §7): 200ms di opacità,
   poi app.js scrive `hidden` + `inert`. La classe .e-esclusa era prevista dalla
   tabella degli stati e stilata solo sulla tacca del righello: senza questa
   regola i progetti filtrati sparivano di scatto. Stessa durata dichiarata dal
   contratto, così il setTimeout di app.js e la transizione finiscono insieme. */
.progetto{
  transition: opacity 200ms var(--e-entrata);
}
.progetto.e-esclusa{ opacity: 0 }

/* View Transitions: stessa durata e stessa curva del FLIP manuale, così i due
   rami sono indistinguibili. I dati mono restano FERMI e diventano
   l'intestazione della scheda. */
::view-transition-group(lastra-attiva),
::view-transition-old(lastra-attiva),
::view-transition-new(lastra-attiva),
::view-transition-group(dati-attivi),
::view-transition-old(dati-attivi),
::view-transition-new(dati-attivi){
  animation-duration: var(--d-vista);
  animation-timing-function: var(--e-tendina);
}
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 280ms;
  animation-timing-function: var(--e-entrata);
}


/* ════════════════════════════════════════════════════════════════════════
   SENZA JS — rete di sicurezza
   Il CSS non nasconde MAI contenuto quando app.js non parte: nessuna classe
   .e-dentro arriverà, quindi ogni stato di partenza va annullato qui.
   ═══════════════════════════════════════════════════════════════════════ */

html.senza-js .opera[data-obs],
html.senza-js .opera[data-obs] .lastra__img,
html.senza-js .lastra__img,
html.senza-js .vetrina__piano{
  opacity: 1;
  transform: none;
  translate: 0 0;
}
html.senza-js .scheda-tecnica__riga::before{ transform: scaleX(1) }
html.senza-js .insegna__griglia i{ opacity: .08; transform: scaleY(1) }


/* ════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION: REDUCE
   Contenuto COMPLETO, movimento spento. La hero è disegnata prima come
   immagine ferma e poi animata: se non regge da ferma, il sistema si regge
   sulle animazioni e va rifatto. Qui deve reggere.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){

  /* 1 · Messa a registro → tutto già a registro */
  .opera[data-obs],
  .opera[data-obs] .lastra__img,
  .insegna__piede,
  .opera--vetrina,
  .opera--vetrina > .lastra{
    opacity: 1;
    transform: none;
    translate: 0 0;
    scale: 1;
    animation: none;
    transition: opacity 200ms linear;
  }
  .lastra__img{ transition: opacity 200ms linear }
  .insegna__griglia i{ opacity: .08; transform: scaleY(1); animation: none }
  .scheda-tecnica__riga::before{ transform: scaleX(1); transition: none }

  /* il crossfade della vetrina sale a 8s e perde lo scale (app.js porta
     l'intervallo a 8000ms; qui cade solo il movimento) */
  .vetrina__piano{
    transform: none;
    transition: opacity 700ms linear;
  }

  /* 2 · Passata di colore → resta il segnale, cade il movimento */
  .lastra,
  .lastra::after,
  .crocini i,
  .lastra__img{
    transition-duration: 200ms;
    transition-timing-function: linear;
    transition-delay: 0ms;
  }
  .crocini i{ transform: none }
  .opera:hover .crocini i,
  .opera:focus-within .crocini i,
  .opera.e-attiva .crocini i,
  .lastra:focus-visible .crocini i,
  .lastra.e-attiva .crocini i,
  .scheda__vicino:focus-visible .crocini i{ transform: none; transition-delay: 0ms }

  /* 3 · Il disco → fermo nella sua posizione finale, non ruota mai */
  .disco,
  .disco[data-modo],
  .disco[data-modo="nativo"],
  .disco[data-modo="discreto"],
  .disco.e-chiusura,
  .insegna__nome{
    animation: none;
    transition: none;
    transform: none;
    translate: 0 0;
    rotate: 0turn;
    scale: 1;
    opacity: 1;
  }

  /* 6 · Deriva → 0. Il totem resta scorribile a mano. */
  .lastra__img,
  .lastra--totem .lastra__img{ animation: none }
  .lastra--totem{
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .lastra--totem .lastra__img{ object-position: top }

  /* 8 · Tendina → un fade, niente scale */
  #indice, #apertura, #bio{ transition: opacity 200ms linear }
  .progetto{ transition: none }
  body.e-aperta #indice,
  body.e-aperta #apertura,
  body.e-aperta #bio{ transform: none }
  .scheda{ transition: opacity 200ms linear }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation-duration: 200ms;
    animation-timing-function: linear;
  }
}