/* animations.css - Sistema di animazioni reveal premium */

/* --- View Transitions API: cross-fade tra pagine (micro-interazione premium, 10 giu) ---
   Progressive enhancement: sui browser senza supporto la riga è ignorata
   e non cambia nulla. Durata default (~0.25s), nessuna personalizzazione. */
@view-transition {
    navigation: auto;
}

/* Rispetta le preferenze utente */
@media (prefers-reduced-motion: reduce) {
    /* View transition disattivata: cambio pagina istantaneo */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    [data-reveal],
    [data-reveal-hero],
    [data-reveal-stagger] > *,
    [data-reveal-sidebar] > *,
    [data-reveal-nl] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --- Base reveal (sezioni, singoli blocchi) --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* --- Hero reveal (sottile, quasi subliminale) --- */
[data-reveal-hero] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}

[data-reveal-hero].revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* --- Stagger container: figli appaiono in cascata --- */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-reveal-stagger].revealed > * {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Delay progressivo per ogni figlio (max 8) */
[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 350ms; }

/* --- Sidebar reveal (lieve ritardo rispetto all'hero) --- */
[data-reveal-sidebar] > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.55s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: opacity, transform;
}

[data-reveal-sidebar].revealed > * {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

[data-reveal-sidebar].revealed > *:nth-child(1) { transition-delay: 80ms; }
[data-reveal-sidebar].revealed > *:nth-child(2) { transition-delay: 230ms; }
[data-reveal-sidebar].revealed > *:nth-child(3) { transition-delay: 380ms; }

/* Reset del delay-stagger DOPO l'entrata: il transition-delay NON deve ritardare
   l'hover dei figli interattivi (es. .buy-cta). Era in home.css (solo home) →
   qui in animations.css (caricato ovunque) vale su tutte le pagine. */
[data-reveal-sidebar].revealed > *,
[data-reveal-stagger].revealed > * { transition-delay: 0s !important; }

/* --- Newsletter slide-up --- */
[data-reveal-nl] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-reveal-nl].revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* --- Header fade-in on load --- */
.header {
    animation: headerSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes headerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Keyframes quiz (condivisi da recensione, guida, scheda-tecnica) --- */
@keyframes quizExpandIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes quizFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Press feedback al tocco (micro-interazione premium, 10 giu) ---
   Solo @media (pointer: coarse): su touch l'hover non esiste, quindi
   lo scale non entra mai in conflitto con i translateY hover delle card
   (che su desktop restano gli unici a muovere gli elementi).
   prefers-reduced-motion: no-preference = il press si disattiva da solo
   per chi ha chiesto meno movimento (equivale al blocco reduce in testa).
   Solo transform, nessun cambio colore. */
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
    body :is(
        .logo, .nav a, .mobile-nav-item,
        .hero-main, .article-card, .rumor-card, .related-card, .related-item,
        a.card, a.featured,
        .product-nav-link, .quick-pick-link,
        .filter-tab, .cat-item, .mobile-cat, .cb-pill, .af-reset,
        .custom-select-trigger, .custom-option, .fsh-link,
        .toc-link, .float-toc-link, .float-toc-btn,
        .faq-question, .poll-option, .quiz-opt, .quiz-back, .rumor-accordion-trigger,
        .buy-cta, .smart-cta, .mobile-bar-cta, .nl-btn,
        .view-all, .pg-btn, .retry-btn, .cta-btn, .impatto-cta, .sidebar-follow-btn,
        .btt, .gz-close, .gz-link, .fc-arrow, .fc-dot
    ):active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* --- Newsletter button hover shimmer --- */
.nl-btn {
    position: relative;
    overflow: hidden;
}

.nl-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.nl-btn:hover::after {
    transform: translateX(100%);
}

/* ============================================
   MOBILE ANIMATION TUNING
   Durate ridotte, movimenti piu contenuti,
   stagger piu rapidi per scroll veloce con dito
============================================ */
@media (max-width: 768px) {
    /* Base reveal — piu veloce e corto */
    [data-reveal] {
        transform: translateY(16px);
        transition-duration: 0.4s;
    }

    /* Hero reveal — ancora piu sottile */
    [data-reveal-hero] {
        transform: translateY(10px);
        transition-duration: 0.35s;
    }

    /* Stagger — delay ridotti, su colonna singola sono uno sotto l'altro */
    [data-reveal-stagger] > * {
        transform: translateY(14px);
        transition-duration: 0.35s;
    }

    [data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; }
    [data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 50ms; }
    [data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 100ms; }
    [data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 150ms; }
    [data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 200ms; }
    [data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 250ms; }
    [data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: 300ms; }
    [data-reveal-stagger].revealed > *:nth-child(8) { transition-delay: 350ms; }

    /* Sidebar — piu veloce su mobile (spesso sotto il main content) */
    [data-reveal-sidebar] > * {
        transform: translateY(10px);
        transition-duration: 0.4s;
    }

    [data-reveal-sidebar].revealed > *:nth-child(1) { transition-delay: 60ms; }
    [data-reveal-sidebar].revealed > *:nth-child(2) { transition-delay: 160ms; }
    [data-reveal-sidebar].revealed > *:nth-child(3) { transition-delay: 260ms; }

    /* Newsletter — veloce */
    [data-reveal-nl] {
        transform: translateY(10px);
        transition-duration: 0.35s;
    }

    /* Choose cards (comparazione) — riduci il translateX */
    [data-reveal-left] {
        transform: translateX(-16px);
        transition-duration: 0.45s;
    }

    [data-reveal-right] {
        transform: translateX(16px);
        transition-duration: 0.45s;
    }

    /* Section verdict (comparazione) */
    .section-verdict {
        transform: translateX(-10px);
        transition-duration: 0.4s;
    }
}