/**
 * Cielo, constelaciones y bruma mística — Tu Brújula / Relicario
 * (página dedicada + overlay #brujula-interior-overlay)
 */

/* ——— Fondo cosmos (landing / overlays que usen .page-brujula-cosmos) ——— */
body.page-brujula-cosmos {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    background: #05020c;
}

body.page-brujula-cosmos::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 80% at 50% -10%, rgba(76, 29, 149, 0.35) 0%, transparent 45%),
        radial-gradient(ellipse 80% 50% at 100% 60%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 0% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 45%),
        linear-gradient(180deg, #0a0614 0%, #05020c 40%, #08051a 100%);
}

.brujula-cosmos-landing {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.brujula-cosmos-landing .brujula-cosmos-parallax {
    position: absolute;
    inset: -5%;
    animation: brujula-cosmos-drift 120s linear infinite;
}

.brujula-cosmos-landing .brujula-cosmos-svg {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: block;
    opacity: 0.72;
}

.brujula-cosmos-landing .brujula-cosmos-twinkle {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 20%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 25% 65%, rgba(255, 250, 220, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 78% 30%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 92% 75%, rgba(212, 175, 55, 0.5), transparent),
        radial-gradient(1px 1px at 45% 88%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 60% 12%, rgba(167, 139, 250, 0.45), transparent);
    background-size: 100% 100%;
    animation: brujula-cosmos-twinkle 7s ease-in-out infinite alternate;
    opacity: 0.55;
}

@keyframes brujula-cosmos-drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-1.5%, 1%) rotate(0.8deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes brujula-cosmos-twinkle {
    0% {
        opacity: 0.35;
    }
    100% {
        opacity: 0.65;
    }
}

body.page-brujula-cosmos #main-content,
body.page-brujula-cosmos .auth-header,
body.page-brujula-cosmos .footer {
    position: relative;
    z-index: 1;
}

body.page-brujula-cosmos .brujula-landing-wrap h1 {
    text-shadow:
        0 0 40px rgba(212, 175, 55, 0.25),
        0 2px 20px rgba(0, 0, 0, 0.5);
}

body.page-brujula-cosmos .hero-section.brujula-landing-wrap {
    padding-top: 2rem;
}

@media (prefers-reduced-motion: reduce) {
    .brujula-cosmos-landing .brujula-cosmos-parallax {
        animation: none;
    }
    .brujula-cosmos-landing .brujula-cosmos-twinkle {
        animation: none;
        opacity: 0.5;
    }
}

/* ——— Overlay Relicario (mismo SVG vía JS) ——— */
#brujula-interior-overlay .brujula-cosmos-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

#brujula-interior-overlay .brujula-cosmos-layer .brujula-cosmos-parallax {
    position: absolute;
    inset: -8%;
    animation: brujula-cosmos-drift 140s linear infinite;
}

#brujula-interior-overlay .brujula-cosmos-layer .brujula-cosmos-svg {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    opacity: 0.5;
}

#brujula-interior-overlay .brujula-cosmos-layer .brujula-cosmos-twinkle {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.2px 1.2px at 15% 25%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 70% 40%, rgba(212, 175, 55, 0.4), transparent),
        radial-gradient(1.2px 1.2px at 88% 70%, rgba(255, 255, 255, 0.65), transparent);
    background-size: 100% 100%;
    animation: brujula-cosmos-twinkle 8s ease-in-out infinite alternate;
    opacity: 0.45;
}

#brujula-interior-overlay .brujula-bg-base {
    z-index: 0;
}

#brujula-interior-overlay .brujula-bg-grad {
    z-index: 0;
}

#brujula-interior-overlay .brujula-scroll {
    position: relative;
    z-index: 2;
}