/* Piero Vivarelli: sistema visivo dichiarato in CLAUDE.md */

@font-face {
  font-family: 'Arsenal';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../font/arsenal-italic-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Arsenal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/arsenal-normal-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Arsenal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../font/arsenal-normal-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../font/bodoni-moda-italic-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../font/bodoni-moda-normal-400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --carta: #f5f0e6;
  --carta-2: #ebe3d3;
  --inchiostro: #1d1b18;
  --inchiostro-2: #575049;
  --arancio: #f7a600;        /* l'arancione di AtmaStudio: fondi e segni, mai testo su carta */
  --arancio-testo: #8a5200;  /* lo stesso arancione, scurito per reggere come testo su carta */
  --notte: #3c3c3e;          /* il grigio del manuale AtmaStudio e della pagina provvisoria */
  --notte-testo: #f5f0e6;
  --notte-testo-2: #c9c1b3;
  --titoli: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --corpo: "Arsenal", "Avenir Next", "Segoe UI", sans-serif;
  --gutter: clamp(20px, 5vw, 56px);
  --barra: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 18px/1.6 var(--corpo);
  overflow-wrap: break-word;
}
button, input, select, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--arancio); outline-offset: 3px; border-radius: 4px; }

.largo { width: min(1120px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.stretto { width: min(820px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

.salta { position: absolute; left: -999px; top: 8px; background: var(--inchiostro); color: var(--carta); padding: 12px 16px; z-index: 20; }
.salta:focus { left: 8px; }

h1, h2, h3 { font-family: var(--titoli); font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; font-optical-sizing: auto; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.25rem); }
h1 em { font-style: italic; color: var(--arancio); }
h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h3 { font-size: 1.5rem; line-height: 1.2; }

.occhiello {
  font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--inchiostro-2); margin-bottom: 18px;
}
.sommario { font-size: clamp(1.15rem, 2vw, 1.375rem); line-height: 1.5; color: var(--inchiostro-2); max-width: 34em; }
h1 + .sommario, h2 + .sommario { margin-top: 22px; }
.sottotitolo { font-size: 1.25rem; color: var(--inchiostro-2); margin-top: 10px; }
.quieto { color: var(--inchiostro-2); }

/* Bottoni e rimandi */
.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 28px;
  background: var(--arancio); color: var(--inchiostro);
  border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 700; letter-spacing: 0.02em; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.bottone:active { transform: scale(.97); }
.bottone-piccolo { min-height: 44px; padding: 8px 20px; font-size: 1rem; }
.rimando {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; text-decoration: underline; text-decoration-color: var(--arancio);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-underline-offset .18s ease;
}
.rimando::after { content: "→"; margin-left: 8px; transition: transform .18s ease; }
.rimando:active::after { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(138, 82, 0, .6); }
  .rimando:hover { text-underline-offset: 9px; }
  .rimando:hover::after { transform: translateX(4px); }
}
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }

/* Testata: scura, perché il logo (cerchio arancione e firma bianca) vive sul grigio */
.testata { position: sticky; top: 0; z-index: 10; background: var(--notte); color: var(--notte-testo); }
.testata-riga { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--barra); }
.firma { display: inline-flex; align-items: center; min-height: 44px; }
.firma .sigla { height: 60px; }
.testata :focus-visible { outline-color: var(--carta); }
/* Finché l'apertura è a schermo il logo sta lì, grande: in testata comparirebbe due volte */
.firma { transition: opacity .3s ease, visibility .3s; }
.js.in-apertura .firma { opacity: 0; visibility: hidden; }
.menu { display: none; gap: 4px; }
.menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 1rem; text-decoration: none; border-radius: 999px;
  transition: background-color .18s ease;
}
.menu a[aria-current="true"] { background: rgba(245, 240, 230, .14); }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: rgba(245, 240, 230, .14); } }
@media (min-width: 820px) { .menu { display: flex; } }

