/* Header animation adapted from the supplied vaporwave scene. */
.site-header.has-vapor-background { isolation: isolate; }
.site-header.has-vapor-background .header-inner { position: relative; z-index: 1; }
.site-header.has-vapor-background .rx-header-vapor__scene { pointer-events: none; }
.rx-header-vapor__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #17102f 0%,
            #1d1038 35%,
            #2d1246 54%,
            #321447 58%,
            #181937 100%
        );
}


/* =====================================================
   STARS
===================================================== */

.rx-header-vapor__stars {
    position: absolute;
    inset: 0 0 44% 0;
    opacity: 0.7;

    background-image:
        radial-gradient(circle at 3% 12%, white 0 1px, transparent 2px),
        radial-gradient(circle at 8% 29%, white 0 1px, transparent 2px),
        radial-gradient(circle at 14% 8%, white 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 19% 40%, white 0 1px, transparent 2px),
        radial-gradient(circle at 25% 19%, white 0 1px, transparent 2px),
        radial-gradient(circle at 31% 6%, white 0 1px, transparent 2px),
        radial-gradient(circle at 37% 33%, white 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 43% 16%, white 0 1px, transparent 2px),
        radial-gradient(circle at 49% 39%, white 0 1px, transparent 2px),
        radial-gradient(circle at 55% 9%, white 0 1px, transparent 2px),
        radial-gradient(circle at 61% 27%, white 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 67% 14%, white 0 1px, transparent 2px),
        radial-gradient(circle at 73% 37%, white 0 1px, transparent 2px),
        radial-gradient(circle at 79% 7%, white 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 84% 24%, white 0 1px, transparent 2px),
        radial-gradient(circle at 89% 41%, white 0 1px, transparent 2px),
        radial-gradient(circle at 94% 12%, white 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 98% 31%, white 0 1px, transparent 2px);

    animation:
        rx-header-stars-twinkle
        5s
        ease-in-out
        infinite alternate;
}


@keyframes rx-header-stars-twinkle {

    from {
        opacity: 0.4;
    }

    to {
        opacity: 0.85;
    }

}


/* =====================================================
   NEON HORIZON
===================================================== */

.rx-header-vapor__horizon {
    position: absolute;
    z-index: 4;

    left: 0;
    top: 56%;

    width: 100%;
    height: 3px;

    background: #ff75c8;

    box-shadow:
        0 0 3px #ffffff,
        0 0 8px #ff9ed6,
        0 0 16px #ff3cad,
        0 0 35px #ff279e,
        0 0 70px rgba(255, 39, 158, 0.65);

    animation:
        rx-header-horizon-glow
        3s
        ease-in-out
        infinite alternate;
}


@keyframes rx-header-horizon-glow {

    from {
        opacity: 0.78;
    }

    to {
        opacity: 1;

        box-shadow:
            0 0 4px #ffffff,
            0 0 12px #ffb5df,
            0 0 25px #ff3cad,
            0 0 60px rgba(255, 39, 158, 0.85);
    }

}


/* =====================================================
   GRID STAGE
===================================================== */

.rx-header-vapor__grid-stage {
    position: absolute;
    z-index: 2;

    left: -25%;
    top: 56%;

    width: 150%;
    height: 80%;

    overflow: hidden;

    perspective: 160px;
    perspective-origin: 50% 0%;
}


/* =====================================================
   MOVING GRID
===================================================== */

.rx-header-vapor__grid {
    position: absolute;

    left: 0;
    top: -5%;

    width: 100%;
    height: 180%;

    transform-origin: 50% 0%;

    background-image:

        linear-gradient(
            rgba(255, 71, 178, 0.72) 2px,
            transparent 2px
        ),

        linear-gradient(
            90deg,
            rgba(255, 71, 178, 0.68) 2px,
            transparent 2px
        );

    background-size: 32px 32px;

    transform:
        rotateX(63deg)
        scale(1.5);

    animation:
        rx-header-grid-drive
        1.8s
        linear
        infinite;
}


@keyframes rx-header-grid-drive {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            0 32px,
            0 32px;
    }

}


/* SUBTLE BLUE FOREGROUND TINT */

.rx-header-vapor__grid::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 49, 171, 0.12),
            transparent 42%,
            rgba(50, 174, 255, 0.16)
        );
}



/* Clip only the scene so navigation can extend beyond the header. */
.rx-header-vapor__scene::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(10,6,25,.25); }
.site-header.has-vapor-background .site-title,
.site-header.has-vapor-background .menu-toggle { color: #fff; }
@media (min-width: 901px) {
 .site-header.has-vapor-background .primary-menu > li > a:not(.menu-link-vip) { color: #fff; }
 .site-header.has-vapor-background .primary-menu > li > a:not(.menu-link-vip):hover,
 .site-header.has-vapor-background .primary-menu > li > a:not(.menu-link-vip):focus-visible,
 .site-header.has-vapor-background .primary-menu > .current-menu-item > a:not(.menu-link-vip) { color: #ffb5df; }
}
@media (prefers-reduced-motion: reduce) {
 .rx-header-vapor__scene * { animation: none !important; }
}