/* Testata della home (21/10): marchio in Cormorant Garamond, lineette beige accanto al logo più evidenti,
   creste di montagna sotto il sottotitolo che si disegnano all'arrivo e seguono appena il puntatore.
   Anche: descrizione del sito sempre visibile, chiusa da una linea come quella sopra. */
html[data-identita="editoriale"] { --marchio-font:"Cormorant Garamond","Fraunces",Georgia,serif; --marchio-peso:640; --marchio-spazio:.004em; }
html[data-identita="editoriale"] .nome { font-size:clamp(2.9rem,5.9vw,6.2rem); line-height:1.02; }
/* Marchio in rilievo "da stampa": filo di luce sotto e un'eco beige spostata, come un secondo passaggio di colore. */
html[data-identita] .testa .nome,
.entrata__nome { text-shadow:0 1px 0 rgb(255 255 255 / .7), .06em .055em 0 rgb(179 150 87 / .3); }
html[data-identita="editoriale"] .testata .marchio { font-size:clamp(1.5rem,2.9vw,2.25rem); }
html[data-identita="editoriale"] .piede__identita b { font-size:clamp(1.7rem,2.9vw,2.6rem); }

html[data-identita] .testa .logo::before,
html[data-identita] .testa .logo::after { top:60%; width:clamp(64px,9vw,132px); height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,#b39657 65%,#9c7c43); }
html[data-identita] .testa .logo::before { right:calc(100% + 20px); }
html[data-identita] .testa .logo::after { left:calc(100% + 20px); }

html[data-tema] .testa { overflow-x:clip; }
html[data-tema] .testa > :is(.logo,.nome,.sotto) { position:relative; z-index:1; }
html[data-identita] .testa .sotto { padding-bottom:clamp(26px,3.5vw,48px); color:#7f6331; font-weight:500; }
html[data-identita] .testa .sotto .ruoli { color:inherit; font-weight:430; }
html[data-identita] .testa .sotto .sotto__separatore { color:#b39657; }
.testa__creste { position:relative; z-index:0; align-self:stretch; height:0; margin:-14px 0 -14px; pointer-events:none; }
/* il margine inferiore annulla lo spazio della testata: creste e lettere arrivano alla linea del menu */
.testa__creste svg { position:absolute; bottom:-5px; left:50%; width:100vw; height:clamp(70px,9vw,128px); transform:translateX(-50%); overflow:visible; opacity:.9; }
.testa__cresta { transition:transform 1.4s cubic-bezier(.22,.61,.36,1); }
.testa__cresta--lontana { opacity:.75; }
.testa__filo { stroke-dasharray:1; stroke-dashoffset:0; }
.testa__cresta--lontana .testa__filo { opacity:.3; }
.testa__cresta--vicina .testa__filo { opacity:.55; }
/* Lettere-texture: frasi del sito dentro le montagne, appena percettibili. Interruttore locale nella barra delle prove. */
.testa__lettere { font:italic 500 8.5px "Cormorant Garamond", Georgia, serif; letter-spacing:.02em; fill:#266786; }
.testa__cresta--lontana .testa__lettere { opacity:.19; }
.testa__cresta--vicina .testa__lettere { opacity:.28; }
html[data-lettere="no"] .testa__lettere { display:none; }
.prova-lettere { padding:4px 10px; border:1px solid #b5cedb; border-radius:14px; background:#fff; color:#266786; font:600 .72rem/1.3 var(--tema-font, sans-serif); cursor:pointer; }
.prova-lettere[aria-pressed="false"] { background:transparent; color:#7a8f9b; text-decoration:line-through; }

@media (prefers-reduced-motion:no-preference) {
  .testa__filo { animation:cresta-disegna 2.6s cubic-bezier(.65,0,.35,1) .2s backwards; }
  .testa__cresta--vicina .testa__filo { animation-delay:.45s; }
  .testa :is(.testa__riempimento,.testa__lettere) { animation:cresta-appare 1.6s ease-out .5s backwards; }
  html.entrata-attiva:not(.entrata-salta) .testa__filo { animation-delay:2.8s; }
  html.entrata-attiva:not(.entrata-salta) .testa__cresta--vicina .testa__filo { animation-delay:3.05s; }
  html.entrata-attiva:not(.entrata-salta) .testa :is(.testa__riempimento,.testa__lettere) { animation-delay:3.05s; }
}
@keyframes cresta-disegna { from { stroke-dashoffset:1; } }
@keyframes cresta-appare { from { opacity:0; } }
@media (max-width:700px) {
  html[data-identita] .testa .logo::before,
  html[data-identita] .testa .logo::after { width:46px; }
  .testa { --creste-h:50px; --creste-h-striscia:50px; }
}

.apertura > .presentazione-sito { padding-bottom:24px; border-bottom:1px solid #bfd2dc; }

/* Testata sottile (21/10). Home: la testata resta attaccata in alto e, scorrendo, se ne vede solo la fascia bassa
   (creste, logo piccolo con le lineette beige, menu). Pagine interne: sempre la stessa striscia.
   Il top negativo della home lo calcola nh/testata.js. Versione senza: html[data-fissa="no"] (interruttore nella barra delle prove). */
/* --sottile: 0 testata intera, 1 striscia. Scatta una volta quando la testata si ferma e passa in mezzo secondo
   (proprietà registrata: si animano insieme opacità, altezza delle creste e maschera). */
@property --sottile { syntax:'<number>'; inherits:true; initial-value:0; }
.testa { --creste-h:clamp(70px,9vw,128px); --creste-h-striscia:64px; transition:--sottile .5s cubic-bezier(.4,0,.2,1); }
html:not([data-fissa="no"]) .testa { position:sticky; }
.testa > :is(.logo,.nome,.sotto) { opacity:calc(1 - var(--sottile, 0)); }
.testa__creste svg { height:calc(var(--creste-h, clamp(70px,9vw,128px)) + (var(--creste-h-striscia, 64px) - var(--creste-h, clamp(70px,9vw,128px))) * var(--sottile, 0));
  /* nella striscia le montagne spariscono attorno al logo e alle lineette, e si attenuano verso il centro */
  --m:calc(1 - var(--sottile, 0)); --m2:calc(1 - .45 * var(--sottile, 0));
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgb(0 0 0 / var(--m2)) calc(50% - 440px),rgb(0 0 0 / var(--m)) calc(50% - 235px),rgb(0 0 0 / var(--m)) calc(50% + 235px),rgb(0 0 0 / var(--m2)) calc(50% + 440px),#000 100%);
  mask-image:linear-gradient(90deg,#000 0,rgb(0 0 0 / var(--m2)) calc(50% - 440px),rgb(0 0 0 / var(--m)) calc(50% - 235px),rgb(0 0 0 / var(--m)) calc(50% + 235px),rgb(0 0 0 / var(--m2)) calc(50% + 440px),#000 100%); }
.testa__striscia { position:absolute; left:50%; bottom:16px; z-index:2; display:block; transform:translateX(-50%); opacity:var(--sottile, 0); pointer-events:none; }
html[data-identita] .testa .testa__striscia .logo { display:block; width:62px; margin:0; }
html[data-identita] .testa .testa__striscia .logo::before,
html[data-identita] .testa .testa__striscia .logo::after { width:clamp(56px,7vw,110px); }
.testa.is-sottile .testa__striscia { pointer-events:auto; }

html:not([data-fissa="no"]) .testata { padding-top:0; row-gap:0; }
html:not([data-fissa="no"]) .testata__marchio { position:relative; z-index:1; display:block; height:64px; }
html:not([data-fissa="no"]) .testata__marchio::before { position:absolute; left:50%; top:50%; width:62px; transform:translate(-50%,-50%); }
/* lineette beige ai lati del logo, in un solo elemento: linea, vuoto per il logo, linea */
html:not([data-fissa="no"]) .testata__marchio::after { content:""; position:absolute; left:50%; top:54%; width:342px; height:2px; transform:translate(-50%,-50%); pointer-events:none;
  background:linear-gradient(90deg,transparent 0,#b39657 76px,#9c7c43 120px,transparent 120px,transparent calc(100% - 120px),#9c7c43 calc(100% - 120px),#b39657 calc(100% - 76px),transparent 100%); }
/* il nome resta nel codice (link alla home sul logo, letto dagli screen reader); sotto-titolo e ruoli nascosti solo alla vista */
html:not([data-fissa="no"]) .testata .marchio { position:absolute; inset:0; z-index:2; width:80px; height:44px; margin:auto; overflow:hidden; color:transparent; font-size:0; text-shadow:none; }
html:not([data-fissa="no"]) .testata :is(.testata__sotto,.testata__ruoli) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html:not([data-fissa="no"]) .testata { overflow-x:clip; }
html:not([data-fissa="no"]) .testata::after { content:""; position:absolute; left:0; right:0; top:0; height:68px; z-index:0; pointer-events:none;
  background:url('../asset/beige/creste-striscia.svg') center bottom / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgb(0 0 0 / .55) calc(50% - 440px),transparent calc(50% - 235px),transparent calc(50% + 235px),rgb(0 0 0 / .55) calc(50% + 440px),#000 100%);
  mask-image:linear-gradient(90deg,#000 0,rgb(0 0 0 / .55) calc(50% - 440px),transparent calc(50% - 235px),transparent calc(50% + 235px),rgb(0 0 0 / .55) calc(50% + 440px),#000 100%); }
html[data-lettere="no"]:not([data-fissa="no"]) .testata::after { background-image:url('../asset/beige/creste-striscia-nude.svg'); }
html:not([data-fissa="no"]) .testata .navigazione-wrap { position:relative; z-index:1; }

/* Sponsor (home, 21/10): logo Acrobatic Fitness libero, senza riquadro, alla stessa altezza del riquadro Sport Specialist. */
.sponsor__logo-libero { display:grid; place-items:center; width:240px; height:112px; padding:14px 10px; border-radius:6px; }
.sponsor__logo-libero img { width:100%; height:100%; object-fit:contain; }
.sponsor__logo-libero:focus-visible { outline:2px solid var(--testo-tema, #266786); outline-offset:3px; }
@media (max-width:700px) { .sponsor__logo-libero { width:100%; max-width:320px; } }