/* ============================================================
   ANIMATIONS.CSS — Wilson's Grills
   Animações de scroll — CSS puro, sem JavaScript
============================================================ */

@view-transition{
Navigation: auto; 
}

body:view-transition-group(root){
Animation-duration: 1s;
} 

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Animações vinculadas ao scroll (CSS nativo moderno) ────── */
[data-animate="fade-up"] {
    animation: fadeUp 0.6s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

[data-animate="fade-in"] {
    animation: fadeIn 0.6s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

[data-animate="fade-right"] {
    animation: fadeRight 0.6s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

[data-animate="fade-left"] {
    animation: fadeLeft 0.6s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

/* ── Delays encadeados ──────────────────────────────────────── */
[data-delay="100"] { animation-delay: 0.1s; }
[data-delay="200"] { animation-delay: 0.2s; }
[data-delay="300"] { animation-delay: 0.3s; }
[data-delay="400"] { animation-delay: 0.4s; }
[data-delay="500"] { animation-delay: 0.5s; }
[data-delay="600"] { animation-delay: 0.6s; }

/* ── Hover nos cards ────────────────────────────────────────── */
.custom-card,
.team-card,
.buffet-card,
.depoimento-card,
.stat-card {
    transition: transform var(--transition-default),
                box-shadow var(--transition-default),
                border-color var(--transition-default);
}

/* ── Fallback — respeita preferência do usuário ─────────────── */
@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        animation: none;
    }
}