/* =========================================================
   AR DETALLES
   FONDO — DARK LUXURY / GALAXY
   ========================================================= */

.background-effects {
    position: fixed;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgba(88, 42, 120, .22) 0%,
            rgba(39, 18, 58, .16) 25%,
            rgba(8, 6, 14, .95) 62%,
            #030305 100%
        );

    isolation: isolate;
}


/* =========================================================
   CAPA PROFUNDA
   ========================================================= */

.background-effects::before {
    content: "";

    position: absolute;
    inset: -60%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(125, 66, 175, .08) 45deg,
            transparent 85deg,
            rgba(212, 175, 106, .06) 145deg,
            transparent 210deg,
            rgba(217, 91, 130, .07) 275deg,
            transparent 330deg
        );

    filter: blur(35px);

    animation:
        universeRotation
        45s
        linear
        infinite;

    z-index: -5;
}


/* =========================================================
   SEGUNDA CAPA DE PROFUNDIDAD
   ========================================================= */

.background-effects::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 50%,
            transparent 0%,
            transparent 35%,
            rgba(0, 0, 0, .15) 65%,
            rgba(0, 0, 0, .65) 100%
        );

    z-index: 20;

    pointer-events: none;
}


/* =========================================================
   AURORAS
   ========================================================= */

.aurora {
    position: absolute;

    width: 65vw;
    height: 65vw;

    max-width: 850px;
    max-height: 850px;

    border-radius: 50%;

    filter: blur(90px);

    mix-blend-mode: screen;

    opacity: .45;

    will-change:
        transform,
        opacity;
}


/* MORADO */

.aurora-one {
    top: -35%;
    left: -20%;

    background:
        radial-gradient(
            circle,
            rgba(147, 62, 190, .52) 0%,
            rgba(101, 40, 145, .24) 32%,
            transparent 70%
        );

    animation:
        auroraOne
        14s
        ease-in-out
        infinite alternate;
}


/* DORADO */

.aurora-two {
    right: -30%;
    bottom: -30%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 106, .40) 0%,
            rgba(160, 111, 54, .18) 35%,
            transparent 70%
        );

    animation:
        auroraTwo
        17s
        ease-in-out
        infinite alternate;
}


/* ROSA / MAGENTA */

.aurora-three {
    top: 25%;
    left: 35%;

    width: 45vw;
    height: 45vw;

    background:
        radial-gradient(
            circle,
            rgba(211, 73, 135, .27) 0%,
            rgba(124, 43, 107, .12) 38%,
            transparent 72%
        );

    opacity: .3;

    animation:
        auroraThree
        20s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   NÚCLEO CENTRAL
   ========================================================= */

.background-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(42vw, 620px);
    height: min(42vw, 620px);

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212, 175, 106, .13) 0%,
            rgba(119, 61, 155, .10) 25%,
            rgba(61, 26, 79, .06) 45%,
            transparent 70%
        );

    filter: blur(3px);

    box-shadow:
        0 0 80px rgba(120, 60, 170, .12),
        0 0 160px rgba(212, 175, 106, .08);

    animation:
        coreBreath
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   ÓRBITAS
   ========================================================= */

.orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotateX(66deg)
        rotateZ(0deg);

    border:
        1px solid
        rgba(212, 175, 106, .25);

    box-shadow:
        0 0 12px
        rgba(212, 175, 106, .10),

        inset 0 0 18px
        rgba(212, 175, 106, .04);

    will-change:
        transform;
}


/* ÓRBITA 1 */

.orbit-one {
    width: min(45vw, 610px);
    height: min(45vw, 610px);

    border-color:
        rgba(212, 175, 106, .28);

    animation:
        orbitOne
        17s
        linear
        infinite;
}


/* ÓRBITA 2 */

.orbit-two {
    width: min(61vw, 820px);
    height: min(61vw, 820px);

    border-color:
        rgba(154, 78, 190, .27);

    transform:
        translate(-50%, -50%)
        rotateX(70deg)
        rotateZ(35deg);

    animation:
        orbitTwo
        25s
        linear
        infinite;
}


/* ÓRBITA 3 */

.orbit-three {
    width: min(78vw, 1050px);
    height: min(78vw, 1050px);

    border:
        1px dashed
        rgba(217, 140, 154, .18);

    transform:
        translate(-50%, -50%)
        rotateX(74deg)
        rotateZ(-25deg);

    animation:
        orbitThree
        34s
        linear
        infinite;
}


/* =========================================================
   OBJETOS DE LAS ÓRBITAS
   ========================================================= */

.orbit-object {
    position: absolute;

    top: -6px;
    left: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #fff3c7 18%,
            #f3d9a2 42%,
            #d4af6a 65%,
            transparent 75%
        );

    box-shadow:
        0 0 8px #f3d9a2,
        0 0 22px rgba(212, 175, 106, .9),
        0 0 45px rgba(212, 175, 106, .35);

    animation:
        orbitalPulse
        2s
        ease-in-out
        infinite;
}


.orbit-two .orbit-object {
    width: 9px;
    height: 9px;

    background:
        radial-gradient(
            circle,
            #ffffff,
            #dba5ff 35%,
            #9345c4 70%,
            transparent 75%
        );

    box-shadow:
        0 0 10px #b867e5,
        0 0 30px rgba(147, 62, 190, .8);
}


