/* Libreria Petruccelli Parisi — MODALITA' STAGIONI.

   Si aggiunge a stile.css, temi.css e biblioteca.css e non ne cambia
   nemmeno una riga: a modalita' spenta il tema «biblioteca inglese antica»
   resta identico a come e' senza questo foglio.

   COME FUNZIONA
   1. L'interruttore (o il server, alla prima apertura) scrive un attributo
      sull'elemento <html>:
          <html data-stagione="natale">
      Tutte le regole di questo foglio e tutte le tavolozze stagionali di
      temi.css partono da html[data-stagione="..."]: senza quell'attributo
      non succede niente, quindi OFF riporta esattamente il tema inglese.
   2. I colori delle tredici ambientazioni NON stanno qui: stanno in
      temi.css, generato da strumenti/genera_aspetto.py insieme a tutti gli
      altri temi, cosi' ogni ambientazione dichiara le stesse variabili e il
      contrasto si puo' controllare con un conto solo.
      Qui ci sono le FORME: i pezzi che cadono o volano, gli elementi di
      scena, la neve sui riquadri, la fascia con l'interruttore.
   3. Le decorazioni sono elementi vuoti (<i class="pezzo ...">) dentro
      strati dedicati. Il copione assets/stagioni.js li crea e li conta.

   CONFINI RISPETTATI
   · Nessuna immagine, nessun carattere scaricato, nessuna risorsa esterna:
     ogni decorazione e' disegnata con gradienti, bordi e clip-path.
   · Gli strati decorativi hanno sempre pointer-events: none e stanno DIETRO
     al contenuto: non coprono mai una parola ne' un pulsante.
   · Niente lampeggio: le animazioni che cambiano opacita', luminosita' o
     colore durano almeno 2,5 secondi. Nessun suono, da nessuna parte.
   · Con «Riduci il movimento» o con prefers-reduced-motion le animazioni si
     fermano e restano decorazioni ferme; a pagina nascosta sono sospese.
   · Le posizioni dei singoli pezzi arrivano da variabili CSS scritte dal
     copione con style.setProperty: nel documento non c'e' nessun attributo
     style="...", quindi la Content-Security-Policy severa continua a valere.
*/

/* ===========================================================================
   1 · VALORI DI PARTENZA
   Le variabili usate dai pezzi hanno qui un valore sensato, cosi' il foglio
   e' valido anche prima che il copione scriva qualcosa. I valori veri di
   ogni ambientazione arrivano da temi.css.
   ========================================================================= */

:root {
  /* tinta della sala di lettura: «none» = sala invariata */
  --tinta-sala: none;
  --alone-sala: radial-gradient(900px 520px at 50% -6%, #f0d9a51f, #f0d9a500 70%);
  --neve: #f8fcff;
  --neve-ombra: #d6e6f7;
}

/* ===========================================================================
   2 · TESTI DI SERVIZIO DEL PANNELLO DI PROVA
   Dalla 1.4.0 nelle pagine del sito non c'e' nessun comando. La fascia con
   l'interruttore ON/OFF della 1.3.x e' stata rimossa, e con essa le sue
   regole (.fascia-stagioni, .fascia-dentro, .interruttore-stagioni): non
   esiste piu' nessun elemento che le possa usare.
   Quello che resta qui sotto serve al PANNELLO DI PROVA, che vive solo nella
   pagina riservata «Gestione → Stagioni» e nell'anteprima: il nome
   dell'ambientazione mostrata e l'annuncio per chi usa un lettore di schermo.
   ========================================================================= */

.variante-corrente {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 13px;
  color: var(--testo-tenue);
  text-align: right;
}
.variante-corrente .nome { color: var(--testo); font-size: 15px; }
.variante-corrente .modo {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accento-tenue);
}
/* l'annuncio per i lettori di schermo non deve occupare spazio */
.annuncio-stagioni {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- pannello di prova (solo pagina riservata e anteprima) --------------- */

.pannello-prova { margin: 14px 0 0; }
.pannello-prova h3 { margin-top: 0; }
.elenco-varianti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}
.elenco-varianti button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  background: var(--sfondo-bottone-2);
  color: var(--testo-bottone-2);
  border: 1px solid var(--bordo-campo);
  font-size: 14px;
}
.elenco-varianti button .periodo {
  font-size: 12px;
  color: var(--testo-tenue);
}
.elenco-varianti button[aria-pressed="true"] {
  border-color: var(--bordo-alto-pannello);
  border-left: 4px solid var(--bordo-alto-pannello);
}
/* tessera con i colori veri di un'ambientazione (pagina Stagioni) */
.tessera-ambientazione {
  border: 1px solid var(--bordo);
  border-top: 3px solid var(--bordo-alto-pannello);
  border-radius: 2px;
  padding: 10px 12px;
  background: var(--sfondo-pannello);
  color: var(--testo);
}
.tessera-ambientazione .campione { margin-top: 6px; }

