/**
 * OXORA Landing V2 — Biblioteca de Efeitos
 * Fase 1: preparação only. Tokens Oxora (--ox-*).
 */

/* ── Glass ── */
.ox-lv2-glass {
    background: var(--ox-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--ox-border);
}

.ox-lv2-glass-strong {
    background: rgba(5, 8, 22, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--ox-border);
}

/* ── Glow ── */
.ox-lv2-glow-purple {
    box-shadow: var(--ox-glow-purple);
}

.ox-lv2-glow-blue {
    box-shadow: var(--ox-glow);
}

.ox-lv2-glow-hover {
    transition: box-shadow var(--ox-transition), transform var(--ox-transition);
}

.ox-lv2-glow-hover:hover {
    box-shadow: var(--ox-glow), var(--ox-glow-purple);
}

/* ── Blur blobs (background decorativo) ── */
.ox-lv2-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    pointer-events: none;
}

.ox-lv2-blob--purple {
    background: radial-gradient(circle, rgba(155, 61, 255, 0.45), transparent 65%);
}

.ox-lv2-blob--blue {
    background: radial-gradient(circle, rgba(45, 140, 255, 0.35), transparent 65%);
}

.ox-lv2-blob--a {
    width: min(520px, 80vw);
    height: min(520px, 80vw);
    top: -180px;
    right: -120px;
}

.ox-lv2-blob--b {
    width: min(460px, 70vw);
    height: min(460px, 70vw);
    top: 30%;
    left: -160px;
}

/* ── Gradientes de seção ── */
.ox-lv2-bg-radial-hero {
    background:
        radial-gradient(ellipse 50% 40% at 50% -10%, rgba(155, 61, 255, 0.2), transparent 60%),
        radial-gradient(ellipse 40% 30% at 90% 20%, rgba(45, 140, 255, 0.12), transparent 50%);
}

.ox-lv2-bg-section-fade {
    background: linear-gradient(
        180deg,
        var(--ox-bg-secondary) 0%,
        rgba(11, 16, 32, 0.4) 55%,
        var(--ox-bg) 100%
    );
}

.ox-lv2-divider-fade {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ox-border), transparent);
}

/* ── Hover lift ── */
.ox-lv2-hover-lift {
    transition: transform var(--ox-motion-base) var(--ox-motion-ease),
                box-shadow var(--ox-motion-base) var(--ox-motion-ease),
                border-color var(--ox-motion-base) var(--ox-motion-ease);
}

.ox-lv2-hover-lift:hover {
    transform: translateY(var(--ox-motion-lift));
    box-shadow: var(--ox-shadow-lg);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ── Reveal mask (scroll fade bottom) ── */
.ox-lv2-fade-edges-x {
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ── Parallax layer (aplicar via JS transform em Fase 2) ── */
.ox-lv2-parallax-layer {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ── Sticky aside (FAQ / sidebar) ── */
.ox-lv2-sticky-aside {
    position: sticky;
    top: calc(var(--ox-topbar-height, 72px) + 1rem);
}

/* ── Text gradient ── */
.ox-lv2-text-gradient {
    background: var(--ox-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Footer glow decor ── */
.ox-lv2-footer-glow::before {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 200px;
    background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(155, 61, 255, 0.08), transparent);
    pointer-events: none;
}