/* Apertura: la foto sotto una patina scura, come nella pagina provvisoria, con il logo che si compone */
.apertura { position: relative; background: var(--notte); color: var(--notte-testo); }
.palco { position: relative; display: grid; align-items: end; min-height: calc(100vh - var(--barra)); overflow: clip; }
.apertura-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 18%; }
.apertura-velo { position: absolute; inset: 0; background: rgba(18, 18, 20, .68); }
.apertura-testo { position: relative; width: min(1120px, 100%); margin-inline: auto; padding: clamp(24px, 4vw, 40px) var(--gutter); }
@media (min-width: 900px) {
  .apertura-foto { object-position: 50% 8%; }
  .palco { align-items: center; }
  .apertura-testo { padding-left: calc(var(--gutter) + min(44vw, 493px)); }
}
.apertura h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
.apertura .occhiello, .apertura .sommario, .apertura .rimando { color: var(--notte-testo); }
.apertura :focus-visible { outline-color: var(--carta); }

/* Il marchio: la firma di Piero, e sotto il cerchio di AtmaStudio che si traccia scorrendo */
.marchio {
  position: relative; display: block; width: min(456px, 100%);
  margin: 0 0 clamp(20px, 3.5vw, 36px) -8px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.marchio-cerchio { transform: scale(var(--respiro, 1)); transition: transform var(--tempo, .8s) ease-in-out; }

/* La sigla: il cerchio di AtmaStudio con la firma di Piero che ne attraversa il centro.
   Stessa geometria ovunque compaia (apertura, testata, piede): cambia solo la grandezza. */
.marchio, .sigla { aspect-ratio: 2.65 / 1; }
.sigla { position: relative; display: block; }
.marchio img, .sigla img { position: absolute; pointer-events: none; -webkit-user-drag: none; }
.marchio-cerchio, .sigla-cerchio { left: 0; top: 0; height: 100%; width: auto; }
/* Dove il cerchio si anima è fatto di tre copie sovrapposte della stessa immagine (attacco, corpo, coda):
   senza animazione coincidono e si vede il cerchio intero. */
.strati { position: absolute; aspect-ratio: 800 / 794; }
.strati .strato { inset: 0; width: 100%; height: 100%; }
.marchio-firma, .sigla-firma { left: 12.3%; top: 16%; width: 87.7%; height: auto; filter: invert(1); }
.respiro {
  position: absolute; left: 0; top: 100%; width: 43%; text-align: center;
  font-size: 0.875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--notte-testo);
  opacity: 0; transition: opacity .6s ease;
}
.marchio.respira .respiro { opacity: 1; }

/* Manifesto */
.manifesto { background: var(--carta-2); padding-block: clamp(56px, 9vw, 112px); text-align: center; }
.manifesto blockquote p { font-family: var(--titoli); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.25; }
.manifesto-nota { margin-top: 28px; color: var(--inchiostro-2); }
.manifesto-nota strong { color: var(--inchiostro); }

/* Sezioni */
.cammino, .pensiero, .incontri, .atma { padding-block: clamp(64px, 10vw, 128px); }
.titolo-sezione { margin-bottom: clamp(36px, 6vw, 64px); }

/* Il cammino e il filo */
.tappe { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 20px; }
@media (min-width: 820px) { .tappe { grid-template-columns: 96px 1fr; gap: 40px; } }
.filo { position: relative; }
.filo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.filo path { fill: none; stroke: var(--arancio); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tappe ol { display: grid; gap: clamp(44px, 7vw, 80px); max-width: 620px; padding-block: 8px 24px; }
.numero { display: block; font-size: 0.875rem; letter-spacing: 0.16em; color: var(--arancio-testo); margin-bottom: 6px; }
.tappe h3 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 10px; }
.tappe p { color: var(--inchiostro-2); }
/* bersaglio da 44px senza spostare il testo: padding e margine uguale e contrario */
.tappe p a { display: inline-block; padding-block: 9px; margin-block: -9px; color: var(--inchiostro); text-decoration-color: var(--arancio); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Pensiero */
.pensiero { background: var(--carta-2); }
.parole { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-bottom: clamp(40px, 6vw, 64px); }
.parole li { font-family: var(--titoli); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 4.4vw, 3rem); line-height: 1.2; transition: color .25s ease; }
.parole li:nth-child(even) { color: var(--arancio-testo); }
.note { display: grid; gap: 20px; }
@media (min-width: 820px) { .note { grid-template-columns: 1fr 1fr; gap: 28px; } }
.nota { background: var(--carta); padding: clamp(24px, 4vw, 40px); border-top: 3px solid var(--arancio); transition: transform .2s ease, box-shadow .2s ease; }
.nota h3 { margin-bottom: 14px; }
.nota p { color: var(--inchiostro-2); }
@media (hover: hover) and (pointer: fine) { .nota:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -22px rgba(29, 27, 24, .5); } }

