/* Tre atmosfere leggere, indipendenti dal carattere del titolo e dal footer. */
.header-atmosfera { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; border-radius:inherit; }
.header-atmosfera::before,.header-atmosfera::after { content:""; display:none; position:absolute; inset:0; pointer-events:none; }
html[data-trama-testata="pergamena"] :is(.testa,.testata)::before,
html[data-trama-testata="vento-neve"] :is(.testa,.testata)::before,
html[data-trama-testata="respiro"] :is(.testa,.testata)::before { display:none; }

/* La pergamena originale perde la tinta calda e lascia affiorare solo le fibre. */
html[data-trama-testata="pergamena"] .header-atmosfera { mix-blend-mode:multiply; }
html[data-trama-testata="pergamena"] .header-atmosfera::before {
  display:block; background:url('../asset/beige/pergamena-originale.jpg') repeat center / 1200px 1200px;
  filter:grayscale(1) contrast(1.08);
  opacity:clamp(.6,calc(var(--texture-alpha,.17) * 4.7),.9);
}

/* Il movimento resta nel livello decorativo: non ritaglia menu o sottomenu. */
html[data-trama-testata="vento-neve"] .header-atmosfera {
  -webkit-mask-image:linear-gradient(90deg,#000,#0004 42%,#0004 58%,#000);
  mask-image:linear-gradient(90deg,#000,#0004 42%,#0004 58%,#000);
}
html[data-trama-testata="vento-neve"] .header-atmosfera::before {
  display:block; inset:-20px -40px;
  background:url('../asset/beige/vento-header.svg') center / cover no-repeat;
  opacity:.36; animation:header-brezza 22s ease-in-out infinite alternate;
}
html[data-trama-testata="vento-neve"] .header-atmosfera::after {
  display:block; background:url('../asset/beige/neve-header.svg') repeat 0 0 / 520px 340px;
  opacity:.75; animation:header-neve 70s linear infinite;
}
@keyframes header-brezza { from { transform:translate3d(-16px,3px,0); } to { transform:translate3d(16px,-3px,0); } }
@keyframes header-neve { to { background-position:520px 340px; } }

/* Due velature ampie, senza lampi né cambi di colore. */
html[data-trama-testata="respiro"] .header-atmosfera::before {
  display:block; inset:-25% -12%;
  background:radial-gradient(ellipse at 23% 50%,rgb(255 255 255 / .65),transparent 55%),radial-gradient(ellipse at 85% 45%,rgb(142 192 218 / .23),transparent 58%);
  opacity:.7; animation:header-respiro 24s ease-in-out infinite alternate;
}
html[data-trama-testata="respiro"] .header-atmosfera::after {
  display:block; inset:-30% -15%; background:linear-gradient(115deg,transparent 15%,rgb(255 255 255 / .28) 45%,transparent 73%);
  animation:header-luce 30s ease-in-out infinite alternate;
}
@keyframes header-respiro { from { transform:translate3d(-2%,0,0) scale(1); } to { transform:translate3d(2%,1%,0) scale(1.04); } }
@keyframes header-luce { from { transform:translate3d(-4%,0,0); opacity:.3; } to { transform:translate3d(4%,0,0); opacity:.65; } }

/* Campioni statici: l'animazione si vede sull'header quando si sceglie la variante. */
.header-campioni { display:grid; gap:10px; }
.prova .header-campione { display:grid; gap:7px; width:100%; padding:12px; border:1px solid #bdd3e0; border-radius:8px; background:#f7fbfd; color:#266786; text-align:left; cursor:pointer; font:500 13px/1.4 system-ui,sans-serif; }
.header-campione__sfondo { display:grid; place-items:center; height:64px; border-radius:4px; background:linear-gradient(115deg,#f1f9fc,#d7ebf6); overflow:hidden; position:relative; isolation:isolate; }
.header-campione__sfondo::before { content:""; position:absolute; inset:0; z-index:-1; }
.header-campione__sfondo--pergamena { background-image:url('../asset/beige/pergamena-originale.jpg'),linear-gradient(115deg,#f1f9fc,#d7ebf6); background-size:600px,cover; background-blend-mode:luminosity; }
.header-campione__sfondo--pergamena::before { background:#dceef8; mix-blend-mode:color; opacity:.75; }
.header-campione__sfondo--vento-neve::before { background:url('../asset/beige/neve-header.svg') center / 260px 170px,url('../asset/beige/vento-header.svg') center / cover; opacity:.6; }
.header-campione__sfondo--respiro::before { background:radial-gradient(ellipse at 15% 50%,#fff,transparent 60%),linear-gradient(115deg,transparent,#fff7,transparent); }
.header-campione__sfondo span { font:550 19px/1.2 "Fraunces",Georgia,serif; letter-spacing:-.035em; }
.header-campione__nome { font-weight:650; }
.header-campione small { font-size:12px; line-height:1.45; color:#39576d; }
.header-campione[aria-pressed="true"] { border-color:#266786; box-shadow:inset 0 0 0 1px #266786; background:#eaf4fa; }
.prova .header-precedente { margin-top:10px; padding:8px 2px; border:0; background:transparent; color:#39576d; text-decoration:underline; text-underline-offset:3px; font:500 12px/1.4 system-ui,sans-serif; cursor:pointer; }
.header-precedente[aria-pressed="true"] { font-weight:750; }
.header-campione:focus-visible,.header-precedente:focus-visible { outline:2px solid #266786; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .header-atmosfera::before,.header-atmosfera::after { animation:none !important; } }
@media print { .header-atmosfera::before,.header-atmosfera::after { animation:none !important; } }