/* ============================================================
   Efeitos visuais da landing: aurora, grade, brilho que segue o
   cursor, borda animada e entrada por rolagem.
   Tudo em CSS/JS puro e desligado quando o sistema pede menos
   movimento (prefers-reduced-motion).
   ============================================================ */

/* ---------- fundo: aurora + grade ---------- */

.fx-fundo {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.fx-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    will-change: transform;
}
.fx-aurora.a1 {
    width: 46vw; height: 46vw;
    left: -8vw; top: -14vw;
    background: radial-gradient(circle at 30% 30%, rgba(56, 132, 255, 0.55), transparent 65%);
    animation: fx-flutua-1 18s ease-in-out infinite;
}
.fx-aurora.a2 {
    width: 40vw; height: 40vw;
    right: -6vw; top: -6vw;
    background: radial-gradient(circle at 60% 40%, rgba(0, 168, 252, 0.42), transparent 65%);
    animation: fx-flutua-2 22s ease-in-out infinite;
}
.fx-aurora.a3 {
    width: 52vw; height: 52vw;
    left: 24vw; top: 34vw;
    background: radial-gradient(circle at 50% 50%, rgba(88, 101, 242, 0.30), transparent 68%);
    animation: fx-flutua-3 26s ease-in-out infinite;
}

:root[data-theme="light"] .fx-aurora { opacity: 0.28; }

@keyframes fx-flutua-1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(6vw, 4vw, 0) scale(1.12); }
}
@keyframes fx-flutua-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50% { transform: translate3d(-5vw, 6vw, 0) scale(0.95); }
}
@keyframes fx-flutua-3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-4vw, -6vw, 0) scale(1.1); }
}

/* Grade sutil que dá o ar de painel técnico */
.fx-grade {
    position: absolute;
    inset: -2px;
    background-image:
        linear-gradient(rgba(120, 160, 255, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 160, 255, 0.075) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 78%);
}
:root[data-theme="light"] .fx-grade {
    background-image:
        linear-gradient(rgba(40, 80, 180, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 80, 180, 0.07) 1px, transparent 1px);
}

/* Linha de varredura que desce devagar */
.fx-varredura {
    position: absolute;
    left: 0; right: 0;
    height: 180px;
    background: linear-gradient(180deg, transparent, rgba(56, 132, 255, 0.12), transparent);
    animation: fx-varre 9s linear infinite;
}
@keyframes fx-varre {
    0% { transform: translateY(-200px); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateY(105vh); opacity: 0; }
}

/* ---------- brilho que segue o cursor ---------- */

.fx-spot {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.fx-spot::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
    background: radial-gradient(
        280px circle at var(--mx, 50%) var(--my, 50%),
        rgba(56, 132, 255, 0.20),
        transparent 65%
    );
    pointer-events: none;
}
.fx-spot:hover::before { opacity: 1; }
.fx-spot > * { position: relative; z-index: 1; }

/* Borda que acende no hover, seguindo o cursor */
.fx-borda {
    position: relative;
}
.fx-borda::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        220px circle at var(--mx, 50%) var(--my, 50%),
        rgba(88, 160, 255, 0.85),
        rgba(88, 160, 255, 0) 60%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.fx-borda:hover::after { opacity: 1; }

/* ---------- botão com brilho ---------- */

.btn.fx-brilho {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(56, 132, 255, 0);
    transition: box-shadow 0.25s ease, transform 0.08s ease, background 0.15s ease;
}
.btn.fx-brilho::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -40%;
    width: 40%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
}
.btn.fx-brilho:hover {
    box-shadow: 0 0 26px rgba(56, 132, 255, 0.55);
}
.btn.fx-brilho:hover::after { left: 120%; }

/* ---------- entrada por rolagem ---------- */

.fx-revela {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.fx-revela.fx-visivel {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- moldura do hero: inclinação + reflexo ---------- */

.lp-shot.fx-tilt {
    transform-style: preserve-3d;
    transition: transform 0.25s ease;
    will-change: transform;
}
.lp-shot .fx-glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(
        420px circle at var(--gx, 50%) var(--gy, 50%),
        rgba(255, 255, 255, 0.14),
        transparent 60%
    );
}
.lp-shot:hover .fx-glare { opacity: 1; }

/* Anel pulsante em volta do play do mockup */
.lp-shot-body .play {
    position: relative;
}
.lp-shot-body .play::before,
.lp-shot-body .play::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(56, 132, 255, 0.55);
    animation: fx-pulso 2.8s ease-out infinite;
}
.lp-shot-body .play::after { animation-delay: 1.4s; }
@keyframes fx-pulso {
    0% { transform: scale(0.9); opacity: 0.85; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- números que sobem ---------- */

.lp-num strong { font-variant-numeric: tabular-nums; }

/* ---------- respeita quem pediu menos movimento ---------- */

@media (prefers-reduced-motion: reduce) {
    .fx-aurora,
    .fx-varredura,
    .lp-shot-body .play::before,
    .lp-shot-body .play::after {
        animation: none !important;
    }
    .fx-revela {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .lp-shot.fx-tilt { transform: none !important; }
}