/* Libri: fondo bianco, perché copertine e pagine sono fotografate su bianco */
.libri { background: #fff; padding-block: clamp(72px, 11vw, 144px); }
.libri-titolo .sommario { max-width: 40em; }
.libri-collana { width: 100%; margin-bottom: clamp(32px, 6vw, 64px); }
.libri-griglia { display: grid; gap: 48px; align-items: start; }
@media (min-width: 820px) { .libri-griglia { grid-template-columns: 1.1fr .9fr; gap: 72px; } }
.libri-griglia h3 { margin-bottom: 18px; }
.volumi { border-top: 1px solid color-mix(in srgb, var(--inchiostro) 18%, transparent); }
.volumi li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; align-items: baseline;
  padding-block: 16px; border-bottom: 1px solid color-mix(in srgb, var(--inchiostro) 18%, transparent);
}
.uscita { grid-column: 1 / -1; font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inchiostro-2); }
.volume-titolo { font-family: var(--titoli); font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.2; }
.volumi time { color: var(--inchiostro-2); white-space: nowrap; }
.volumi .prossimo { border-left: 4px solid var(--arancio); padding-left: 16px; }
.volumi .prossimo time { color: var(--inchiostro); font-weight: 700; }
@media (max-width: 480px) { .volumi li { grid-template-columns: 1fr; } }
.libri-acquisto img { width: 100%; }
.libri-acquisto p { margin-block: 8px 20px; color: var(--inchiostro-2); }

/* Incontri */
/* Incontri e AtmaStudio: la foto fa da sfondo alla sezione, molto tenue. Sopra, solo testo scuro
   (il grigio secondario non reggerebbe il contrasto nei punti scuri della foto). */
.con-sfondo { position: relative; overflow: clip; }
.con-sfondo .sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; pointer-events: none; }
.con-sfondo .largo { position: relative; }
.con-sfondo .occhiello, .con-sfondo p { color: var(--inchiostro); }
.incontri, .atma { padding-block: clamp(88px, 14vw, 176px); }
.incontri .titolo-sezione { margin-bottom: 20px; }
.incontri-testo p { margin-bottom: 14px; }
.incontri .sfondo { object-position: 50% 58%; }
/* su schermi larghi la foto si allarga oltre il bordo destro: la figura finisce a destra del testo */
@media (min-width: 820px) { .incontri .sfondo { width: 138%; max-width: none; } }

/* AtmaStudio */
.atma { background: var(--carta-2); }
/* figura intera con spazio sopra la testa. Su telefono la si centra; su schermi larghi sta a sinistra e il testo passa a destra */
.atma .sfondo { object-position: 24% 50%; }
.atma-testo { max-width: 560px; }
@media (min-width: 820px) {
  .atma .sfondo { left: auto; right: 0; width: 115%; max-width: none; object-position: 50% 17%; }
  .atma .largo { display: flex; justify-content: flex-end; }
  .atma-testo { width: 46%; }
}
.atma-testo p:not(.occhiello) { margin-block: 16px 14px; }

/* Video: i reel in verticale. Su telefono una fila che scorre di lato, da tablet tre colonne */
.video { padding-block: clamp(64px, 10vw, 128px); }
.reel-fila {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 300px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  margin-bottom: 16px; scrollbar-width: none;
}
.reel-fila::-webkit-scrollbar { display: none; }
/* Su telefono è un carosello: il reel a sinistra è in primo piano, gli altri più piccoli e sfumati,
   con una freccia sovrapposta al bordo. Scorrendo (o toccando la freccia) il primo piano passa al successivo. */
