/* Effetti sito: stili della libreria. Colori e misure si regolano con le variabili --fx-*.
   Va caricato insieme a effetti.js (vedi SKILL.md). */
:root {
  --fx-gradini-colore: #14110f;
  --fx-curva: cubic-bezier(.16, 1, .3, 1);
  --fx-pillola: 1.7em;        /* larghezza della foto dentro il titolo */
  --fx-pillola-aperta: 2.5em; /* larghezza al passaggio del mouse (uguale a --fx-pillola per non allargarla) */
}
.fx-svg { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------- 1. striscia: l'hero si apre da una fascia ---------- */
.fx-striscia { position: relative; overflow: hidden; }
.fx-striscia-foto { position: absolute; inset: 0; overflow: hidden; }
.fx-striscia-foto img,
.fx-striscia-foto video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-striscia-testo { position: relative; z-index: 1; }
html.fx-js [data-fx~="striscia"]:not(.fx-fatto) .fx-striscia-foto { clip-path: inset(50% 14% 50% 14%); }
html.fx-js [data-fx~="striscia"]:not(.fx-fatto) .fx-striscia-testo { visibility: hidden; }

/* ---------- 2. titolo-foto: fotografie dentro il titolo ---------- */
.fx-parola { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.fx-parola > span { display: inline-block; }
.fx-pillola {
  display: inline-block; position: relative; overflow: hidden;
  width: var(--fx-pillola); height: .74em; margin: 0 .1em; border-radius: 999px; vertical-align: -.04em;
  transition: width .6s var(--fx-curva);
}
.fx-pillola img {
  position: absolute; left: 50%; top: 0; width: 2.7em; max-width: none; height: 100%;
  object-fit: cover; transform: translateX(-50%);
}
.fx-pillola.fx-tonda { width: .74em; }
@media (hover: hover) and (pointer: fine) {
  .fx-titolo-foto:hover .fx-pillola:not(.fx-tonda) { width: var(--fx-pillola-aperta); }
}
html.fx-js [data-fx~="titolo-foto"]:not(.fx-fatto) { visibility: hidden; }

/* ---------- 3. gradini: cambio pagina a scalinata ---------- */
.fx-gradini { position: fixed; inset: 0; z-index: 9999; display: flex; pointer-events: none; }
.fx-gradino {
  flex: 1 1 0; margin-right: -1px; background: var(--fx-gradini-colore);
  transform: scaleY(0); transform-origin: 50% 100%; will-change: transform;
}
html.fx-arrivo::before {
  content: ""; position: fixed; inset: 0; z-index: 9998; background: var(--fx-gradini-colore);
}

/* ---------- 4. liquido: il titolo si deforma sotto il cursore (solo computer) ---------- */
.fx-liquido-corpo { display: block; position: relative; }
.fx-liquido-base { display: block; }
.fx-liquido-onda {
  display: block; position: absolute;
  /* ai lati si allarga solo fin dove c'è pagina (misure messe dal JS), così non crea scorrimento laterale */
  inset: -.6em calc(var(--fx-dx, 0) * -1px) -.6em calc(var(--fx-sx, 0) * -1px);
  padding: .6em calc(var(--fx-dx, 0) * 1px) .6em calc(var(--fx-sx, 0) * 1px);
  pointer-events: none; visibility: hidden;
  -webkit-mask-image: radial-gradient(circle calc(var(--fx-r, 0) * 1px) at calc(var(--fx-x, 0) * 1px) calc(var(--fx-y, 0) * 1px), #000 0 60%, transparent 100%);
  mask-image: radial-gradient(circle calc(var(--fx-r, 0) * 1px) at calc(var(--fx-x, 0) * 1px) calc(var(--fx-y, 0) * 1px), #000 0 60%, transparent 100%);
}
.fx-attivo .fx-liquido-onda { visibility: visible; }
.fx-attivo .fx-liquido-base {
  -webkit-mask-image: radial-gradient(circle calc(var(--fx-r, 0) * 1px) at calc(var(--fx-bx, 0) * 1px) calc(var(--fx-by, 0) * 1px), transparent 0 56%, #000 96%);
  mask-image: radial-gradient(circle calc(var(--fx-r, 0) * 1px) at calc(var(--fx-bx, 0) * 1px) calc(var(--fx-by, 0) * 1px), transparent 0 56%, #000 96%);
}

/* ---------- 5. scia: le foto entrano con la scia di movimento ---------- */
.fx-scia { overflow: hidden; margin: 0; }
.fx-scia img,
.fx-scia video { display: block; width: 100%; height: 100%; object-fit: cover; }
html.fx-js [data-fx~="scia"]:not(.fx-fatto) { visibility: hidden; }

/* ---------- 6. cupola: fotografie che galleggiano attorno al titolo ---------- */
.fx-cupola { position: relative; display: grid; place-items: center; overflow: hidden; }
.fx-cupola-foto { position: absolute; inset: 0; perspective: 1100px; pointer-events: none; }
.fx-cupola:not(.fx-fatto) .fx-cupola-foto { display: none; }
.fx-cupola-centro { position: relative; z-index: 2; }
.fx-tessera { position: absolute; left: 50%; top: 50%; width: var(--fx-lato, 140px); aspect-ratio: 4 / 5; }
.fx-tessera-par,
.fx-tessera-volo { width: 100%; height: 100%; }
.fx-tessera-volo {
  overflow: hidden; border-radius: 18%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .26);
  animation: fx-volo var(--fx-t, 7s) ease-in-out var(--fx-d, 0s) infinite alternate;
}
.fx-tessera img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-cupola:not(.fx-attiva) .fx-tessera-volo { animation-play-state: paused; }
@keyframes fx-volo {
  from { transform: translate3d(0, -7px, 0) rotate(-1.2deg); }
  to { transform: translate3d(0, 9px, 0) rotate(1.4deg); }
}

/* ---------- 7. fisarmonica: galleria che si allarga ---------- */
.fx-fisarmonica { --fx-apertura: 5; display: flex; gap: 10px; height: min(72svh, 620px); }
.fx-anta {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden;
  margin: 0; padding: 0; border: 0; border-radius: 18px;
  background: #1d1a17; color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: flex-grow .7s var(--fx-curva);
}
.fx-anta.fx-aperta { flex-grow: var(--fx-apertura); }
.fx-anta img {
  position: absolute; left: 50%; top: 0; width: var(--fx-anta-misura, 60vw); max-width: none; height: 100%;
  object-fit: cover; transform: translateX(-50%);
}
.fx-anta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(12, 10, 8, .5);
  transition: opacity .6s var(--fx-curva);
}
.fx-anta.fx-aperta::before { opacity: 0; }
.fx-anta::after {
  content: ""; position: absolute; inset: 40% 0 0 0; z-index: 1;
  background: linear-gradient(to top, rgba(12, 10, 8, .72), rgba(12, 10, 8, 0));
  opacity: 0; transition: opacity .6s var(--fx-curva);
}
.fx-anta.fx-aperta::after { opacity: 1; }
.fx-anta-testo {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
  white-space: nowrap; opacity: 0; transform: translateY(12px);
  transition: opacity .3s, transform .6s var(--fx-curva);
}
.fx-anta.fx-aperta .fx-anta-testo { opacity: 1; transform: none; transition-delay: .2s; }
.fx-anta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
html.fx-js [data-fx~="fisarmonica"]:not(.fx-fatto) { visibility: hidden; }
@media (max-width: 760px) {
  .fx-fisarmonica { flex-direction: column; height: min(86svh, 720px); }
  .fx-anta img { left: 0; top: 50%; width: 100%; height: var(--fx-anta-misura, 50svh); transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-tessera-volo { animation: none; }
  .fx-pillola, .fx-anta, .fx-anta::before, .fx-anta::after, .fx-anta-testo { transition: none; }
}