/*
  ===========================================================================
  animations.css - AC Foligno 1928
  ===========================================================================
  File NUOVO e SEPARATO, aggiunto per rifinire le animazioni del sito
  pubblico (index.html) con un feeling piu "cinematico" e premium
  (ispirazione: siti automotive come lamborghini.com), senza copiare
  colori o stile grafico: qui c'e solo la QUALITA del movimento
  (easing morbido, comparse in scroll, micro-interazioni sui bottoni).

  Dove trovarlo: cartella principale del sito, insieme a style.css e
  styles.css. Collegato in index.html subito dopo style.css.

  IMPORTANTE per chi lavora dopo su questo file:
  - style.css e styles.css hanno GIA' un loro sistema di comparsa in
    scroll (classi ".js-reveal"/".reveal-item" + ".is-visible", gestite
    da script.js e app.js) e un header che si restringe allo scroll
    (classe ".is-scrolled" sull'header, gia' gestita da script.js).
    Questo file NON li duplica: aggiunge solo cio' che manca
    (comparsa delle intere sezioni, alcune card non ancora coperte,
    l'effetto sull'hero e l'offset di scroll per gli ancoraggi del menu).
  - Tutte le classi qui usate iniziano con "fx-" per non entrare in
    conflitto con nomi gia' usati altrove nel sito.
  - Rispetta sempre "prefers-reduced-motion" (utenti che preferiscono
    poche animazioni): vedi il blocco @media in fondo al file.
  ===========================================================================
*/

:root {
  /* Curve di movimento "premium": partenza rapida, arrivo morbidissimo. */
  --fx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Distanza dell'header fisso, usata per non far sparire le sezioni
     sotto il menu quando si clicca un link tipo #news, #storia, ecc.
     Il valore reale viene calcolato e aggiornato da animations.js in
     base all'altezza vera dell'header; questo e' solo un fallback. */
  --fx-header-offset: 104px;
  /* Colore neutro per l'anello di focus da tastiera (accessibilita'). */
  --fx-focus-ring: #11a7e8;
}

/* ---------------------------------------------------------------------
   1) Scroll fluido verso le ancore del menu (#news, #history, ecc.)
   ---------------------------------------------------------------------
   styles.css imposta gia' "scroll-behavior: smooth" a livello globale,
   quindi lo scorrimento e' gia' morbido. Qui aggiungiamo solo il
   margine corretto, cosi' il titolo della sezione non resta nascosto
   sotto l'header che e' "position: fixed". Selettore ampio e a
   specificita' zero (:where) per non litigare con nessun'altra regola.
--------------------------------------------------------------------- */
:where([id]) {
  scroll-margin-top: var(--fx-header-offset);
}

/* ---------------------------------------------------------------------
   2) Comparsa in scroll (reveal) per le sezioni e per alcune card
   ---------------------------------------------------------------------
   Applicata via JavaScript (animations.js) con IntersectionObserver.
   Per sicurezza la classe "fx-reveal" viene aggiunta SOLO da JS: se lo
   script non parte, i contenuti restano semplicemente visibili come
   sono oggi (nessun elemento nasconde contenuto via CSS puro).
--------------------------------------------------------------------- */
.fx-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .8s var(--fx-ease-out) var(--fx-delay, 0ms),
    transform .8s var(--fx-ease-out) var(--fx-delay, 0ms);
  will-change: opacity, transform;
}

.fx-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------
   3) Hero: parallax + dissolvenza leggera durante lo scroll
   ---------------------------------------------------------------------
   animations.js aggiorna la variabile --fx-hero-progress (da 0 a 1)
   sull'elemento ".hero" mentre si scorre lungo l'altezza dell'hero.
   Applichiamo l'effetto solo a proprieta' NON gia' animate altrove:
   - ".hero-media" in style.css/styles.css anima "transform" e
     "background-position" (classe ".motion-enabled"): qui tocchiamo
     SOLO "opacity", quindi nessun conflitto.
   - ".match-strip" non ha transform proprie (solo i suoi elementi figli
     ne hanno), quindi possiamo animarla in sicurezza per un effetto di
     leggera profondita'.
--------------------------------------------------------------------- */
.hero-media {
  opacity: calc(1 - (var(--fx-hero-progress, 0) * 0.4));
}

