/* ============================================================
   BULL SYSTEMS — MOTION SYSTEM (núcleo)
   Conceito: "Força digital em movimento"
   - Tokens globais de movimento
   - Sistema reutilizável [data-animate] (scroll reveal)
   - Microinterações globais
   - Acessibilidade (prefers-reduced-motion), print e no-JS
   Estados ocultos são aplicados SOMENTE sob html.js-motion
   (classe adicionada por script inline; removida via onerror
   dos scripts de motion) — sem JS o conteúdo fica visível.
   ============================================================ */

:root {
    --motion-duration-instant: 120ms;
    --motion-duration-emphasis: 760ms;
    --motion-duration-reveal: 1050ms;
    --motion-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
    --motion-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

    --motion-distance-xs: 4px;
    --motion-distance-sm: 8px;
    --motion-distance-md: 16px;
    --motion-distance-lg: 32px;
    --motion-distance-xl: 56px;
    --motion-reveal-distance-x: clamp(48px, 5vw, 72px);
    --motion-reveal-distance-y: clamp(36px, 4vw, 52px);
    --motion-reveal-scale: 0.985;
    --motion-glow-blue: rgba(29, 139, 255, 0.18);
    --motion-glow-red: rgba(217, 4, 41, 0.14);
}

/* ------------------------------------------------------------
   Sistema de scroll reveal reutilizável
   Uso: data-animate="fade-up|fade-down|fade-left|fade-right|
        zoom-in|reveal-mask|fade|stagger-group|trigger"
        data-delay="120" data-duration="1050" data-repeat="true"
   ------------------------------------------------------------ */
html.js-motion,
html.js-motion body {
    overflow-x: clip;
}

html.js-motion [data-animate] {
    opacity: 0;
    transition:
        opacity var(--animation-duration, var(--motion-duration-reveal)) var(--motion-ease-reveal),
        transform var(--animation-duration, var(--motion-duration-reveal)) var(--motion-ease-reveal),
        clip-path var(--animation-duration, var(--motion-duration-reveal)) var(--motion-ease-reveal);
    transition-delay: var(--animation-delay, 0ms);
    backface-visibility: hidden;
    will-change: auto;
}

html.js-motion [data-animate="fade-up"] {
    transform: translate3d(0, var(--motion-reveal-distance-y), 0) scale(var(--motion-reveal-scale));
}
html.js-motion [data-animate="fade-down"] {
    transform: translate3d(0, calc(-1 * var(--motion-reveal-distance-y)), 0) scale(var(--motion-reveal-scale));
}
html.js-motion [data-animate="fade-left"] {
    transform: translate3d(var(--motion-reveal-distance-x), 0, 0) scale(var(--motion-reveal-scale));
}
html.js-motion [data-animate="fade-right"] {
    transform: translate3d(calc(-1 * var(--motion-reveal-distance-x)), 0, 0) scale(var(--motion-reveal-scale));
}
html.js-motion [data-animate="zoom-in"] {
    transform: scale(0.92);
}
html.js-motion [data-animate="reveal-mask"] {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 24px, 0);
}

/* "trigger": não esconde a si mesmo — apenas dispara efeitos filhos */
html.js-motion [data-animate="trigger"] {
    opacity: 1;
    transform: none;
}

/* Grupo com stagger: o pai é o gatilho, filhos entram em sequência */
html.js-motion [data-animate="stagger-group"] {
    opacity: 1;
    transform: none;
}
html.js-motion [data-animate="stagger-group"] > :not([data-animate]) {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.99);
    transition:
        opacity var(--animation-duration, var(--motion-duration-reveal)) var(--motion-ease-reveal),
        transform var(--animation-duration, var(--motion-duration-reveal)) var(--motion-ease-reveal);
    transition-delay: var(--stagger-delay, 0ms);
}

