/* Effetti grafici aggiuntivi, condivisi da tutte le pagine.
   Si attivano solo con la classe "fx" sull'elemento <html> (aggiunta da uno script in testa
   alla pagina, e mai se il visitatore ha chiesto di ridurre il movimento).
   Senza quella classe ogni contenuto resta visibile e fermo. */

/* Passaggio morbido tra una pagina e l'altra (browser che lo supportano) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.22s ease both fx-esci; }
::view-transition-new(root) { animation: 0.32s ease both fx-entra; }
@keyframes fx-esci { to { opacity: 0; } }
@keyframes fx-entra { from { opacity: 0; transform: translateY(6px); } }

/* Apertura della home: gli elementi del titolo salgono uno dopo l'altro */
@keyframes fx-sali { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fx-linea { from { width: 0; } }
.fx .hero .wrap > .eyebrow,
.fx .hero h1,
.fx .hero .sub,
.fx .hero .presentazione,
.fx .hero .hero-stats .stat,
.fx .hero .cta-row,
.fx .hero .cta-note { animation: fx-sali 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.fx .hero .wrap > .eyebrow { animation-delay: 0.05s; }
.fx .hero .presentazione { animation-delay: 0.42s; }
.fx .hero .wrap > .eyebrow::before { animation: fx-linea 0.7s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.fx .hero h1 { animation-delay: 0.15s; }
.fx .hero .sub { animation-delay: 0.35s; }
.fx .hero .hero-stats .stat:nth-child(1) { animation-delay: 0.5s; }
.fx .hero .hero-stats .stat:nth-child(2) { animation-delay: 0.6s; }
.fx .hero .hero-stats .stat:nth-child(3) { animation-delay: 0.7s; }
.fx .hero .cta-row { animation-delay: 0.85s; }
.fx .hero .cta-note { animation-delay: 0.95s; }

/* Sottolineatura oro che si disegna sotto la parte evidenziata del titolo */
@keyframes fx-sottolinea { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
.fx .hero h1 em {
  background-image: linear-gradient(90deg, var(--gold), rgba(184, 151, 90, 0.35));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: fx-sottolinea 1.1s 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}




/* Linea del grafico che si disegna quando entra nello schermo */
.fx-disegna { transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1); }
.fx-area { transition: opacity 1.2s ease 0.9s; }

/* Trattino oro delle etichette di sezione che si allunga quando la sezione compare */
.fx .appare .eyebrow::before, .fx .appare.eyebrow::before { width: 0; transition: width 0.7s 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); }
.fx .appare-in .eyebrow::before, .fx .appare-in.eyebrow::before { width: 22px; }

/* Grafici dorati che scorrono sullo sfondo bianco (apertura, contatti, pagina Pensione) */
.fx-sfondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
[data-sfondo-grafico] { position: relative; overflow: hidden; }
[data-sfondo-grafico] > :not(.fx-sfondo) { position: relative; z-index: 1; }
.fx-sfondo.on { opacity: 1; }

/* ---- Animazioni accattivanti (solo con .fx) ---- */

/* Alone dorato che fluttua lentamente nell'apertura */
@keyframes fx-fluttua { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 36px) scale(1.18); } }
.fx .hero::after { animation: fx-fluttua 14s ease-in-out infinite; }
.fx .hero::before {
  content: ""; position: absolute; left: -180px; bottom: -220px; width: 460px; height: 460px; pointer-events: none;
  background: radial-gradient(circle, rgba(184, 151, 90, 0.08) 0%, transparent 70%);
  animation: fx-fluttua 18s ease-in-out infinite reverse;
}

/* Il titolo entra con un leggero sfocato che si mette a fuoco */
@keyframes fx-fuoco { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.fx .hero h1 { animation-name: fx-fuoco; animation-duration: 1s; }

/* Pulsante principale: riflesso luminoso che lo attraversa, poi si ferma */
@keyframes fx-riflesso { 0%, 55% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
.fx .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.fx .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: fx-riflesso 4.5s 1.6s ease-in-out infinite;
}
.fx .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(167, 123, 42, 0.7); }
.fx .btn-primary:active { transform: translateY(0) scale(0.98); }
.fx .btn-secondary { transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.fx .btn-secondary:hover { transform: translateX(3px); border-color: var(--gold); }

/* Numeri in evidenza: leggero rimbalzo al passaggio */
.fx .stat { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fx .stat:hover { transform: translateY(-4px) scale(1.04); }

/* Schede: si sollevano con ombra morbida e filo oro */
.fx .benefit, .fx .news-card, .fx .list article, .fx .plist article, .fx .pillar {
  transition: background 0.2s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, opacity 0.7s ease;
}
.fx .benefit:hover, .fx .news-card:hover, .fx .list article:hover, .fx .plist article:hover, .fx .pillar:hover {
  transform: translateY(-5px); box-shadow: 0 22px 40px -26px rgba(26, 26, 26, 0.35); z-index: 1;
}
.fx .benefit .icon svg { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s ease; }
.fx .benefit:hover .icon svg { transform: rotate(-8deg) scale(1.18); }

/* Icone dei passi: compaiono con un piccolo "pop" quando la fila entra nello schermo */
.fx .passi:not(.visibile) .passo-icona { transform: scale(0.4); opacity: 0; }
.fx .passi .passo-icona { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; }
.fx .passi .passo:nth-child(2) .passo-icona { transition-delay: 0.25s; }
.fx .passi .passo:nth-child(3) .passo-icona { transition-delay: 0.5s; }
.fx .passo:hover .passo-icona { transform: scale(1.12) rotate(6deg); border-color: var(--gold); }

/* Foto "Chi sono": anello oro che pulsa piano */
@keyframes fx-anello { 0% { box-shadow: 0 0 0 0 rgba(184, 151, 90, 0.45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(184, 151, 90, 0); } }
.fx .presentazione img { animation: fx-anello 3.2s 1.4s ease-out infinite; }

/* Freccia del link secondario che "respira" */
@keyframes fx-su-giu { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
  .fx .hero::after, .fx .hero::before, .fx .btn-primary::after, .fx .presentazione img { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-sfondo { transition: none; }
  @view-transition { navigation: none; }
}