/* ===========================================================================
   3 · STRATI DELLE DECORAZIONI
   Due posti, e basta:
     · .decori  — strato fisso a tutta pagina, dietro al contenuto. Si vede
       nei margini intorno al foglio di carta, nell'intestazione e nel fondo;
     · .strato-zona — dentro le tre zone di legno (intestazione, vetrina del
       catalogo, fondo pagina), dove le decorazioni si vedono sopra il legno
       ma sotto al testo, che il foglio alza di un livello.
   ========================================================================= */

.decori {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.decori .strato {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.strato-zona {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* la vetrina e' una griglia: senza questo lo strato verrebbe ridotto al
     suo contenuto invece di coprire tutto il riquadro */
  place-self: stretch;
}
html[data-stagione] body.inglese header,
html[data-stagione] body.inglese footer,
html[data-stagione] body.inglese .plancia { position: relative; overflow: hidden; }
/* Il contenuto delle zone di legno sale di un livello, cosi' le decorazioni
   gli restano sotto. Nella vetrina il bersaglio e' «ogni figlio», perche' i
   figli sono caselle di griglia senza un involucro unico: va escluso lo
   strato delle decorazioni, altrimenti erediterebbe position: relative e
   z-index: 1, diventerebbe una casella in flusso e i suoi pezzi, ancorati a
   una scatola di altezza zero, sparirebbero sotto overflow: hidden. */
html[data-stagione] body.inglese header > *,
html[data-stagione] body.inglese footer > *,
html[data-stagione] body.inglese .plancia > *:not(.strato-zona) {
  position: relative;
  z-index: 1;
}

/* il singolo pezzo: tutte le variabili hanno un valore di partenza */
.pezzo {
  --x: 50%;
  --y: 42%;
  --t: 16s;
  --r: 0s;
  --s: 9px;
  --o: .85;
  --d: 26px;
  --rot: 1.2turn;
  --c: var(--neve);
  --c2: var(--neve-ombra);
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  pointer-events: none;
}

/* ferme: movimento ridotto chiesto dal sistema o dall'interruttore */
@media (prefers-reduced-motion: reduce) {
  .decori .pezzo, .strato-zona .pezzo, .decori .pezzo::before, .decori .pezzo::after {
    animation: none !important;
  }
  .decori .cade, .strato-zona .cade { top: var(--y); opacity: var(--o); }
  .decori .fantasma { top: var(--y); bottom: auto; opacity: var(--o); }
}
body.quiete .pezzo,
body.quiete .pezzo::before,
body.quiete .pezzo::after { animation: none !important; }
body.quiete .cade { top: var(--y); opacity: var(--o); }
.decori.statico .pezzo,
.decori.statico .pezzo::before,
.decori.statico .pezzo::after { animation: none !important; }
.decori.statico .cade { top: var(--y); opacity: var(--o); }
.statico .pezzo, .statico .pezzo::before, .statico .pezzo::after { animation: none !important; }
.statico .cade { top: var(--y); opacity: var(--o); }
/* i pezzi che normalmente salgono dal basso, da fermi si posano alla loro
   altezza, invece di accatastarsi sul bordo inferiore */
.statico .fantasma, .decori.statico .fantasma, body.quiete .fantasma {
  top: var(--y);
  bottom: auto;
  opacity: var(--o);
}

/* pagina in secondo piano: le animazioni si fermano, non consumano niente.
   Le classi «statico» e «pausa» il copione le mette sia su #decori sia sul
   corpo, cosi' valgono anche per gli strati dentro i riquadri. */
.decori.pausa .pezzo,
.decori.pausa .pezzo::before,
.decori.pausa .pezzo::after,
.pausa .pezzo,
.pausa .pezzo::before,
.pausa .pezzo::after { animation-play-state: paused; }

/* ===========================================================================
   4 · MOVIMENTI
   Nessuna animazione che cambia opacita', luminosita' o colore scende sotto
   2,5 secondi: niente lampeggio.
   ========================================================================= */

@keyframes lpp-cade-piano {
  0%   { transform: translate3d(0, -16vh, 0); opacity: 0; }
  9%   { opacity: var(--o); }
  26%  { transform: translate3d(var(--d), 18vh, 0); }
  52%  { transform: translate3d(calc(var(--d) * -1), 48vh, 0); }
  78%  { transform: translate3d(var(--d), 78vh, 0); }
  91%  { opacity: var(--o); }
  100% { transform: translate3d(0, 118vh, 0); opacity: 0; }
}

@keyframes lpp-cade-ruota {
  0%   { transform: translate3d(0, -16vh, 0) rotate(0turn); opacity: 0; }
  9%   { opacity: var(--o); }
  32%  { transform: translate3d(var(--d), 26vh, 0) rotate(.38turn); }
  64%  { transform: translate3d(calc(var(--d) * -1), 62vh, 0) rotate(.86turn); }
  91%  { opacity: var(--o); }
  100% { transform: translate3d(var(--d), 118vh, 0) rotate(var(--rot)); opacity: 0; }
}

@keyframes lpp-cade-dondola {
  0%   { transform: translate3d(0, -16vh, 0) rotate(-14deg); opacity: 0; }
  9%   { opacity: var(--o); }
  35%  { transform: translate3d(var(--d), 30vh, 0) rotate(16deg); }
  70%  { transform: translate3d(calc(var(--d) * -1), 70vh, 0) rotate(-16deg); }
  91%  { opacity: var(--o); }
  100% { transform: translate3d(0, 118vh, 0) rotate(10deg); opacity: 0; }
}

/* caduta dentro un riquadro: misure in pixel, perche' il riquadro e' basso */
@keyframes lpp-cade-zona {
  0%   { transform: translate3d(0, -26px, 0); opacity: 0; }
  12%  { opacity: var(--o); }
  55%  { transform: translate3d(var(--d), 150px, 0); }
  88%  { opacity: var(--o); }
  100% { transform: translate3d(0, 340px, 0); opacity: 0; }
}

@keyframes lpp-attraversa {
  0%   { transform: translate3d(-16vw, 0, 0); opacity: 0; }
  11%  { opacity: var(--o); }
  48%  { transform: translate3d(44vw, -8vh, 0); }
  89%  { opacity: var(--o); }
  100% { transform: translate3d(120vw, 4vh, 0); opacity: 0; }
}

@keyframes lpp-sale {
  0%   { transform: translate3d(0, 16vh, 0) scale(.92); opacity: 0; }
  16%  { opacity: var(--o); }
  84%  { opacity: var(--o); }
  100% { transform: translate3d(var(--d), -26vh, 0) scale(1.08); opacity: 0; }
}

@keyframes lpp-galleggia {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}

@keyframes lpp-dondola {
  0%, 100% { transform: rotate(-1.4deg); }
  50%      { transform: rotate(1.4deg); }
}

@keyframes lpp-respira {
  0%, 100% { opacity: calc(var(--o) * .42); transform: scale(.94); }
  50%      { opacity: var(--o); transform: scale(1); }
}

@keyframes lpp-luccica {
  0%, 100% { opacity: calc(var(--o) * .3); }
  50%      { opacity: var(--o); }
}

@keyframes lpp-scoppia {
  0%   { transform: scale(.08); opacity: 0; }
  14%  { opacity: var(--o); }
  72%  { transform: scale(1); opacity: 0; }
  100% { transform: scale(1.04); opacity: 0; }
}

@keyframes lpp-cometa {
  0%   { transform: translate3d(-22vw, 0, 0) rotate(20deg); opacity: 0; }
  14%  { opacity: var(--o); }
  86%  { opacity: var(--o); }
  100% { transform: translate3d(122vw, 34vh, 0) rotate(20deg); opacity: 0; }
}

@keyframes lpp-ali {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(.34); }
}

@keyframes lpp-gira {
  from { transform: rotate(0turn); }
  to   { transform: rotate(1turn); }
}

@keyframes lpp-lucine {
  0%, 100% { filter: brightness(.82); }
  50%      { filter: brightness(1.28); }
}

@keyframes lpp-brilla-bordo {
  0%, 100% { opacity: .5; }
  50%      { opacity: .9; }
}

/* ===========================================================================
   5 · FORME DEI PEZZI CHE CADONO O VOLANO
   ========================================================================= */

.cade { animation: lpp-cade-piano var(--t) linear var(--r) infinite; }
.cade-ruota { animation: lpp-cade-ruota var(--t) linear var(--r) infinite; }
.cade-dondola { animation: lpp-cade-dondola var(--t) ease-in-out var(--r) infinite; }
.strato-zona .cade,
.strato-zona .cade-ruota,
.strato-zona .cade-dondola {
  animation-name: lpp-cade-zona;
}

/* --- fiocco di neve tondo, con un accenno di alone --- */
.fiocco {
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffffff, var(--c) 62%, var(--c2));
  box-shadow: 0 0 6px #ffffff4d;
}

