/* ==========================================
   ANIMAÇÕES GLOBAIS
========================================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes float {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

@keyframes pulseGlow {

    0% {

        box-shadow: 0 0 0 rgba(255,122,0,.2);

    }

    50% {

        box-shadow: 0 0 30px rgba(255,122,0,.35);

    }

    100% {

        box-shadow: 0 0 0 rgba(255,122,0,.2);

    }

}

@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* ==========================================
   ANIMATED GRADIENT MESH
   Usado no fundo da seção de Assistência
   Técnica para dar sensação de profundidade
   e tecnologia sem custo de performance.
========================================== */

@keyframes meshDrift {

    0%, 100% {
        background-position: 0% 0%, 100% 100%;
    }

    50% {
        background-position: 8% 6%, 92% 94%;
    }

}

/* ==========================================
   ANIMATED BORDER
   Usada em cards de destaque (ex: Atendimento
   em Domicílio) para reforçar hierarquia sem
   depender apenas de cor estática.
========================================== */

@keyframes borderGlow {

    0%, 100% {
        border-color: rgba(255,122,0,.22);
    }

    50% {
        border-color: rgba(255,122,0,.55);
    }

}

.tech-highlight-card-home {
    animation: borderGlow 4s ease-in-out infinite;
}

/* ==========================================
   SCROLL REVEAL
   Aplicado via animation.js (IntersectionObserver)
========================================== */

.reveal {

    opacity: 0;

    transform: translateY(32px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22, .61, .36, 1);

    will-change: opacity, transform;

}

.reveal.in-view {

    opacity: 1;

    transform: translateY(0);

}

/* Efeito escalonado para grids de cards */

.services-grid .reveal:nth-child(2),
.features-grid .reveal:nth-child(2),
.process-grid .reveal:nth-child(2),
.tech-grid .reveal:nth-child(2),
.tech-highlights .reveal:nth-child(2),
.build-grid .reveal:nth-child(2),
.about-highlights .reveal:nth-child(2) {
    transition-delay: .08s;
}

.services-grid .reveal:nth-child(3),
.features-grid .reveal:nth-child(3),
.process-grid .reveal:nth-child(3),
.tech-grid .reveal:nth-child(3),
.build-grid .reveal:nth-child(3),
.about-highlights .reveal:nth-child(3) {
    transition-delay: .16s;
}

.services-grid .reveal:nth-child(4),
.features-grid .reveal:nth-child(4),
.process-grid .reveal:nth-child(4),
.tech-grid .reveal:nth-child(4),
.about-highlights .reveal:nth-child(4) {
    transition-delay: .24s;
}

.services-grid .reveal:nth-child(5),
.features-grid .reveal:nth-child(5),
.tech-grid .reveal:nth-child(5) {
    transition-delay: .32s;
}

.services-grid .reveal:nth-child(6),
.tech-grid .reveal:nth-child(6) {
    transition-delay: .4s;
}

/* Reduz movimento para quem tem essa preferência do sistema */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}