.reel-palco { position: relative; }
.reel-freccia {
  position: absolute; top: 38%; z-index: 2; display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: var(--arancio); color: var(--inchiostro); cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(18, 18, 20, .55);
  transition: transform .18s ease, opacity .25s ease, visibility .25s;
}
.reel-freccia.avanti { right: -6px; }
.reel-freccia.indietro { left: -10px; }
.reel-freccia[disabled] { opacity: 0; visibility: hidden; }
.reel-freccia:active { transform: scale(.92); }
@media (max-width: 819.98px) {
  /* spazio in coda quanto basta perché anche l'ultimo reel arrivi a sinistra (il 100% è la larghezza senza i margini) */
  .js .reel-fila { padding-inline-end: calc(100% + var(--gutter) - min(72vw, 300px)); }
  .js .reel { transition: transform .35s ease, opacity .35s ease; transform-origin: left center; }
  .js .reel:not(.attivo) { transform: scale(.86); opacity: .5; pointer-events: none; }
}
.reel { scroll-snap-align: start; }
.reel-quadro { position: relative; background: var(--notte); }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--notte); }
.reel .bottone { width: 100%; margin-top: 12px; padding-inline: 12px; text-align: center; }
.bottone-linea { background: transparent; box-shadow: inset 0 0 0 2px var(--inchiostro); }
@media (hover: hover) and (pointer: fine) { .bottone-linea:hover { background: var(--inchiostro); color: var(--carta); box-shadow: inset 0 0 0 2px var(--inchiostro); } }
.reel-avvio {
  position: absolute; inset: 0; width: 100%; display: grid; place-items: center;
  border: 0; padding: 0; background: linear-gradient(to top, rgba(18, 18, 20, .45), transparent 45%); cursor: pointer;
}
.reel-avvio[hidden] { display: none; }
.reel-avvio span {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--arancio); color: var(--inchiostro); transition: transform .18s ease;
}
.reel-avvio:active span { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .reel-avvio:hover span { transform: scale(1.08); } }
@media (min-width: 820px) {
  .reel-fila { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 32px; overflow: visible; margin-inline: 0; padding-inline: 0; margin-bottom: 28px; }
  .reel-freccia { display: none; }
}

/* Piede */
.piede { background: var(--notte); color: var(--notte-testo); padding-block: clamp(56px, 9vw, 104px) 28px; }
.piede h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px; }
.piede h3 { font-size: 1.25rem; margin-bottom: 8px; }
.piede p, .piede .quieto { color: var(--notte-testo-2); }
.piede-griglia { display: grid; gap: 48px; }
@media (min-width: 820px) { .piede-griglia { grid-template-columns: 1.2fr .8fr; gap: 80px; } }
.iscrizione { margin-top: 24px; }
.iscrizione label { display: block; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--notte-testo-2); margin-bottom: 8px; }
.iscrizione-riga { display: flex; flex-wrap: wrap; gap: 12px; }
.iscrizione input {
  flex: 1 1 220px; min-height: 48px; padding: 10px 18px;
  background: transparent; color: var(--notte-testo);
  border: 1px solid color-mix(in srgb, var(--notte-testo) 55%, transparent); border-radius: 999px;
}
.iscrizione input::placeholder { color: var(--notte-testo-2); opacity: 1; }
.esito { min-height: 1.6em; margin-top: 12px; color: var(--arancio) !important; }
.piede :focus-visible { outline-color: var(--carta); }
.piede-colonna nav { display: grid; margin-top: 20px; }
.piede-colonna nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--notte-testo); }
@media (hover: hover) and (pointer: fine) { .piede-colonna nav a:hover { color: var(--arancio); } }
.piede-firma { margin-top: 56px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--notte-testo) 22%, transparent); font-size: 0.875rem; }
.piede-firma a { display: inline-flex; align-items: center; min-height: 44px; }
.piede-firma .sigla { width: min(318px, 82%); margin-bottom: 16px; }
/* La pennellata del cerchio, misurata sull'immagine. In basso a sinistra, fra 186 e 208 gradi, inizio e fine
   si sovrappongono: all'interno ci sono le setole dell'attacco, all'esterno la coda che chiude il giro.
   Un taglio a raggiera lì spezza l'una o l'altra, quindi la zona si divide per raggio (dentro o fuori dal 78%)
   e il cerchio si dipinge in tre tempi: attacco (22 gradi, parte interna), corpo (338), coda (22, parte esterna).
   --giro va da 0 a 1 lungo tutti i 382 gradi. */