.match-strip {
  /* Da un semplice scorrimento verso l'alto (translateY) a una vera
     "uscita di scena" in 3D: le card si inclinano all'indietro e si
     allontanano (translateZ negativo) mentre si scorre oltre l'hero. */
  perspective: 1000px;
  transform:
    perspective(1000px)
    rotateX(calc(var(--fx-hero-progress, 0) * 10deg))
    translateY(calc(var(--fx-hero-progress, 0) * -28px))
    translateZ(calc(var(--fx-hero-progress, 0) * -60px));
  opacity: calc(1 - (var(--fx-hero-progress, 0) * 0.45));
  transition: opacity .2s linear, transform .2s linear;
}

/* Lo stemma semi-trasparente sullo sfondo dell'hero (".hero::after" in
   styles.css) legge la stessa --fx-hero-progress impostata sul genitore
   ".hero" (le custom property CSS passano anche agli pseudo-elementi):
   si allontana un po' piu' lentamente del testo, dando una sensazione di
   profondita' invece del solito parallax piatto. */
.hero::after {
  transform: translateY(calc(var(--fx-hero-progress, 0) * -18px)) translateZ(calc(var(--fx-hero-progress, 0) * -80px));
  transition: transform .2s linear;
}

/* ---------------------------------------------------------------------
   3bis) Card "Fondazione / Casa / Identita' / Colori": leggera
   inclinazione 3D verso il puntatore (solo su dispositivi con mouse vero,
   vedi setupPointerTilt in animations.js). --fx-tilt-x/--fx-tilt-y
   arrivano da JS con fallback 0, quindi su touch/tastiera restano piatte.
--------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .facts article {
    transform:
      perspective(700px)
      rotateX(calc(var(--fx-tilt-y, 0) * -6deg))
      rotateY(calc(var(--fx-tilt-x, 0) * 6deg))
      translateZ(0);
    transition: transform .3s var(--fx-ease-out), box-shadow .3s var(--fx-ease-out);
    will-change: transform;
  }

  .facts article:hover {
    z-index: 1;
    box-shadow: 0 20px 44px rgba(3, 15, 34, .28);
  }
}

/* ---------------------------------------------------------------------
   4) Micro-interazioni raffinate su bottoni e link
   ---------------------------------------------------------------------
   Estende (non sostituisce) gli hover gia' presenti su
   .primary-button/.secondary-button/.ghost-button/.upload-button
   (definiti in styles.css): stessa proprieta' (transform/box-shadow),
   solo con una curva piu' morbida e un accenno di scala in piu'.
   Funziona perche' questo file viene caricato DOPO styles.css/style.css.
--------------------------------------------------------------------- */
.primary-button,
.secondary-button,
.ghost-button,
.upload-button,
.filter-button {
  transition:
    transform .32s var(--fx-ease-out),
    box-shadow .32s var(--fx-ease-out),
    background .32s var(--fx-ease-out);
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.upload-button:hover,
.filter-button:hover {
  transform: translateY(-2px) scale(1.015);
}

.primary-button:active,
.secondary-button:active,
.ghost-button:active,
.upload-button:active {
  transform: translateY(0) scale(.985);
  transition-duration: .12s;
}

/* Anello di focus coerente per chi naviga da tastiera: nessuna regola
   equivalente esisteva gia' a livello globale. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--fx-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------
   6) Rispetto delle preferenze di accessibilita'
   ---------------------------------------------------------------------
   Se l'utente ha attivato "riduci animazioni" nel sistema operativo,
   annulliamo qui tutte le animazioni introdotte da questo file.
   style.css/styles.css hanno gia' un blocco analogo per le LORO
   animazioni: questo copre solo quelle aggiunte in questo file.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-media,
  .match-strip {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .hero::after,
  .facts article {
    transition: none !important;
    transform: none !important;
  }

  .primary-button:hover,
  .secondary-button:hover,
  .ghost-button:hover,
  .upload-button:hover,
  .filter-button:hover {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------
   7) Mitigazione crash ripetuti di Safari su iPhone
   ---------------------------------------------------------------------
   Segnalati crash ripetuti ("Si e' verificato ripetutamente un errore")
   SOLO su iPhone/Safari (confermato anche su iPhone 17, quindi non e' un
   problema di RAM insufficiente): su Android, sia con Chrome che con
   Brave, il sito va bene. Un test con schermata registrata ha mostrato il
   crash arrivare durante uno scorrimento veloce, subito dopo aver
   attraversato la griglia "News/Match center/Shop" in home: cioe' proprio
   mentre molte card entrano in schermo quasi insieme e scattano tutte
   insieme l'animazione di comparsa ".reveal-item" qui sotto, che usa una
   rotazione 3D (perspective/rotateX) su ORA QUASI OGNI card del sito
   (vedi styles.css). Su WebKit/iOS un burst di card che diventano
   contemporaneamente layer 3D durante uno scroll veloce e' molto piu'
   pesante che su Chrome/Blink Android, e puo' terminare ripetutamente il
   processo di Safari.

   Oltre al burst da scroll, ci sono anche due animazioni "eterne" (mai in
   pausa, sempre attive finche' il sito resta aperto, anche se l'utente
   non tocca nulla): i tre bagliori sfocati dell'hero (".hero-blob-a/b/c",
   filter: blur(60px) + animazione infinita di 13-21s ciascuno) e il logo
   nell'header che fluttua in 3D ogni 5.8s (".brand img", sempre visibile
   perche' l'header e' fisso, quindi questa non si ferma mai nemmeno
   scorrendo lontano dall'hero). Un carico GPU continuo di questo tipo,
   sommato al burst delle card durante lo scroll, e' un candidato forte
   per un crash "ripetuto" (si accumula col tempo, non serve nemmeno
   interagire: basta lasciare il sito aperto).

   Sotto i 901px (telefoni) tutto questo si disattiva: card in ingresso
   con solo scorrimento verso l'alto (niente perspective/rotateX), hero e
   logo header senza animazione 3D, bagliori sfocati fermi (restano
   visibili ma statici), niente vetro sfocato su header/dialog. Su
   desktop/tablet nulla cambia.

   Riverifica successiva (dopo conferma che i crash si erano fermati):
   trovate altre due animazioni "eterne" rimaste attive anche sotto i
   900px, non coperte dal giro precedente perche' allora si era agito
   solo su "transform"/"opacity", non su "animation":
   - ".hero-media" (video/foto di sfondo nell'hero) ha ANCHE una propria
     animazione continua "stadium-pan" (18s, zoom leggero) impostata in
     styles.css via ".motion-enabled .hero-media": il blocco sopra
     bloccava solo il transform visibile, ma l'animazione restava
     comunque attiva e ricalcolata ad ogni frame in sottofondo.
   - ".match-strip" (striscia prossima partita nell'hero) ha una propria
     animazione continua "match-glow" (2.8s) che anima il box-shadow:
     questa e' potenzialmente la piu' pesante delle due, perche' un
     box-shadow animato costringe il browser a ridisegnare (repaint) quel
     riquadro ad ogni fotogramma, per sempre, finche' il sito resta
     aperto — indipendentemente da scroll o interazione.
   Entrambe vengono ora fermate del tutto (non solo "congelate" nel loro
   stato finale) sotto i 900px. Anche l'ingresso a cascata del testo
   nell'hero (stemma/titolo/sottotitolo/bottoni) passa dalla versione con
   rotazione 3D ("hero-rise-3d") a una versione piatta 2D gia' esistente
   nel sito ("hero-rise", solo dissolvenza + scorrimento verso l'alto),
   per ridurre il numero di layer 3D creati tutti insieme al caricamento
   della pagina. */
@media (max-width: 900px) {
  * {
    backdrop-filter: none !important;
  }

  .hero-media,
  .match-strip {
    transform: none !important;
    opacity: 1 !important;
  }

  .hero::after {
    transform: none !important;
  }

  .reveal-item {
    transform: translateY(26px) !important;
  }

  .reveal-item.is-visible {
    transform: translateY(0) !important;
  }

  .article-card:hover,
  .person-card:hover,
  .product-card:hover,
  .sponsor-card:hover,
  .photo-tile:hover,
  .widget-card:hover,
  .history-copy:hover,
  .identity-card:hover {
    transform: translateY(-4px) !important;
  }

  .fx-reveal {
    will-change: auto !important;
  }

  .motion-enabled .hero-blob-a,
  .motion-enabled .hero-blob-b,
  .motion-enabled .hero-blob-c {
    animation: none !important;
  }

  .hero-blob,
  .site-footer::before {
    filter: blur(24px) !important;
  }

  .motion-enabled .hero-logo,
  .motion-enabled .brand img {
    animation: none !important;
    transform: none !important;
  }

  /* stadium-pan (zoom continuo sfondo hero) e match-glow (box-shadow
     animato in continuazione sulla striscia prossima partita): entrambe
     "eterne", mai coperte prima da un "animation: none" esplicito. */
  .motion-enabled .hero-media,
  .motion-enabled .match-strip {
    animation: none !important;
  }

  /* Ingresso testo hero senza rotazione 3D: stessa durata/ritardo/easing
     (invariati, definiti in styles.css), solo la curva "hero-rise-3d"
     (perspective/rotateX) sostituita dalla versione piatta "hero-rise". */
  .motion-enabled .hero-copy > * {
    animation-name: hero-rise !important;
  }
}