/* ============================================================
   animations.css — Animazioni di scroll e keyframe
   1. Classi reveal (stato iniziale nascosto)
   2. Classe .revealed (stato finale visibile)
   3. Keyframe animazioni
   4. Animazioni specifiche per elementi
============================================================ */


/* ============================================================
   1. STATI INIZIALI — elementi nascosti prima dell'entrata
      in viewport. Aggiunti dall'HTML, rimossi da scroll-animations.js
============================================================ */

.reveal-up {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-56px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(56px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.91);
    transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal-fade {
    opacity: 0;
    transition: opacity 0.8s ease;
}


/* ============================================================
   2. STATO RIVELATO — aggiunto da IntersectionObserver
============================================================ */

.revealed {
    opacity: 1  !important;
    transform: none !important;
}


/* ============================================================
   3. KEYFRAME ANIMATIONS
============================================================ */

/* Entrata pagina — gestita dal page-loader in main.js */
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* body non ha più l'animation: è il loader a fare da "sipario" */

/* --- Tagline: lettera spacing in entrata --- */
@keyframes taglineIn {
    from {
        opacity: 0;
        letter-spacing: 0.45em;
    }
    to {
        opacity: 1;
        letter-spacing: 0.12em;
    }
}

/* --- Invito a scorrere: segmento che scende lungo la linea --- */
@keyframes scrollCue {
    0%   { transform: translateY(0); }
    100% { transform: translateY(266%); }
}

/* --- Firma: leggero galleggiamento ---
   Usa "translate" e non "transform" di proposito. La regola .revealed
   azzera transform con !important per far comparire gli elementi, e con
   quella priorità vinceva sull'animazione: la firma restava ferma.
   "translate" è una proprietà a sé, che si somma a transform invece di
   litigarci — così il galleggiamento parte e la parallasse resta libera. */
@keyframes float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
}

/* --- Linea che cresce --- */
@keyframes growLine {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}


/* ============================================================
   4. ANIMAZIONI APPLICATE A ELEMENTI SPECIFICI
============================================================ */

/* Tagline — animazione lettering speciale */
.tagline.revealed {
    animation: taglineIn 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Firma — galleggia dopo la rivelazione */
.firma-img.revealed {
    animation: float 5s ease-in-out infinite;
    animation-delay: 0.6s;
}

/* Separatore decorativo */
.divider {
    height: 1px;
    background: var(--gray-800);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.divider.revealed { transform: scaleX(1); }

/* Stagger per i child di un elemento contenitore.
   Uso: aggiungi data-stagger sull'elemento padre,
   e lo script assegna transition-delay incrementale ai child. */
[data-stagger] > *.revealed {
    transition-delay: calc(var(--stagger-i, 0) * 0.09s);
}

/* Numero capitolo — cambio colore al reveal */
.storia-block .chapter-number {
    transition: color 0.5s ease;
}

/* Hover sul blocco: numero più chiaro */
.storia-block:hover .chapter-number {
    color: var(--gray-600);
}

/* Parallax leggero sulla griglia di testo (gestito anche in scroll-animations.js con GSAP) */
.chapter-image .collage-item {
    will-change: transform;
}


/* ============================================================
   5. MOVIMENTO RIDOTTO
   Chi ha attivato "riduci movimento" nel sistema operativo non
   deve subire animazioni continue.
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .scroll-cue-line::after,
    .firma-img.revealed,
    .tagline.revealed {
        animation: none;
    }

    .scroll-cue-line::after { top: 0; height: 100%; opacity: 0.5; }
}