/* ============================================================================
   FLAG OS - MOTION TOKENS ("The Living Grid")
   Arquivo: assets/css/00-motion-tokens.css
   Versão: 1.0 (Cyber-Fast)
   ============================================================================ */

:root {
    /* --------------------------------------------------------------------------
     1. VELOCIDADES (SPEED)
     Filosofia: "Cyber-Fast". O sistema não espera, ele antecipa.
     -------------------------------------------------------------------------- */

    --duration-instant: 100ms;
    /* Feedback de clique, toggles simples */
    --duration-fast: 150ms;
    /* Micro-interações, hovers */
    --duration-cyber: 200ms;
    /* TROCA DE PILARES (Starcraft Slide), Modais */
    --duration-base: 300ms;
    /* Animações de entrada padrão */
    --duration-slow: 500ms;
    /* Elementos grandes, background shifts */
    --duration-pulse: 2000ms;
    /* Respiração (Breathing glow) */

    /* --------------------------------------------------------------------------
     2. CURVAS (EASING)
     Filosofia: "Tech-Precision". Começa rápido, freia com precisão mecânica.
     -------------------------------------------------------------------------- */

    /* Padrão Tático (Bate e fica) - Usar em modais e painéis */
    --ease-tech: cubic-bezier(0.22, 1, 0.36, 1);

    /* Entrada Suave (Slide in) */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Saída (Slide out) */
    --ease-out: cubic-bezier(0.0, 0, 0.2, 1);

    /* Linear (Para fluxos contínuos/sewer visual) */
    --ease-flow: linear;

    /* Bounce Elástico (Apenas para micro-scale de botões) */
    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --------------------------------------------------------------------------
     3. EFEITOS (PHYSICS)
     Filosofia: "Weightless Glass". Vidro sem peso, mas com presença.
     -------------------------------------------------------------------------- */

    /* Scale no clique (Press) */
    --scale-tap: 0.98;

    /* Scale no hover (Lift) */
    --scale-hover: 1.02;

    /* Elevação no hover */
    --lift-hover: -4px;

    /* Blur de profundidade (Cuidado com performance!) */
    --blur-depth: 4px;
}

/* ============================================================================
   CLASSES UTILITÁRIAS DE MOTION
   ============================================================================ */

/* Utility: Pulse (Respiração) */
.motion-pulse {
    animation: anim-pulse var(--duration-pulse) infinite alternate ease-in-out;
}

@keyframes anim-pulse {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* Utility: Sewer Flow (Fluxo de dados em linhas) */
@keyframes sewer-flow {
    to {
        stroke-dashoffset: 0;
    }
}

/* Utility: Slide Transitions (Para JS usar) */
.slide-enter {
    animation: slide-in var(--duration-cyber) var(--ease-tech) forwards;
}

.slide-exit {
    animation: slide-out var(--duration-cyber) var(--ease-tech) forwards;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(20px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
        filter: blur(4px);
    }
}