html.js-motion [data-animate].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
html.js-motion [data-animate="reveal-mask"].is-visible {
    clip-path: inset(0 0 0% 0);
}
html.js-motion [data-animate="stagger-group"].is-visible > :not([data-animate]) {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* ------------------------------------------------------------
   Header — comportamento no scroll (estado controlado por JS)
   ------------------------------------------------------------ */
.header {
    transition:
        background-color var(--motion-duration-normal) var(--motion-ease-standard),
        border-color var(--motion-duration-normal) var(--motion-ease-standard),
        box-shadow var(--motion-duration-normal) var(--motion-ease-standard);
}
html.js-motion .header {
    animation: header-drop var(--motion-duration-emphasis) var(--motion-ease-enter) both;
}
@keyframes header-drop {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.header.is-scrolled {
    border-bottom-color: rgba(29, 139, 255, 0.28);
    box-shadow: 0 8px 30px rgba(1, 8, 24, 0.55);
}

/* ------------------------------------------------------------
   Menu mobile — bloqueio de scroll + stagger dos itens
   ------------------------------------------------------------ */
body.nav-lock {
    overflow: hidden;
}
@media (max-width: 760px) {
    html.js-motion .nav.open a {
        opacity: 0;
        transform: translateY(-8px);
        animation: nav-item-in var(--motion-duration-normal) var(--motion-ease-enter) both;
    }
    html.js-motion .nav.open a:nth-child(1) { animation-delay: 40ms; }
    html.js-motion .nav.open a:nth-child(2) { animation-delay: 80ms; }
    html.js-motion .nav.open a:nth-child(3) { animation-delay: 120ms; }
    html.js-motion .nav.open a:nth-child(4) { animation-delay: 160ms; }
    html.js-motion .nav.open a:nth-child(5) { animation-delay: 200ms; }
    html.js-motion .nav.open a:nth-child(6) { animation-delay: 240ms; }
    @keyframes nav-item-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ------------------------------------------------------------
   Microinterações globais
   ------------------------------------------------------------ */

/* Ícones dos cards de serviço — micro variação por posição */
.service-card .material-icons-outlined {
    transition: transform var(--motion-duration-normal) var(--motion-ease-bounce);
}
.service-card:hover:nth-child(3n + 1) .material-icons-outlined { transform: translateY(-4px); }
.service-card:hover:nth-child(3n + 2) .material-icons-outlined { transform: rotate(-8deg) scale(1.08); }
.service-card:hover:nth-child(3n)     .material-icons-outlined { transform: scale(1.1); }

/* Linha inferior animada nos cards interativos */
.diff-card,
.service-card {
    position: relative;
    overflow: hidden;
}
.diff-card::after,
.service-card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(29, 139, 255, 0.75), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-duration-slow) var(--motion-ease-enter);
    pointer-events: none;
}
.diff-card:hover::after,
.service-card:hover::after {
    transform: scaleX(1);
}

/* Glow ambiente em uma camada pequena movida por transform. O JS atualiza
   uma vez no próximo frame, sem interpolação ou cauda atrasada. */
.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 680px;
    height: 680px;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at center,
        rgba(120, 195, 255, 0.10),
        rgba(78, 171, 255, 0.045) 34%,
        transparent 62%
    );
    transform: translate3d(calc(50vw - 340px), calc(38vh - 340px), 0);
    contain: strict;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce), (hover: none), (max-width: 768px) {
    .cursor-glow { display: none; }
}

/* Glow radial que segue o cursor (JS define --pointer-x/--pointer-y) */
.pointer-glow {
    --pointer-x: 50%;
    --pointer-y: 50%;
}
.pointer-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        420px circle at var(--pointer-x) var(--pointer-y),
        var(--motion-glow-blue),
        transparent 45%
    );
    transition: opacity var(--motion-duration-fast) ease;
    z-index: 0;
}
.pointer-glow:hover::before { opacity: 1; }
.pointer-glow > * { position: relative; z-index: 1; }

/* Formulário — feedback de foco, validade e envio */
.form-group { position: relative; }
.form-group label {
    transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.form-group:focus-within label { color: var(--neon, #4eabff); }
.form-group::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(29, 139, 255, 0.85), rgba(217, 4, 41, 0.65));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-duration-normal) var(--motion-ease-enter);
    pointer-events: none;
}
.form-group:focus-within::after { transform: scaleX(1); }
.form-group.is-valid::after {
    transform: scaleX(1);
    background: rgba(46, 204, 113, 0.55);
}
.form-group.is-valid label::after {
    content: ' ✓';
    color: #2ecc71;
    font-weight: 700;
}
.form-group .error-message {
    display: block;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.form-group .error-message:not(:empty) {
    opacity: 1;
    transform: translateY(0);
}
.input-error {
    animation: input-nudge 260ms var(--motion-ease-standard);
}
@keyframes input-nudge {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
}

/* Ripple de clique — só em elementos interativos (.btn), nunca global */
.btn {
    position: relative;
    overflow: hidden;
}
.btn-ripple {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: btn-ripple 550ms ease-out;
}
@keyframes btn-ripple {
    from { transform: scale(0); opacity: 0.6; }
    to   { transform: scale(26); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-ripple { display: none; }
}

/* Botão em estado de loading (sem box-shadow) */
.btn.is-loading {
    pointer-events: none;
    opacity: 0.85;
    position: relative;
    color: transparent;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Links do rodapé / sociais */
.footer-social a {
    transition:
        color var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.footer-social a:hover {
    color: #fff !important;
    transform: translateY(-2px);
}
.footer {
    position: relative;
}
.footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(29, 139, 255, 0.6), transparent);
    transform: scaleX(0);
    transition: transform 900ms var(--motion-ease-enter);
}
.footer.is-visible::before,
html:not(.js-motion) .footer::before {
    transform: scaleX(1);
}

/* ------------------------------------------------------------
   Responsividade do movimento
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    html.js-motion {
        --motion-reveal-distance-x: 34px;
        --motion-reveal-distance-y: 28px;
    }

    html.js-motion [data-animate="stagger-group"] > :not([data-animate]) {
        transform: translate3d(0, 22px, 0) scale(0.992);
    }
}

/* Dispositivos touch: sem efeitos dependentes de cursor */
@media (hover: none) {
    .pointer-glow::before { display: none; }
}

/* ------------------------------------------------------------
   Acessibilidade e segurança de conteúdo
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    [data-animate],
    html.js-motion [data-animate],
    html.js-motion [data-animate="stagger-group"] > * {
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}

@media print {
    [data-animate],
    html.js-motion [data-animate],
    html.js-motion [data-animate="stagger-group"] > * {
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}