/* =========================================================
   KIT EFFETTI v2 · aspetto
   Ogni blocco è indipendente. Le regole che nascondono
   qualcosa valgono solo con la classe .js su <html>,
   così senza JavaScript il sito resta leggibile.
   ========================================================= */

:root {
  --fx-ease: cubic-bezier(.7, 0, .3, 1);          /* entra e esce */
  --fx-ease-out: cubic-bezier(.22, 1, .36, 1);    /* uscita morbida */
  --fx-durata: 1.1s;
  --fx-sfasamento: 28ms;                          /* tra una lettera e l'altra */
  --fx-sfasamento-parole: 70ms;                   /* tra una parola e l'altra */
}
html.fx-fluido { scroll-behavior: auto; }


/* ---------- PRELOADER (base, fasce, riflesso) ---------- */
.preloader { display: none; }
.js .preloader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--preloader-fondo, #1a1919); color: var(--preloader-testo, #fff);
  transition: transform 1s var(--fx-ease);
}
.preloader__logo { width: min(160px, 40vw); height: auto; overflow: visible; position: relative; z-index: 2; }
.preloader__logo path, .preloader__logo circle, .preloader__logo line {
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: fx-disegna 1.8s var(--fx-ease) forwards;
}
.preloader__barra { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; transform-origin: left; transform: scaleX(var(--p, 0)); opacity: .5; z-index: 2; }
.preloader__numero { position: absolute; bottom: 14px; left: calc(var(--p, 0) * 100%); transform: translateX(-100%); font-size: 12px; letter-spacing: .08em; padding-right: 8px; z-index: 2; }
.preloader.is-fatto { transform: translateY(-100%); }
@keyframes fx-disegna { to { stroke-dashoffset: 0; } }

