/* =========================================================
   AR DETALLES — ANIMACIONES EXTRA
   ========================================================= */

.scene {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   ENTRADA DE LA PÁGINA
   ========================================================= */

.scene::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 99999;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(90, 42, 120, .18),
            #030305 78%
        );

    opacity: 1;

    animation:
        pageReveal
        .9s
        cubic-bezier(.76, 0, .24, 1)
        forwards;
}


.scene.loaded::after {
    opacity: 0;
    visibility: hidden;
}


@keyframes pageReveal {

    0% {
        opacity: 1;
    }

    65% {
        opacity: .85;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }

}


/* =========================================================
   ESTRELLAS DE FONDO
   ========================================================= */

.background-star {
    display: block;

    border-radius: 50%;

    transform-origin: center;

    will-change:
        transform,
        opacity,
        filter;
}


/* =========================================================
   PARTÍCULAS
   ========================================================= */

.particle {
    position: absolute;

    display: block;

    width:
        var(--size);

    height:
        var(--size);

    border-radius: 50%;

    background:
        var(--particle-color);

    box-shadow:
        0 0 5px
        var(--particle-color),

        0 0 13px
        var(--particle-color),

        0 0 25px
        color-mix(
            in srgb,
            var(--particle-color),
            transparent 45%
        );

    opacity: 0;

    will-change:
        transform,
        opacity;

    animation:
        particleFloat
        var(--duration)
        cubic-bezier(.2,.7,.3,1)
        var(--delay)
        infinite;
}


@keyframes particleFloat {

    0% {
        opacity: 0;

        transform:
            translate3d(
                0,
                50px,
                0
            )
            scale(.25);
    }

    15% {
        opacity: .7;
    }

    40% {
        opacity: 1;
    }

    70% {
        opacity: .55;

        transform:
            translate3d(
                var(--move-x),
                -110px,
                0
            )
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                calc(var(--move-x) * -1),
                -230px,
                0
            )
            scale(.1);
    }

}


/* =========================================================
   ESTRELLAS AL HACER CLICK
   ========================================================= */

.click-star {
    position: fixed;

    z-index: 100001;

    display: block;

    pointer-events: none;

    color:
        var(--star-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        var(--star-size);

    line-height: 1;

    text-shadow:
        0 0 5px currentColor,
        0 0 12px currentColor,
        0 0 28px currentColor,
        0 0 50px currentColor;

    opacity: 0;

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

    will-change:
        transform,
        opacity;

    animation:
        clickStarExplosion
        1.05s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes clickStarExplosion {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(0,0)
            scale(.05)
            rotate(0deg);
    }

    12% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            translate(0,0)
            scale(1.45)
            rotate(45deg);
    }

    30% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            translate(
                calc(var(--x) * .35),
                calc(var(--y) * .35)
            )
            scale(1)
            rotate(130deg);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            translate(
                var(--x),
                var(--y)
            )
            scale(.04)
            rotate(var(--rotation));
    }

}


/* =========================================================
   DESTELLO DEL CLICK
   ========================================================= */

.click-flash {
    position: fixed;

    z-index: 100000;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            #fff5d8 14%,
            #f3d9a2 30%,
            rgba(212,175,106,.35) 55%,
            transparent 75%
        );

    box-shadow:
        0 0 12px #fff8e7,
        0 0 30px #f3d9a2,
        0 0 65px rgba(212,175,106,.8);

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

    animation:
        clickFlash
        .7s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes clickFlash {

    0% {
        opacity: 1;

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

    20% {
        opacity: 1;

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

    55% {
        opacity: .8;

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

    100% {
        opacity: 0;

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

}


/* =========================================================
   ONDA
   ========================================================= */

.click-ripple {
    position: fixed;

    z-index: 99998;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    pointer-events: none;

    border:
        1px solid
        rgba(243,217,162,.9);

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

        inset 0 0 10px
        rgba(212,175,106,.3);

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

    animation:
        rippleExpand
        .9s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes rippleExpand {

    0% {
        opacity: .9;

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

    45% {
        opacity: .55;
    }

    100% {
        opacity: 0;

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

}


/* =========================================================
   CHISPAS
   ========================================================= */

.spark {
    position: fixed;

    z-index: 100002;

    width:
        var(--spark-size);

    height:
        var(--spark-size);

    border-radius: 50%;

    pointer-events: none;

    background:
        var(--spark-color);

    box-shadow:
        0 0 5px
        var(--spark-color),

        0 0 13px
        var(--spark-color),

        0 0 24px
        var(--spark-color);

    opacity: 0;

    animation:
        sparkFly
        var(--spark-duration)
        cubic-bezier(.16,1,.3,1)
        forwards;
}


@keyframes sparkFly {

    0% {
        opacity: 0;

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

    15% {
        opacity: 1;

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

    100% {
        opacity: 0;

        transform:
            translate(
                var(--spark-x),
                var(--spark-y)
            )
            scale(.03);
    }

}


/* =========================================================
   LUZ DEL CURSOR
   ========================================================= */

.cursor-light {
    position: fixed;

    z-index: 9990;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    pointer-events: none;

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

    background:
        radial-gradient(
            circle,
            rgba(212,175,106,.11) 0%,
            rgba(157,77,196,.07) 25%,
            rgba(217,140,154,.035) 45%,
            transparent 72%
        );

    filter:
        blur(4px);

    mix-blend-mode:
        screen;

    opacity: .85;

    will-change:
        left,
        top;
}


/* =========================================================
   TRANSICIÓN ENTRE PÁGINAS
   ========================================================= */

.page-leaving {
    pointer-events: none;

    overflow: hidden;
}


.page-leaving .hero-content {
    animation:
        pageExit
        .6s
        cubic-bezier(.55,.06,.68,.19)
        forwards;
}


.page-leaving .header {
    animation:
        headerExit
        .5s
        ease
        forwards;
}


.page-leaving .background-effects {
    animation:
        backgroundExit
        .7s
        ease
        forwards;
}


@keyframes pageExit {

    0% {
        opacity: 1;

        transform:
            scale(1)
            translateY(0);
    }

    55% {
        opacity: .65;
    }

    100% {
        opacity: 0;

        transform:
            scale(1.08)
            translateY(-30px);
    }

}


@keyframes headerExit {

    0% {
        opacity: 1;

        transform:
            translateY(0);
    }

    100% {
        opacity: 0;

        transform:
            translateY(-20px);
    }

}


@keyframes backgroundExit {

    0% {
        opacity: 1;

        transform:
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.12);
    }

}


/* =========================================================
   EVITAR PANTALLA NEGRA
   ========================================================= */

html,
body {
    background:
        #030305 !important;
}


body {
    min-height: 100vh;

    overflow-x: hidden;
}


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

@media (max-width: 600px) {

    .click-star {
        text-shadow:
            0 0 5px currentColor,
            0 0 12px currentColor,
            0 0 22px currentColor;
    }

    .cursor-light {
        display: none;
    }

}


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

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

    .click-star,
    .click-flash,
    .click-ripple,
    .spark,
    .particle,
    .cursor-light {
        animation: none !important;
    }

}