/*
  ===========================================================================
  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.
   - ".hero-board" e ".match-strip" non hanno transform proprie
     (solo i loro elementi figli ne hanno), quindi possiamo animarle
     in sicurezza per un effetto di leggera profondita'.
--------------------------------------------------------------------- */
.hero-media {
  opacity: calc(1 - (var(--fx-hero-progress, 0) * 0.4));
}

.hero-board,
.match-strip {
  transform: translateY(calc(var(--fx-hero-progress, 0) * -28px));
  opacity: calc(1 - (var(--fx-hero-progress, 0) * 0.45));
  transition: opacity .2s linear, transform .2s linear;
}

/* ---------------------------------------------------------------------
   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,
.score-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,
.score-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;
}

/* Link "semplici" che oggi non hanno nessun effetto al passaggio del
   mouse (verificato in styles.css): un piccolo spostamento + cambio
   colore, coerente con lo stile "sweep" gia' usato nel menu principale
   (.main-nav a::after), qui pero' su un'altra famiglia di elementi
   per non toccare regole esistenti. */
.redazione-card a,
.hero-board a {
  display: inline-block;
  transition: color .28s var(--fx-ease-out), transform .28s var(--fx-ease-out);
}

.redazione-card a:hover,
.hero-board a:hover {
  transform: translateX(4px);
}

/* 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;
}

/* ---------------------------------------------------------------------
   5) Loghi sponsor: da bianco e nero a colore al passaggio del mouse
   ---------------------------------------------------------------------
   Effetto comune ed elegante per la vetrina sponsor: il logo appare
   leggermente "spento" (bianco e nero) finche' non ci si passa sopra,
   poi torna a colore pieno. Tocca solo "filter" e "opacity" (nessun
   impatto su layout), applicato sull'<img> senza toccare le dimensioni
   o i bordi gia' definiti in styles.css. Nella fascia scorrevole
   (.sponsor-marquee) il passaggio del mouse ferma gia' lo scorrimento
   (regola esistente in styles.css), quindi qui si vede bene anche il
   cambio di colore sul singolo logo.
--------------------------------------------------------------------- */
.sponsor-marquee-item img,
.sponsor-logo img {
  filter: grayscale(100%);
  opacity: .78;
  transition: filter .32s var(--fx-ease-out), opacity .32s var(--fx-ease-out);
}

.sponsor-marquee-item:hover img,
.sponsor-card:hover .sponsor-logo img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ---------------------------------------------------------------------
   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,
  .hero-board,
  .match-strip {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .primary-button:hover,
  .secondary-button:hover,
  .ghost-button:hover,
  .upload-button:hover,
  .filter-button:hover,
  .score-button:hover,
  .redazione-card a:hover,
  .hero-board a:hover {
    transform: none !important;
  }

  .sponsor-marquee-item img,
  .sponsor-logo img {
    transition: none !important;
  }
}