/* --- fiocco a sei punte: disegnato con un ritaglio --- */
.stella6 {
  background: var(--c);
  clip-path: polygon(50% 0%, 58% 34%, 92% 16%, 68% 46%, 100% 50%, 68% 54%,
                     92% 84%, 58% 66%, 50% 100%, 42% 66%, 8% 84%, 32% 54%,
                     0% 50%, 32% 46%, 8% 16%, 42% 34%);
}

/* --- foglia d'autunno: lembo asimmetrico con nervatura --- */
.foglia {
  height: calc(var(--s) * .72);
  border-radius: 0 72% 0 72%;
  background: linear-gradient(130deg, var(--c), var(--c2));
  box-shadow: inset 0 0 2px #00000026;
}
.foglia::after {
  content: "";
  position: absolute;
  left: 8%; top: 48%;
  width: 84%; height: 1px;
  background: #00000038;
}

/* --- petalo di fiore --- */
.petalo {
  height: calc(var(--s) * .78);
  border-radius: 62% 38% 56% 44% / 58% 52% 48% 42%;
  background: linear-gradient(140deg, var(--c), var(--c2));
}

/* --- coriandolo: rettangolino di carta --- */
.coriandolo {
  height: calc(var(--s) * .56);
  background: linear-gradient(120deg, var(--c), var(--c2));
  border-radius: 1px;
}

/* --- stella filante: nastro lungo e stretto --- */
.filante {
  width: calc(var(--s) * .34);
  height: calc(var(--s) * 3.4);
  border-radius: 40%;
  background: repeating-linear-gradient(180deg,
    var(--c) 0 5px, var(--c2) 5px 10px);
}