/* variante a fasce: 7 fasce che salgono a scalini */
.js .preloader--fasce { background: none; }
.preloader__fasce { position: absolute; inset: 0; display: flex; z-index: 1; }
.preloader__fasce i { flex: 1; background: var(--preloader-fondo, #1a1919); border-right: 1px solid rgba(255,255,255,.08); transition: transform 1s var(--fx-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.preloader--fasce.is-fatto { transform: none; }
.preloader--fasce.is-fatto .preloader__fasce i { transform: translateY(-100%); }
.preloader--fasce.is-fatto > :not(.preloader__fasce) { opacity: 0; transition: opacity .4s; }
.preloader__marchio { font-size: clamp(22px, 3vw, 34px); letter-spacing: .2em; position: relative; z-index: 2; animation: fx-fuoco-in 1.4s var(--fx-ease-out) both; }
@keyframes fx-fuoco-in { from { filter: blur(14px); opacity: 0; } }

/* variante riflesso: una linea di luce attraversa il marchio */
.preloader--riflesso .preloader__marchio { overflow: hidden; }
.preloader--riflesso .preloader__marchio::after {
  content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  animation: fx-riflesso .9s .5s var(--fx-ease) both;
}
@keyframes fx-riflesso { from { transform: translateX(0); } to { transform: translateX(560%); } }


/* ---------- HERO FERMA, LA SEZIONE DOPO LE SCORRE SOPRA ---------- */
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; }
.hero-sticky + * { position: relative; z-index: 1; }


/* ---------- HEADER: COLORE, LOGO CHE CAMBIA, SCOMPARSA, FONDO ---------- */
.header-fx {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: #fff;
  transition: color .5s var(--fx-ease-out), transform .6s var(--fx-ease), background-color .5s, backdrop-filter .5s;
}
.header-fx[data-tema="chiaro"] { color: var(--header-testo-chiaro, #1a1919); }
.header-fx.is-nascosto { transform: translateY(-100%); }
/* data-fondo: dopo la prima schermata l'header prende uno sfondo, così non si sovrappone ai titoli */
.header-fx[data-fondo].is-scorso { background: var(--header-fondo-scuro, rgba(22, 22, 22, .78)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.header-fx[data-fondo][data-tema="chiaro"].is-scorso { background: var(--header-fondo-chiaro, rgba(255, 255, 255, .84)); }
.header-fx__logo-esteso, .header-fx__logo-breve { transition: opacity .5s, transform .6s var(--fx-ease); }
.header-fx__logo-breve { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); opacity: 0; }
.header-fx.is-scorso .header-fx__logo-esteso { opacity: 0; transform: translateY(-30%); }
.header-fx.is-scorso .header-fx__logo-breve { opacity: 1; transform: translate(-50%, -50%); }


/* ---------- TESTO DIVISO: LETTERE O PAROLE ---------- */
[data-split] .fx-parola { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
[data-split] .fx-lettera { display: inline-block; }
.js [data-split] .fx-lettera {
  transform: translateY(110%);
  transition: transform var(--fx-durata) var(--fx-ease-out);
  transition-delay: calc(var(--i) * var(--fx-sfasamento) + var(--ritardo, 0ms));
}
.js [data-split="parole"] .fx-lettera { transition-delay: calc(var(--i) * var(--fx-sfasamento-parole) + var(--ritardo, 0ms)); }
.js [data-split].is-in .fx-lettera { transform: none; }
/* variante "fuoco": le parole passano da sfocate a nitide */
[data-anim="fuoco"] .fx-parola { overflow: visible; }
.js [data-anim="fuoco"] .fx-lettera { transform: none; filter: blur(14px); opacity: 0; transition-property: filter, opacity; transition-duration: 1.3s; }
.js [data-anim="fuoco"].is-in .fx-lettera { filter: none; opacity: 1; }


/* ---------- TESTO CHE SI ACCENDE PAROLA PER PAROLA ---------- */
.js [data-accendi] .fx-parola { opacity: var(--accendi-spento, .18); transition: opacity .35s; }
.js [data-accendi] .fx-parola.is-acceso { opacity: 1; }


/* ---------- TESTO CHE RIEMPIE LA LARGHEZZA ---------- */
[data-adatta] { white-space: nowrap; }
.fx-adatta { display: inline-block; }


/* ---------- BOTTONE CON TESTO CHE ROTOLA ---------- */
.fx-rotola { display: inline-grid; overflow: hidden; vertical-align: top; line-height: 1.25; }
.fx-rotola > span { grid-area: 1 / 1; transition: transform .55s var(--fx-ease); }
.fx-rotola > span:last-child { transform: translateY(110%); }
@media (hover: hover) {
  [data-rotola]:hover .fx-rotola > span:first-child { transform: translateY(-110%); }
  [data-rotola]:hover .fx-rotola > span:last-child { transform: none; }
}
[data-rotola]:focus-visible .fx-rotola > span:first-child, [data-rotola]:active .fx-rotola > span:first-child { transform: translateY(-110%); }
[data-rotola]:focus-visible .fx-rotola > span:last-child, [data-rotola]:active .fx-rotola > span:last-child { transform: none; }   /* :active = al tocco */


/* ---------- COMPARSE (data-reveal) ----------
   su · dissolvenza · zoom · tendina · fuoco · evidenzia · apri · linea */
.js [data-reveal] {
  transition: opacity 1s var(--fx-ease-out), transform 1.2s var(--fx-ease-out), clip-path 1.2s var(--fx-ease), filter 1.2s var(--fx-ease-out), background-size 1.1s var(--fx-ease), width 1.1s var(--fx-ease);
  transition-delay: var(--ritardo, 0ms);
}
.js [data-reveal="su"]:not(.is-in)          { opacity: 0; transform: translateY(40px); }
.js [data-reveal="dissolvenza"]:not(.is-in) { opacity: 0; }
.js [data-reveal="fuoco"]:not(.is-in)       { opacity: 0; filter: blur(14px); }
.js [data-reveal="zoom"]                    { overflow: hidden; }
.js [data-reveal="zoom"] > *                { transition: transform 1.8s var(--fx-ease-out); transition-delay: var(--ritardo, 0ms); }
.js [data-reveal="zoom"]:not(.is-in)        { opacity: 0; }
.js [data-reveal="zoom"]:not(.is-in) > *    { transform: scale(1.12); }
.js [data-reveal="tendina"]:not(.is-in)     { clip-path: inset(0 0 100% 0); }
.js [data-reveal="tendina"].is-in           { clip-path: inset(0 0 0 0); }
.js [data-reveal="linea"]                   { transform-origin: left center; }
.js [data-reveal="linea"]:not(.is-in)       { transform: scaleX(0); }
/* evidenziatore: il fondino si stende da sinistra */
.evidenzia { background: linear-gradient(var(--evidenzia, #fff), var(--evidenzia, #fff)) no-repeat 0 50% / 100% 100%; color: var(--evidenzia-testo, #111); padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .evidenzia[data-reveal]:not(.is-in) { background-size: 0% 100%; color: inherit; }
.evidenzia[data-reveal] { transition: background-size 1s var(--fx-ease), color .6s .3s; }
/* immagine dentro il testo che si apre */
.foto-in-testo { display: inline-block; width: var(--larghezza, 1.6em); height: .78em; border-radius: .4em; vertical-align: -.02em; background-size: cover; background-position: center; margin: 0 .08em; }
.js .foto-in-testo[data-reveal]:not(.is-in) { width: 0; margin: 0; }
/* Parallasse sullo stesso elemento: niente transizione sulla transform */
.js [data-reveal][data-velocita] { transition-property: opacity, clip-path, filter; }


/* ---------- SCROLL ORIZZONTALE ---------- */
.oriz__binario {
  display: flex; gap: var(--oriz-spazio, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-inline: var(--oriz-margine, 16px); scrollbar-width: none;
}
.oriz__binario::-webkit-scrollbar { display: none; }
.oriz__binario > * { flex: 0 0 auto; scroll-snap-align: center; }
.oriz.is-attivo .oriz__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.oriz.is-attivo .oriz__binario { overflow: visible; scroll-snap-type: none; will-change: transform; }


/* ---------- FOTO/VIDEO CHE SI ALLARGA A SCHERMO INTERO ---------- */
.espandi { position: relative; }
.espandi.is-attivo { height: var(--espandi-altezza, 260vh); }
.espandi__sticky { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.espandi.is-attivo .espandi__sticky { position: sticky; top: 0; }
.espandi__media {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(calc((1 - var(--p, 1)) * var(--espandi-y, 24%)) calc((1 - var(--p, 1)) * var(--espandi-x, 30%)) round calc((1 - var(--p, 1)) * 16px));
}
.espandi__media > * { position: absolute; inset: 0; transform: scale(calc(1.2 - var(--p, 1) * .2)); }


/* ---------- ELENCO CON ANTEPRIMA ---------- */
.anteprima__vista { position: relative; overflow: hidden; }
.anteprima__livello { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity .6s var(--fx-ease-out), transform 1.1s var(--fx-ease-out); }
.anteprima__livello.is-attivo { opacity: 1; transform: none; }
.anteprima__mini { display: none; }
/* tablet touch: resta la vista grande (la voce si attiva scorrendo) · telefono: miniatura accanto a ogni voce */
@media (max-width: 767px) {
  [data-anteprima] .anteprima__vista { display: none; }
  .anteprima__mini { display: block; width: 64px; height: 64px; border-radius: 6px; flex: 0 0 auto; background-size: cover; }
}


/* ---------- SCHEDE SU FOTO PIENA ---------- */
[data-sfondo] { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity .9s var(--fx-ease-out), transform 1.4s var(--fx-ease-out); }
.js [data-sfondo]:not(.is-attivo) { opacity: 0; transform: scale(1.04); }
[role="tabpanel"] { animation: fx-fuoco-in .7s var(--fx-ease-out) both; }


/* ---------- SELETTORE DI VARIANTI (estate/inverno, pranzo/cena) ---------- */
[data-solo] { transition: opacity .9s var(--fx-ease-out), visibility .9s; }
[data-solo].is-spento { opacity: 0; visibility: hidden; }
html:not(.js) [data-solo]:not([data-base]) { display: none; }


/* ---------- FOTO POLAROID AL PASSAGGIO ---------- */
.polaroid__area { position: relative; pointer-events: none; }
.polaroid__foto { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; box-shadow: 0 18px 40px rgba(0,0,0,.25); border: 8px solid #fff; }
.polaroid__foto.is-visibile { animation: fx-polaroid .45s var(--fx-ease-out) forwards; }
@keyframes fx-polaroid { from { opacity: 0; transform: translateX(var(--x, 0)) scale(1.1) rotate(0); } to { opacity: 1; transform: translateX(var(--x, 0)) scale(1) rotate(var(--r, 0deg)); } }
/* touch: al posto dell'area grande, una piccola polaroid accanto a ogni voce */
[data-polaroid].is-tocco .polaroid__area { display: none; }
.polaroid__mini { display: inline-block; width: clamp(48px, 13vw, 96px); aspect-ratio: 3 / 4; margin-left: .25em; vertical-align: middle; background-size: cover; background-position: center; border: 4px solid #fff; box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0; transform: rotate(var(--r, 0deg)) scale(.6); transition: opacity .45s var(--fx-ease-out), transform .6s var(--fx-ease-out); }
.polaroid__mini.is-visibile { opacity: 1; transform: rotate(var(--r, 0deg)); }


/* ---------- MENU A TUTTO SCHERMO (+ foto, + pagina che rimpicciolisce) ---------- */
.menu-fx { position: fixed; inset: 0; z-index: 90; visibility: hidden; opacity: 0; transition: opacity .6s var(--fx-ease), visibility 0s .6s; }
.menu-fx.is-aperto { visibility: visible; opacity: 1; transition: opacity .6s var(--fx-ease); }
.menu-fx__voce { display: block; overflow: hidden; }
.menu-fx__voce > * { display: block; transform: translateY(105%); transition: transform .9s var(--fx-ease-out); transition-delay: calc(var(--i, 0) * 70ms + .15s); }
.menu-fx.is-aperto .menu-fx__voce > * { transform: none; }
html.menu-aperto { overflow: hidden; }
.menu-fx__foto { position: relative; overflow: hidden; }
.menu-fx__foto > div { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity .6s, transform 1.2s var(--fx-ease-out); }
.menu-fx__foto > div.is-attivo { opacity: 1; transform: none; }
/* variante: la pagina si rimpicciolisce e scopre il menu sotto (body[data-menu-scala]) */
body[data-menu-scala] .menu-fx { z-index: 0; visibility: visible; opacity: 1; transition: none; }
body[data-menu-scala] .menu-fx .menu-fx__voce > * { transition-delay: calc(var(--i, 0) * 60ms + .25s); }
.pagina { position: relative; z-index: 1; background: var(--fondo-pagina, #fff); transform-origin: 100% 100%; transition: transform .7s var(--fx-ease), border-radius .7s var(--fx-ease); }
html.menu-aperto .pagina, html.menu-chiude .pagina { position: fixed; left: 0; right: 0; overflow: hidden; }
html.menu-aperto .pagina { transform: scale(.5); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.35); cursor: pointer; }
html.menu-aperto .pagina > * { pointer-events: none; }


/* ---------- INDICATORE DI CAPITOLO ---------- */
.capitoli { position: fixed; left: var(--capitoli-sinistra, 20px); top: 50%; z-index: 80; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transition: opacity .5s; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.capitoli.is-visibile { opacity: 1; }
.capitoli__binario { width: 1px; height: 90px; background: rgba(255,255,255,.3); position: relative; }
.capitoli__barra { position: absolute; inset: 0; background: #fff; transform-origin: top; transform: scaleY(var(--p, 0)); }
/* telefono: compatto in basso a sinistra, barra orizzontale */
@media (max-width: 767px) {
  .capitoli { left: 14px; top: auto; bottom: 14px; transform: none; flex-direction: row; gap: 8px; font-size: 12px; }
  .capitoli__binario { width: 56px; height: 1px; }
  .capitoli__barra { transform-origin: left; transform: scaleX(var(--p, 0)); }
}


/* ---------- MENU CON AVANZAMENTO PER SEZIONE ---------- */
[data-avanzamento] a { position: relative; }
[data-avanzamento] a::before, [data-avanzamento] a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: currentColor; }
[data-avanzamento] a::before { opacity: .2; }
[data-avanzamento] a::after { transform-origin: left; transform: scaleX(var(--p, 0)); }


/* ---------- BOTTONE FISSO DI PRENOTAZIONE ---------- */
.bottone-fisso { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 85; transform: translateX(-50%); transition: transform .6s var(--fx-ease), opacity .4s; }
.js .bottone-fisso:not(.is-visibile) { transform: translate(-50%, 160%); opacity: 0; pointer-events: none; }


/* ---------- AVVISO CHIUDIBILE ---------- */
.avviso { position: fixed; left: 16px; bottom: 16px; z-index: 95; max-width: min(420px, calc(100vw - 32px)); display: flex; gap: 14px; align-items: center; transition: transform .6s var(--fx-ease), opacity .4s; }
.js .avviso:not(.is-visibile) { transform: translateY(140%); opacity: 0; pointer-events: none; }


/* ---------- STRISCIA INFINITA (loghi o testo) ---------- */
.striscia { overflow-x: auto; scrollbar-width: none; }
.striscia::-webkit-scrollbar { display: none; }
.striscia__traccia { display: flex; width: max-content; align-items: center; }
.striscia__traccia > * { flex: 0 0 auto; margin-right: var(--striscia-spazio, 48px); }
.striscia.is-attiva { overflow: hidden; }
.striscia.is-attiva .striscia__traccia { animation: fx-striscia var(--durata, 30s) linear infinite; }
.striscia[data-verso="destra"].is-attiva .striscia__traccia { animation-direction: reverse; }
@media (hover: hover) { .striscia.is-attiva:hover .striscia__traccia { animation-play-state: paused; } }
@keyframes fx-striscia { to { transform: translateX(-50%); } }


/* ---------- FISARMONICA (details nativi, name="gruppo" = una sola aperta) ---------- */
.fisarmonica summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fisarmonica summary::-webkit-details-marker { display: none; }
.fisarmonica summary::after { content: "+"; font-size: 1.4em; line-height: 1; transition: transform .4s var(--fx-ease); }
.fisarmonica[open] summary::after { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  .fisarmonica { interpolate-size: allow-keywords; }
  .fisarmonica::details-content { height: 0; overflow: hidden; transition: height .45s var(--fx-ease), content-visibility .45s allow-discrete; }
  .fisarmonica[open]::details-content { height: auto; }
}


/* ---------- SLIDER A SCORRIMENTO ---------- */
.slider__traccia { display: flex; gap: var(--slider-spazio, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.slider__traccia::-webkit-scrollbar { display: none; }
.slider__traccia > * { flex: 0 0 auto; scroll-snap-align: start; }


/* ---------- MAPPA CON PUNTI (popover nativi) ---------- */
.mappa { position: relative; }
.mappa__punto { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font: inherit; font-size: 12px; }
.mappa__punto::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid currentColor; animation: fx-pulsa 2.2s infinite; }
@keyframes fx-pulsa { from { transform: scale(.8); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
.mappa__scheda[popover] { margin: auto; max-width: min(360px, 90vw); border: 0; padding: 22px; }
.mappa__scheda[popover]::backdrop { background: rgba(0,0,0,.35); }


/* ---------- MODULO A PASSI ---------- */
.passi__punti { height: 2px; background: rgba(127,127,127,.25); position: relative; margin-bottom: 26px; }
.passi__punti::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: left; transform: scaleX(var(--p, 1)); transition: transform .5s var(--fx-ease); }
[data-modulo-passi] fieldset { border: 0; padding: 0; margin: 0; }
[data-modulo-passi].is-attivo fieldset:not([hidden]) { animation: fx-fuoco-in .6s var(--fx-ease-out) both; }
[data-modulo-passi] .grazie { display: none; }
[data-modulo-passi].is-inviato > :not(.grazie) { display: none; }
[data-modulo-passi].is-inviato .grazie { display: block; animation: fx-fuoco-in .8s var(--fx-ease-out) both; }


/* ---------- CAROSELLO / SCHERMO DIVISO A SCORRIMENTO OPPOSTO ---------- */
.diviso { position: relative; }
.diviso__sticky { position: relative; }
.diviso.is-attivo .diviso__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; }
.diviso.is-attivo .diviso__finestra { overflow: hidden; height: 100%; min-height: 0; }
.diviso.is-attivo .diviso__sinistra, .diviso.is-attivo .diviso__destra { display: flex; flex-direction: column; height: 100%; min-height: 0; transition: transform 1.1s var(--fx-ease); }
.diviso.is-attivo .diviso__destra { flex-direction: column-reverse; }
.diviso.is-attivo .diviso__sinistra > *, .diviso.is-attivo .diviso__destra > * { flex: 0 0 100%; height: 100%; min-height: 0; }
/* telefono in verticale: le due metà una sopra l'altra, sempre in versi opposti */
@media (max-width: 767px) and (orientation: portrait) {
  .diviso.is-attivo .diviso__sticky { grid-template-columns: 1fr; grid-template-rows: 50% 50%; }
}


/* ---------- NUVOLA DI FOTO IN PROFONDITÀ ---------- */
.nuvola { position: relative; }
.nuvola.is-attivo { height: var(--nuvola-altezza, 260vh); }
.nuvola__sticky { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; place-items: center; }
.nuvola.is-attivo .nuvola__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
.nuvola__foto { position: absolute; left: 50%; top: 50%; width: var(--w, 13vw); min-width: 90px; aspect-ratio: 3 / 4; background-size: cover; background-position: center; border-radius: 6px;
  transform: translate(calc(-50% + var(--x, 0) * .42vw), calc(-50% + var(--y, 0) * .4vh)); will-change: transform, opacity; }


/* ---------- FOTO A ROTAZIONE ---------- */
[data-rotazione] { position: relative; }
[data-rotazione] > * { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
[data-rotazione] > .is-attivo, html:not(.js) [data-rotazione] > :first-child { opacity: 1; }


/* ---------- VIDEO DI SFONDO ---------- */
.video-sfondo { position: absolute; inset: 0; overflow: hidden; }
.video-sfondo > img, .video-sfondo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-sfondo > video { opacity: 0; transition: opacity 1s; }
.video-sfondo.is-video > video { opacity: 1; }


/* ---------- DECORAZIONI SOLO CSS ---------- */
/* grana da pellicola: aggiungere class="grana" a body o a una sezione */
.grana { position: relative; }
.grana::after { content: ""; position: fixed; inset: -50%; z-index: 999; pointer-events: none; opacity: var(--grana, .07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: fx-grana 1s steps(4) infinite; }
@keyframes fx-grana { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
/* parola con sfumatura che scorre */
.sfumato { background: linear-gradient(90deg, var(--sf1, #e8b840), var(--sf2, #2dd4a8), var(--sf1, #e8b840)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-sfuma 6s linear infinite; }
@keyframes fx-sfuma { to { background-position: -200% 0; } }
/* bordo luminoso che gira */
@property --fx-angolo { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.bordo-luce { position: relative; border-radius: var(--raggio, 14px); }
.bordo-luce::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--fx-angolo), transparent 0 70%, var(--luce, #2dd4a8) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fx-gira 5s linear infinite; }
@keyframes fx-gira { to { --fx-angolo: 360deg; } }
/* sfondo aurora: macchie di colore sfocate che si muovono */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(90px); opacity: .45; animation: fx-aurora 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { background: var(--au1, #2dd4a8); left: -10%; top: -20%; }
.aurora i:nth-child(2) { background: var(--au2, #9b6dff); right: -12%; top: 10%; animation-duration: 22s; }
.aurora i:nth-child(3) { background: var(--au3, #e8b840); left: 30%; bottom: -30%; animation-duration: 26s; opacity: .25; }
@keyframes fx-aurora { to { transform: translate(8vw, 6vh) scale(1.15); } }
/* footer che si scopre: il contenuto sopra deve avere uno sfondo */
.footer-scopri { position: sticky; bottom: 0; z-index: 0; }
.sopra-footer { position: relative; z-index: 1; }


/* ---------- RIDUCI MOVIMENTO: tutto visibile, niente animazioni ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal] > *, .js [data-split] .fx-lettera, .menu-fx__voce > *, .js [data-accendi] .fx-parola {
    opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important;
  }
  .js .evidenzia[data-reveal] { background-size: 100% 100% !important; color: var(--evidenzia-testo, #111) !important; }
  .js .foto-in-testo[data-reveal] { width: var(--larghezza, 1.6em) !important; }
  .js .preloader { display: none; }
  .header-fx { transition: color .3s; }
  .header-fx.is-nascosto { transform: none; }
  .grana::after, .sfumato, .bordo-luce::before, .aurora i, .mappa__punto::after { animation: none; }
  .pagina { transition: none; }
}