/* LP — motion (Didog DS tokens) */

html:has(body.lp),
html:has(body.didog-lp) {
    scroll-behavior: smooth;
}

/* ── Nav scroll ── */
.lp-nav {
    transition:
        background var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
}

.lp-nav.lp-nav--scrolled {
    background: rgba(13, 12, 11, 0.96) !important;
    border-bottom-color: var(--border-soft) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ── Reveal base ── */
.lp-reveal {
    opacity: 0;
    transition:
        opacity var(--dur-enter) var(--ease-out-expo),
        transform var(--dur-enter) var(--ease-out-expo),
        box-shadow var(--dur-default) var(--ease-out);
    transition-delay: var(--lp-delay, 0ms);
    will-change: opacity, transform;
}

.lp-reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.lp-reveal--up {
    transform: translateY(16px);
}

.lp-reveal--left {
    transform: translateX(-24px);
}

.lp-reveal--right {
    transform: translateX(24px);
}

.lp-reveal--pop {
    transform: scale(0.92);
}

.lp-reveal--mockup {
    transform: translateY(20px);
}

/* ── Hero (load) ── */
.lp-hero-enter {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--dur-enter) var(--ease-out-expo),
        transform var(--dur-enter) var(--ease-out-expo);
    transition-delay: var(--lp-delay, 0ms);
}

body.lp-hero-ready .lp-hero-enter {
    opacity: 1;
    transform: none;
}

.lp-hero-visual .lp-hero-enter.lp-reveal--mockup {
    transform: translateY(20px);
}

body.lp-hero-ready .lp-hero-visual .lp-hero-enter.lp-reveal--mockup {
    transform: none;
}

@media (min-width: 992px) {
    .lp-hero-visual .lp-hero-enter.lp-reveal--mockup {
        transform: translateX(24px);
    }

    body.lp-hero-ready .lp-hero-visual .lp-hero-enter.lp-reveal--mockup {
        transform: none;
    }
}

.lp-mockup-sub--pulse {
    animation: lp-mockup-pulse 3s var(--ease-in-out) infinite;
}

@keyframes lp-mockup-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* ── Solução: conteúdo e visual em direções opostas ── */
.lp-solution-row .lp-solution-content.lp-reveal {
    transform: translateX(-24px);
}

.lp-solution-row .lp-solution-visual.lp-reveal {
    transform: translateX(24px);
}

.lp-solution-row--invert .lp-solution-content.lp-reveal {
    transform: translateX(24px);
}

.lp-solution-row--invert .lp-solution-visual.lp-reveal {
    transform: translateX(-24px);
}

.lp-solution-row .lp-reveal.is-visible {
    transform: none;
}

/* ── Comparativo glow ── */
.lp-compare-card.smartier.lp-compare--destaque {
    box-shadow: var(--shadow-glow);
    border-color: rgba(255, 107, 43, 0.25);
}

.lp-compare-card ul .lp-reveal-item {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--dur-default) var(--ease-out-expo),
        transform var(--dur-default) var(--ease-out-expo);
    transition-delay: var(--lp-delay, 0ms);
}

.lp-compare-card.is-visible ul .lp-reveal-item {
    opacity: 1;
    transform: none;
}

/* ── Fluxo: linha conectora (desktop) ── */
.lp-fluxo-wrap {
    position: relative;
}

.lp-fluxo-line {
    display: none;
}

@media (min-width: 992px) {
    .lp-fluxo-line {
        display: block;
        position: absolute;
        top: 28px;
        left: 8%;
        right: 8%;
        height: 2px;
        background: var(--border-soft);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--dur-slow) var(--ease-out-expo);
        pointer-events: none;
        z-index: 0;
    }

    .lp-fluxo-wrap.is-visible .lp-fluxo-line {
        transform: scaleX(1);
    }

    .lp-fluxo-grid {
        position: relative;
        z-index: 1;
    }
}

.lp-fluxo-numero {
    transition: transform var(--dur-enter) var(--ease-spring);
    transition-delay: var(--lp-delay, 0ms);
}

.lp-fluxo-passo:not(.is-visible) .lp-fluxo-numero {
    transform: scale(0);
}

.lp-fluxo-passo.is-visible .lp-fluxo-numero {
    transform: scale(1);
}

/* ── CTA: respiração do fundo ── */
.lp-cta-section::before {
    animation: lp-cta-glow 8s var(--ease-in-out) infinite alternate;
}

@keyframes lp-cta-glow {
    from {
        opacity: 0.85;
    }

    to {
        opacity: 1;
    }
}

/* ── Modal ── */
#modalInscricao.modal.fade .modal-dialog {
    transition: transform var(--dur-slow) var(--ease-out-expo), opacity var(--dur-slow) var(--ease-out-expo);
    transform: scale(0.96);
    opacity: 0;
}

#modalInscricao.modal.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}

#modalInscricao .alert-danger.lp-shake {
    animation: lp-shake 0.45s var(--ease-out);
}

@keyframes lp-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(3px);
    }
}

/* ── Obrigado: ícone ── */
body.lp-obrigado-ready .lp-obrigado-icone {
    animation: lp-obrigado-pop 0.55s var(--ease-spring) both;
}

@keyframes lp-obrigado-pop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    html:has(body.lp),
    html:has(body.didog-lp) {
        scroll-behavior: auto;
    }

    .lp-reveal,
    .lp-hero-enter,
    .lp-compare-card ul .lp-reveal-item,
    .lp-fluxo-passo:not(.is-visible) .lp-fluxo-numero {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .lp-mockup-sub--pulse,
    .lp-cta-section::before {
        animation: none !important;
    }

    .lp-fluxo-line {
        transform: scaleX(1) !important;
    }
}