.orbit-three .orbit-object {
    width: 7px;
    height: 7px;

    background:
        #efb5bf;

    box-shadow:
        0 0 10px #efb5bf,
        0 0 25px rgba(217, 140, 154, .8);
}


/* =========================================================
   ESTRELLAS
   ========================================================= */

.background-star {
    position: absolute;

    width:
        var(--star-size);

    height:
        var(--star-size);

    color:
        var(--star-color);

    opacity:
        var(--star-opacity);

    transform:
        rotate(45deg);

    filter:
        drop-shadow(
            0 0 5px currentColor
        );

    animation:
        starTwinkle
        var(--star-duration)
        ease-in-out
        var(--star-delay)
        infinite;

    will-change:
        transform,
        opacity;
}


.background-star::before,
.background-star::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    background:
        currentColor;

    transform:
        translate(-50%, -50%);
}


.background-star::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* =========================================================
   NEBULOSAS
   ========================================================= */

.nebula {
    position: absolute;

    width: 55vw;
    height: 13vw;

    min-height: 100px;

    border-radius: 50%;

    filter: blur(45px);

    opacity: .45;

    transform:
        rotate(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(122, 52, 167, .22),
            rgba(212, 175, 106, .13),
            transparent
        );

    animation:
        nebulaFlow
        18s
        ease-in-out
        infinite alternate;
}


.nebula-one {
    top: 18%;
    left: -15%;
}


.nebula-two {
    right: -15%;
    bottom: 20%;

    transform:
        rotate(25deg);

    animation-delay:
        -7s;
}


/* =========================================================
   POLVO LUMINOSO
   ========================================================= */

#particles {
    position: absolute;
    inset: 0;

    overflow: hidden;

    z-index: 3;
}


#light-effects {
    position: absolute;
    inset: 0;

    z-index: 4;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes universeRotation {

    from {
        transform:
            rotate(0deg)
            scale(1);
    }

    to {
        transform:
            rotate(360deg)
            scale(1.08);
    }

}


@keyframes auroraOne {

    0% {
        transform:
            translate(-8%, -5%)
            scale(.85);

        opacity: .3;
    }

    50% {
        transform:
            translate(10%, 8%)
            scale(1.08);

        opacity: .55;
    }

    100% {
        transform:
            translate(2%, 18%)
            scale(1);

        opacity: .4;
    }

}


@keyframes auroraTwo {

    0% {
        transform:
            translate(5%, 8%)
            scale(.9);

        opacity: .28;
    }

    50% {
        transform:
            translate(-10%, -5%)
            scale(1.12);

        opacity: .5;
    }

    100% {
        transform:
            translate(-5%, 10%)
            scale(1);

        opacity: .35;
    }

}


@keyframes auroraThree {

    0% {
        transform:
            translate(-8%, -5%)
            scale(.85);
    }

    50% {
        transform:
            translate(10%, 7%)
            scale(1.15);
    }

    100% {
        transform:
            translate(-3%, 12%)
            scale(.95);
    }

}


@keyframes coreBreath {

    0%,
    100% {
        opacity: .6;

        transform:
            translate(-50%, -50%)
            scale(.88);
    }

    50% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.12);
    }

}


@keyframes orbitOne {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(66deg)
            rotateZ(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(66deg)
            rotateZ(360deg);
    }

}


@keyframes orbitTwo {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(70deg)
            rotateZ(35deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(70deg)
            rotateZ(-325deg);
    }

}


@keyframes orbitThree {

    from {
        transform:
            translate(-50%, -50%)
            rotateX(74deg)
            rotateZ(-25deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateX(74deg)
            rotateZ(335deg);
    }

}


@keyframes orbitalPulse {

    0%,
    100% {
        transform:
            translateX(-50%)
            scale(.7);

        opacity: .65;
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.45);

        opacity: 1;
    }

}


@keyframes starTwinkle {

    0%,
    100% {
        opacity: .15;

        transform:
            rotate(45deg)
            scale(.35);
    }

    45% {
        opacity: 1;

        transform:
            rotate(180deg)
            scale(1.15);
    }

    70% {
        opacity: .35;

        transform:
            rotate(260deg)
            scale(.7);
    }

}


@keyframes nebulaFlow {

    0% {
        transform:
            translateX(-5%)
            rotate(-25deg)
            scale(.9);

        opacity: .25;
    }

    100% {
        transform:
            translateX(20%)
            rotate(-20deg)
            scale(1.15);

        opacity: .55;
    }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 600px) {

    .background-effects {
        background:
            radial-gradient(
                circle at 50% 45%,
                rgba(88, 42, 120, .24),
                rgba(8, 6, 14, .96) 58%,
                #020204 100%
            );
    }

    .aurora {
        filter:
            blur(65px);

        opacity:
            .3;
    }

    .background-core {
        width: 85vw;
        height: 85vw;
    }

    .orbit-one {
        width: 88vw;
        height: 88vw;
    }

    .orbit-two {
        width: 115vw;
        height: 115vw;
    }

    .orbit-three {
        width: 145vw;
        height: 145vw;
    }

    .nebula {
        width: 85vw;
    }

}


/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .background-effects *,
    .background-effects::before {
        animation: none !important;
    }

}