/* --- pagina di libro che svolazza --- */
.pagina {
  height: calc(var(--s) * 1.26);
  background:
    repeating-linear-gradient(180deg, #00000000 0 3px, #8a6a3d33 3px 4px),
    linear-gradient(135deg, #fffdf4, #ecdfc4);
  border: 1px solid #c9b288;
  border-radius: 1px;
  box-shadow: 0 1px 3px #0000001f;
}

/* --- uovo di Pasqua decorato --- */
.uovo {
  height: calc(var(--s) * 1.3);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background:
    repeating-linear-gradient(118deg,
      #ffffff00 0 4px, #ffffff80 4px 6px),
    linear-gradient(160deg, var(--c), var(--c2));
  box-shadow: inset -2px -2px 4px #00000026;
}

/* --- scintilla dorata --- */
.scintilla {
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8, var(--c) 55%, #00000000 72%);
  animation: lpp-luccica var(--t) ease-in-out var(--r) infinite;
  top: var(--y);
}

/* --- lucciola d'estate: puntino caldo che respira --- */
.lucciola {
  top: var(--y);
  border-radius: 50%;
  background: radial-gradient(circle, #fff8c9, var(--c) 48%, #00000000 74%);
  animation: lpp-respira var(--t) ease-in-out var(--r) infinite;
}

/* --- farfalla: due ali che battono piano --- */
.farfalla {
  top: var(--y);
  height: calc(var(--s) * .8);
  animation: lpp-attraversa var(--t) linear var(--r) infinite;
}
.farfalla::before,
.farfalla::after {
  content: "";
  position: absolute;
  top: 0;
  width: 48%; height: 100%;
  background: linear-gradient(140deg, var(--c), var(--c2));
  animation: lpp-ali 2.6s ease-in-out infinite;
}
.farfalla::before { left: 0; border-radius: 70% 20% 60% 30%; transform-origin: right center; }
.farfalla::after { right: 0; border-radius: 20% 70% 30% 60%; transform-origin: left center; }

/* --- pipistrello: profilo ritagliato, volo lento --- */
.pipistrello {
  top: var(--y);
  height: calc(var(--s) * .44);
  background: #1a1220;
  clip-path: polygon(50% 24%, 64% 0%, 72% 32%, 88% 14%, 100% 54%, 78% 46%,
                     62% 76%, 50% 56%, 38% 76%, 22% 46%, 0% 54%, 12% 14%,
                     28% 32%, 36% 0%);
  animation: lpp-attraversa var(--t) linear var(--r) infinite;
}

/* --- fantasmino che sale --- */
.fantasma {
  top: auto;
  bottom: 0;
  height: calc(var(--s) * 1.24);
  border-radius: 48% 48% 34% 34% / 58% 58% 26% 26%;
  background: linear-gradient(180deg, #f2efe6cc, #cfd6dd66);
  box-shadow: 0 0 10px #ffffff2e;
  animation: lpp-sale var(--t) ease-in-out var(--r) infinite;
}
.fantasma::after {
  content: "";
  position: absolute;
  left: 24%; top: 32%;
  width: 52%; height: 14%;
  border-radius: 50%;
  background: #3a2c3f4d;
}

/* --- maschera di Carnevale --- */
.maschera {
  top: var(--y);
  height: calc(var(--s) * .58);
  border-radius: 46% 46% 54% 54%;
  background: linear-gradient(130deg, var(--c), var(--c2));
  clip-path: polygon(0% 22%, 34% 10%, 50% 26%, 66% 10%, 100% 22%, 100% 70%,
                     62% 94%, 50% 76%, 38% 94%, 0% 70%);
  animation: lpp-attraversa var(--t) linear var(--r) infinite;
}

/* --- fuoco d'artificio: scoppio lento di raggi --- */
.fuoco {
  top: var(--y);
  width: calc(var(--s) * 9);
  height: calc(var(--s) * 9);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      var(--c) 0deg 3deg, #00000000 3deg 15deg),
    radial-gradient(circle, var(--c2) 0 10%, #00000000 46%);
  mask: radial-gradient(circle, #000 0 42%, #0000 62%);
  -webkit-mask: radial-gradient(circle, #000 0 42%, #0000 62%);
  animation: lpp-scoppia var(--t) ease-out var(--r) infinite;
}

/* --- stella del cielo --- */
.stella {
  top: var(--y);
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf2, var(--c) 46%, #00000000 70%);
  animation: lpp-luccica var(--t) ease-in-out var(--r) infinite;
}

/* --- stella cometa dell'Epifania --- */
.cometa {
  top: var(--y);
  width: calc(var(--s) * 10);
  height: calc(var(--s) * .5);
  border-radius: 50%;
  background: linear-gradient(90deg, #ffffff00, var(--c2) 58%, #fffbe8);
  box-shadow: 0 0 12px #ffe9a866;
  animation: lpp-cometa var(--t) linear var(--r) infinite;
}
.cometa::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 1.5);
  margin-top: calc(var(--s) * -.75);
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf0, var(--c) 52%, #00000000 74%);
}

/* ===========================================================================
   6 · ELEMENTI DI SCENA (fermi o con un dondolio lento)
   Stanno negli angoli bassi dello schermo, dietro al contenuto: su schermi
   stretti il contenuto li copre, non il contrario.
   ========================================================================= */

.scena {
  --o: 1;
  position: absolute;
  pointer-events: none;
  /* il pezzo generico ha top/left/width/height: qui si azzerano, perche'
     ogni elemento di scena si ancora da se' (se top e bottom valessero
     insieme, il browser ignorerebbe bottom e la scena finirebbe in alto) */
  top: auto;
  left: auto;
  width: auto;
  height: auto;
}

/* --- albero di Natale --- */
.albero {
  left: 2vw;
  bottom: 104px;
  width: 128px;
  height: 196px;
  transform-origin: 50% 100%;
  animation: lpp-dondola 7s ease-in-out infinite;
}
.albero::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 14px; height: 26px;
  margin-left: -7px;
  background: linear-gradient(90deg, #3c2710, #6b4a22);
  border-radius: 2px;
}
.albero::after {
  content: "";
  position: absolute;
  left: 0; bottom: 22px;
  width: 100%; height: 174px;
  background:
    /* palline */
    radial-gradient(circle at 38% 28%, #d8b86a 0 4px, #00000000 5px),
    radial-gradient(circle at 62% 46%, #b32d36 0 4px, #00000000 5px),
    radial-gradient(circle at 34% 64%, #ecd38a 0 4px, #00000000 5px),
    radial-gradient(circle at 68% 76%, #b32d36 0 4px, #00000000 5px),
    /* festoni */
    repeating-linear-gradient(104deg,
      #ecd38a40 0 3px, #00000000 3px 26px),
    /* rami */
    linear-gradient(176deg, #2f6340, #14402a);
  clip-path: polygon(50% 0%, 70% 26%, 60% 26%, 82% 58%, 68% 58%, 100% 100%, 0% 100%, 32% 58%, 18% 58%, 40% 26%, 30% 26%);
}

/* stella in cima */
.albero .cima {
  position: absolute;
  left: 50%; top: -10px;
  width: 26px; height: 26px;
  margin-left: -13px;
  background: radial-gradient(circle, #fff3cd, #d8b86a 58%, #00000000 72%);
  clip-path: polygon(50% 0%, 61% 36%, 98% 36%, 68% 58%, 79% 96%, 50% 72%, 21% 96%, 32% 58%, 2% 36%, 39% 36%);
  animation: lpp-luccica 4.2s ease-in-out infinite;
}

/* --- pupazzo di neve --- */
.pupazzo {
  bottom: 104px;
  width: 92px;
  height: 128px;
}
.pupazzo-sx { left: 12vw; }
.pupazzo-dx { right: 4vw; }
.pupazzo-piccolo { width: 66px; height: 92px; }
.pupazzo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* occhi e bottoni */
    radial-gradient(circle at 42% 22%, #2b2b2b 0 2.5px, #00000000 3px),
    radial-gradient(circle at 58% 22%, #2b2b2b 0 2.5px, #00000000 3px),
    radial-gradient(circle at 50% 54%, #3b2616 0 2.5px, #00000000 3px),
    radial-gradient(circle at 50% 66%, #3b2616 0 2.5px, #00000000 3px),
    /* testa */
    radial-gradient(circle at 50% 22%, var(--neve) 0 21%, #00000000 22%),
    /* pancia */
    radial-gradient(circle at 50% 70%, var(--neve) 0 33%, #00000000 34%),
    /* ombra */
    radial-gradient(ellipse 40% 6% at 50% 99%, #0000004d, #00000000 70%);
}
.pupazzo::after {
  content: "";
  position: absolute;
  left: 50%; top: 34%;
  width: 46px; height: 7px;
  margin-left: -23px;
  border-radius: 3px;
  background: linear-gradient(90deg, #8c2b36, #5d141c);
}
/* cappello e naso */
.pupazzo .cappello {
  position: absolute;
  left: 50%; top: 2%;
  width: 34px; height: 20px;
  margin-left: -17px;
  background: linear-gradient(180deg, #2b1a0f 0 70%, #1a0f08 70%);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 2px 0 2px #2b1a0f;
}
.pupazzo .naso {
  position: absolute;
  left: 50%; top: 27%;
  width: 0; height: 0;
  margin-left: -2px;
  border-top: 3px solid #00000000;
  border-bottom: 3px solid #00000000;
  border-left: 12px solid #c97a24;
}

/* --- lucine di Natale sulla testata --- */
html[data-stagione="natale"] body.inglese header::before,
html[data-stagione="capodanno"] body.inglese header::before,
html[data-stagione="epifania"] body.inglese header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30px;
  /* z-index 0: sopra al legno della testata, sotto al titolo e al menu,
     che il foglio di stile porta a 1. Le lucine non coprono mai una parola. */
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12px 17px, #ffe9a8 0 4px, #ffe9a800 8px),
    radial-gradient(circle at 36px 21px, #ffb9b9 0 4px, #ffb9b900 8px),
    radial-gradient(circle at 60px 15px, #b7f0c0 0 4px, #b7f0c000 8px),
    radial-gradient(circle at 84px 20px, #bcd8ff 0 4px, #bcd8ff00 8px),
    linear-gradient(180deg, #00000000 0 9px, #8d6f3399 9px 10px, #00000000 10px);
  background-repeat: repeat-x;
  background-size: 108px 30px;
  animation: lpp-lucine 3.4s ease-in-out infinite;
}

/* --- ghirlanda d'agrifoglio sul fondo pagina --- */
html[data-stagione="natale"] body.inglese footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 16px;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 14px 6px, #b32d36 0 3px, #b32d3600 4px),
    radial-gradient(circle at 7px 9px, #1f6340 0 6px, #1f634000 7px),
    radial-gradient(circle at 21px 9px, #14402a 0 6px, #14402a00 7px);
  background-repeat: repeat-x;
  background-size: 28px 16px;
}

/* --- sole d'estate --- */
.sole {
  right: 3vw;
  top: 12vh;
  width: 150px;
  height: 150px;
}
.sole::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4cf 0 26%, #f0cf7fb3 44%, #f0cf7f00 70%);
  animation: lpp-respira 6.5s ease-in-out infinite;
}
.sole::after {
  content: "";
  position: absolute;
  inset: -34px;
  background: repeating-conic-gradient(from 0deg,
    #f3d78a3d 0deg 4deg, #00000000 4deg 22deg);
  mask: radial-gradient(circle, #0000 0 34%, #000 42% 72%, #0000 76%);
  -webkit-mask: radial-gradient(circle, #0000 0 34%, #000 42% 72%, #0000 76%);
  animation: lpp-gira 120s linear infinite;
}

/* --- ramo fiorito di primavera --- */
.ramo {
  left: 0;
  top: 0;
  width: 320px;
  height: 180px;
  transform-origin: 0 0;
  animation: lpp-dondola 9s ease-in-out infinite;
}
.ramo::before {
  content: "";
  position: absolute;
  left: -20px; top: 10px;
  width: 300px; height: 7px;
  border-radius: 0 0 60% 0;
  background: linear-gradient(90deg, #3c2710, #6b4a22 60%, #6b4a2200);
  transform: rotate(14deg);
}
.ramo::after {
  content: "";
  position: absolute;
  left: 10px; top: 0;
  width: 290px; height: 130px;
  background:
    radial-gradient(circle at 18% 26%, var(--c) 0 9px, #00000000 10px),
    radial-gradient(circle at 34% 40%, var(--c2) 0 7px, #00000000 8px),
    radial-gradient(circle at 48% 32%, var(--c) 0 10px, #00000000 11px),
    radial-gradient(circle at 62% 52%, var(--c2) 0 8px, #00000000 9px),
    radial-gradient(circle at 76% 44%, var(--c) 0 9px, #00000000 10px),
    radial-gradient(circle at 88% 62%, var(--c2) 0 7px, #00000000 8px);
}

/* --- ramo d'autunno (foglie ancora attaccate) --- */
.ramo-autunno { left: 0; top: 0; width: 300px; height: 170px; }
.ramo-autunno::before {
  content: "";
  position: absolute;
  left: -16px; top: 6px;
  width: 280px; height: 6px;
  background: linear-gradient(90deg, #2b1a0f, #5c3418 70%, #5c341800);
  transform: rotate(11deg);
}
.ramo-autunno::after {
  content: "";
  position: absolute;
  left: 14px; top: 0;
  width: 270px; height: 120px;
  background:
    radial-gradient(ellipse 12px 7px at 20% 28%, #b5792f, #b5792f00 72%),
    radial-gradient(ellipse 11px 7px at 38% 42%, #8a4a1c, #8a4a1c00 72%),
    radial-gradient(ellipse 13px 8px at 56% 34%, #c9892f, #c9892f00 72%),
    radial-gradient(ellipse 11px 7px at 74% 48%, #7d2c1c, #7d2c1c00 72%),
    radial-gradient(ellipse 12px 7px at 88% 38%, #a8631f, #a8631f00 72%);
  animation: lpp-dondola 8s ease-in-out infinite;
}

/* --- zucca di Halloween --- */
.zucca {
  bottom: 104px;
  width: 112px;
  height: 86px;
}
.zucca-sx { left: 4vw; }
.zucca-dx { right: 5vw; width: 84px; height: 66px; }
.zucca::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 48%;
  background:
    repeating-linear-gradient(90deg,
      #00000026 0 2px, #00000000 2px 18px),
    radial-gradient(circle at 38% 34%, #e8a94a, #c97a24 58%, #8d4a12);
  box-shadow: inset 0 -6px 12px #00000040;
}
/* faccia intagliata: luce calda, ferma, senza lampeggio */
.zucca::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 66%, #ffdb8f 0 9px, #ffdb8f00 12px),
    radial-gradient(circle at 34% 42%, #ffdb8f 0 7px, #ffdb8f00 9px),
    radial-gradient(circle at 66% 42%, #ffdb8f 0 7px, #ffdb8f00 9px);
  animation: lpp-respira 5.4s ease-in-out infinite;
}
.zucca .picciolo {
  position: absolute;
  left: 50%; top: -14px;
  width: 12px; height: 18px;
  margin-left: -6px;
  border-radius: 3px;
  background: linear-gradient(180deg, #3d4a22, #2a3318);
  transform: rotate(-12deg);
}

/* --- ragnatela negli angoli --- */
.ragnatela {
  width: 190px;
  height: 190px;
  opacity: .5;
  animation: lpp-brilla-bordo 6.8s ease-in-out infinite;
}
.ragnatela-sx { left: 0; top: 0; }
.ragnatela-dx { right: 0; top: 0; transform: scaleX(-1); }
.ragnatela::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 184deg at 0% 0%,
      #e8e4dc 0deg .4deg, #00000000 .4deg 11deg),
    repeating-radial-gradient(circle at 0% 0%,
      #00000000 0 26px, #e8e4dc 26px 26.6px, #00000000 26.6px 52px);
  mask: conic-gradient(from 180deg at 0% 0%, #000 0deg 90deg, #0000 90deg);
  -webkit-mask: conic-gradient(from 180deg at 0% 0%, #000 0deg 90deg, #0000 90deg);
}

/* --- gelo d'inverno negli angoli dello schermo --- */
.gelo {
  width: 240px;
  height: 200px;
  opacity: .55;
}
.gelo-sx { left: 0; top: 0; }
.gelo-dx { right: 0; bottom: 0; transform: scale(-1); }
.gelo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 6% 8%, #e8f3ff80 0 40px, #e8f3ff00 90px),
    repeating-linear-gradient(42deg,
      #dbeaff26 0 2px, #00000000 2px 16px),
    repeating-linear-gradient(-28deg,
      #dbeaff1f 0 2px, #00000000 2px 22px);
  mask: radial-gradient(circle at 0% 0%, #000 0 60%, #0000 100%);
  -webkit-mask: radial-gradient(circle at 0% 0%, #000 0 60%, #0000 100%);
}

/* --- bandierine delle giornate della biblioteca ---
   Appese al bordo basso della testata: li' si vedono sul legno, mentre in
   mezzo allo schermo resterebbero dietro alla fascia della testata. Stanno
   sotto al testo (z-index 0), come le lucine di Natale. */
html[data-stagione="giornata-libro"] body.inglese header::before,
html[data-stagione="giornata-lettura"] body.inglese header::before,
html[data-stagione="giornata-biblioteche"] body.inglese header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26px;
  z-index: 0;
  pointer-events: none;
  background-image:
    conic-gradient(from 225deg at 50% 0%, #2a5a3c 0deg 90deg, #00000000 90deg),
    conic-gradient(from 225deg at 50% 0%, #7d2a34 0deg 90deg, #00000000 90deg),
    conic-gradient(from 225deg at 50% 0%, #c3a04a 0deg 90deg, #00000000 90deg),
    linear-gradient(180deg, #8d6f33b3 0 2px, #00000000 2px);
  background-repeat: repeat-x;
  background-size: 66px 22px, 66px 22px, 66px 22px, 100% 26px;
  background-position: 0 2px, 22px 2px, 44px 2px, 0 0;
}

/* --- pila di libri --- */
.pila {
  bottom: 104px;
  width: 132px;
  height: 104px;
}
.pila-sx { left: 4vw; }
.pila-dx { right: 4vw; transform: scaleX(-1); }
.pila::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #1f3d2e 0 18px, #14271d 18px 22px, #00000000 22px),
    linear-gradient(180deg, #00000000 0 22px, #6b1f29 22px 42px, #43151c 42px 46px, #00000000 46px),
    linear-gradient(180deg, #00000000 0 46px, #6b4a22 46px 66px, #3c2710 66px 70px, #00000000 70px),
    linear-gradient(180deg, #00000000 0 70px, #2b3c4e 70px 92px, #18242f 92px 96px, #00000000 96px);
  border-radius: 2px;
  box-shadow: 0 6px 14px #00000059;
}
.pila::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 0; bottom: 8px;
  background: repeating-linear-gradient(180deg,
    #00000000 0 7px, #d8b86a26 7px 8px);
}

/* --- coccarda della Giornata del libro --- */
.coccarda {
  right: 5vw;
  top: 16vh;
  width: 104px;
  height: 104px;
  animation: lpp-galleggia 6.2s ease-in-out infinite;
}
.coccarda::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 72px; height: 72px;
  margin-left: -36px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      #8a2230 0deg 15deg, #a93140 15deg 30deg),
    radial-gradient(circle, #f7f3e8 0 30%, #00000000 32%);
  box-shadow: 0 2px 8px #00000059;
}
.coccarda::after {
  content: "";
  position: absolute;
  left: 50%; top: 62px;
  width: 44px; height: 42px;
  margin-left: -22px;
  background:
    linear-gradient(200deg, #8a2230 0 50%, #00000000 50%),
    linear-gradient(160deg, #00000000 50%, #8a2230 50%);
  clip-path: polygon(0% 0%, 42% 0%, 50% 56%, 58% 0%, 100% 0%, 74% 100%, 50% 74%, 26% 100%);
}

/* --- alone della lampada da lettura --- */
.lampada {
  left: 50%;
  top: 0;
  width: 760px;
  height: 420px;
  margin-left: -380px;
}
.lampada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%,
    #ffe3a833 0 30%, #ffe3a814 56%, #ffe3a800 76%);
  animation: lpp-respira 8s ease-in-out infinite;
}

/* ===========================================================================
   7 · NEVE E BRINA SUI RIQUADRI
   Si ottengono aggiungendo strati di sfondo ai riquadri di carta: non c'e'
   nessun elemento nuovo sopra al testo.
   ========================================================================= */

html[data-stagione="natale"] body.inglese .scatola,
html[data-stagione="natale"] body.inglese .scheda,
html[data-stagione="natale"] body.inglese .strumenti,
html[data-stagione="natale"] body.inglese .tessera,
html[data-stagione="inverno"] body.inglese .scatola,
html[data-stagione="inverno"] body.inglese .scheda,
html[data-stagione="inverno"] body.inglese .strumenti {
  background-image:
    /* cumuletti tondi lungo il bordo alto */
    radial-gradient(circle at 50% 120%, var(--neve) 0 58%, #00000000 60%),
    /* strato di neve compatta */
    linear-gradient(180deg, var(--neve) 0 7px, #00000000 7px),
    var(--sfondo-pannello);
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-size: 26px 15px, 100% 100%, 100% 100%;
  background-position: 0 -1px, 0 0, 0 0;
}

html[data-stagione="natale"] body.inglese .contatore,
html[data-stagione="inverno"] body.inglese .contatore {
  background-image:
    radial-gradient(circle at 50% 120%, var(--neve) 0 58%, #00000000 60%),
    var(--sfondo-contatore);
  background-repeat: repeat-x, no-repeat;
  background-size: 22px 11px, 100% 100%;
  background-position: 0 2px, 0 0;
}

/* brina negli angoli dei riquadri, solo d'inverno */
html[data-stagione="inverno"] body.inglese .scatola::after {
  background:
    radial-gradient(circle at 0% 0%, #e8f3ff5c 0 70px, #e8f3ff00 110px),
    radial-gradient(circle at 100% 100%, #e8f3ff47 0 60px, #e8f3ff00 100px),
    repeating-linear-gradient(135deg, #00000000 0 7px, #8a6a3d0a 7px 8px);
}

/* ragnatele agli angoli dei riquadri, ad Halloween */
html[data-stagione="halloween"] body.inglese .scatola::after {
  background:
    repeating-conic-gradient(from 184deg at 100% 0%,
      #6b5b4530 0deg .5deg, #00000000 .5deg 13deg),
    repeating-radial-gradient(circle at 100% 0%,
      #00000000 0 18px, #6b5b4526 18px 18.8px, #00000000 18.8px 36px),
    repeating-linear-gradient(135deg, #00000000 0 7px, #8a6a3d0a 7px 8px);
}

/* coriandoli posati sui riquadri, a Carnevale e Capodanno */
html[data-stagione="carnevale"] body.inglese .scatola::after,
html[data-stagione="capodanno"] body.inglese .scatola::after {
  background:
    radial-gradient(circle at 12% 8%, #a32a5e59 0 3px, #00000000 4px),
    radial-gradient(circle at 34% 4%, #2b5f6b59 0 3px, #00000000 4px),
    radial-gradient(circle at 58% 9%, #d89b3c59 0 3px, #00000000 4px),
    radial-gradient(circle at 81% 5%, #6b205059 0 3px, #00000000 4px),
    repeating-linear-gradient(135deg, #00000000 0 7px, #8a6a3d0a 7px 8px);
}

/* nastro verde-oro sul bordo dei riquadri, nelle giornate della biblioteca */
html[data-stagione="giornata-libro"] body.inglese .scatola,
html[data-stagione="giornata-lettura"] body.inglese .scatola,
html[data-stagione="giornata-biblioteche"] body.inglese .scatola {
  border-top: 3px solid var(--ottone);
}

/* ===========================================================================
   10 · SCHERMI PICCOLI E STAMPA
   Su schermo stretto gli elementi di scena piu' grandi si togliono: il
   copione riduce i pezzi che cadono, qui si riduce l'ingombro.
   ========================================================================= */

@media (max-width: 880px) {
  .sole { width: 104px; height: 104px; right: 1vw; }
  .ramo, .ramo-autunno { width: 210px; height: 120px; }
  .albero { width: 92px; height: 142px; left: 1vw; }
  .pupazzo { width: 66px; height: 92px; }
  .pupazzo-sx { left: 9vw; }
  .zucca { width: 84px; height: 64px; }
  .ragnatela, .gelo { width: 130px; height: 130px; }
  .coccarda { width: 74px; height: 74px; }
  .pila { width: 96px; height: 76px; }
}

@media (max-width: 560px) {
  .ragnatela, .gelo, .ramo, .ramo-autunno, .coccarda, .pila { display: none; }
  .elenco-varianti { grid-template-columns: 1fr 1fr; }
}

@media print {
  .decori, .strato-zona { display: none !important; }
}