@property --giro { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes giro {
  0% { --giro: 0; opacity: 1; animation-timing-function: cubic-bezier(.35, .1, .3, 1); }
  68% { --giro: 1; opacity: 1; animation-timing-function: ease-in-out; }
  100% { --giro: 1; opacity: 0; }
}

/* Movimento: solo con JavaScript e solo se non è stato chiesto di ridurlo */
@media (prefers-reduced-motion: no-preference) {
  .js .comparsa { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .js .comparsa.visibile { opacity: 1; transform: none; }
  .js .filo svg { clip-path: inset(0 0 calc((1 - var(--avanzamento, 1)) * 100%) 0); }
  /* L'apertura resta agganciata per un tratto di scorrimento, mentre il cerchio si traccia */
  /* la corsa è un elemento dentro la sezione: con un padding lo sticky non avrebbe spazio per restare agganciato */
  .js .apertura::after { content: ""; display: block; height: 60vh; }
  .js .palco { position: sticky; top: var(--barra); }
  .js .marchio-cerchio { --giro: var(--cerchio, 1); }
  .js .marchio-cerchio .strato, .sigla-giro .strato { -webkit-mask-composite: source-in; mask-composite: intersect; }
  .js .marchio-cerchio .s-attacco, .sigla-giro .s-attacco {
    -webkit-mask-image: conic-gradient(from 186deg, #000 calc(clamp(0, var(--giro) * 382, 22) * 1deg), transparent calc(clamp(0, var(--giro) * 382, 22) * 1deg + 3deg) 22deg, transparent 0), radial-gradient(closest-side, #000 78%, transparent 78.4%);
    mask-image: conic-gradient(from 186deg, #000 calc(clamp(0, var(--giro) * 382, 22) * 1deg), transparent calc(clamp(0, var(--giro) * 382, 22) * 1deg + 3deg) 22deg, transparent 0), radial-gradient(closest-side, #000 78%, transparent 78.4%);
  }
  .js .marchio-cerchio .s-corpo, .sigla-giro .s-corpo {
    -webkit-mask-image: conic-gradient(from 208deg, #000 calc(clamp(0, var(--giro) * 382 - 22, 338) * 1.03deg - 10deg), transparent calc(clamp(0, var(--giro) * 382 - 22, 338) * 1.03deg) 338deg, transparent 0);
    mask-image: conic-gradient(from 208deg, #000 calc(clamp(0, var(--giro) * 382 - 22, 338) * 1.03deg - 10deg), transparent calc(clamp(0, var(--giro) * 382 - 22, 338) * 1.03deg) 338deg, transparent 0);
  }
  .js .marchio-cerchio .s-coda, .sigla-giro .s-coda {
    -webkit-mask-image: conic-gradient(from 186deg, #000 calc(clamp(0, var(--giro) * 382 - 360, 22) * 1.15deg - 3deg), transparent calc(clamp(0, var(--giro) * 382 - 360, 22) * 1.15deg) 22deg, transparent 0), radial-gradient(closest-side, transparent 78%, #000 78.4%);
    mask-image: conic-gradient(from 186deg, #000 calc(clamp(0, var(--giro) * 382 - 360, 22) * 1.15deg - 3deg), transparent calc(clamp(0, var(--giro) * 382 - 360, 22) * 1.15deg) 22deg, transparent 0), radial-gradient(closest-side, transparent 78%, #000 78.4%);
  }
  .js .marchio.respira .strato { -webkit-mask-image: none; mask-image: none; }
  .sigla-giro .sigla-cerchio { animation: giro 9s infinite; }
  /* schermi bassi: il palco non ci sta intero, quindi niente aggancio (il cerchio è già composto) */
  @media (max-height: 640px) {
    .js .apertura::after { display: none; }
    .js .palco { position: relative; top: auto; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}