/* CHATROOMZ – BACKGROUND LAYERS (NEBULA, STARS, AURORA) */

body {
    background: radial-gradient(circle at center,
        #2a0050 0%,
        #120024 40%,
        #050010 100%
    );
    background-attachment: fixed;
    overflow-x: hidden;
}

html::before {
    content: "";
    position: fixed;
    inset: -12%;
    background:
        radial-gradient(circle at 30% 40%, rgba(120,0,255,0.14), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(120,0,255,0.10), transparent 60%);
    animation: nebulaMove 40s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -3;
}

@keyframes nebulaMove {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(4%, -4%) scale(1.08); }
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        url('/wp-content/themes/blocksy-child/images/stars.svg'),
        url('/wp-content/themes/blocksy-child/images/chatroomzpattern.svg');
    background-repeat: repeat, repeat;
    background-size: 512px 512px, 512px 512px;
    opacity: 0.16;
    animation: stars 6s ease-in-out infinite;
    pointer-events: none;
    z-index: -2;
}

@keyframes stars {
    0% { opacity: 0.10; }
    50% { opacity: 0.18; }
    100% { opacity: 0.10; }
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 25% 30%, rgba(210, 140, 255, 0.30), transparent 65%),
        radial-gradient(circle at 75% 60%, rgba(80, 120, 255, 0.24), transparent 65%),
        radial-gradient(circle at 55% 45%, rgba(160, 60, 255, 0.26), transparent 70%),
        radial-gradient(circle at 50% 50%, rgba(120, 0, 255, 0.22), transparent 75%);
    animation: auroraFlow 18s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
}

@keyframes auroraFlow {
    0%   { transform: scale(1); opacity: 0.22; }
    33%  { transform: scale(1.10); opacity: 0.30; }
    66%  { transform: scale(1.14); opacity: 0.26; }
    100% { transform: scale(1.05); opacity: 0.22; }
}

/* FLOATING LOGOS */

#cz-floating-logos {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    overflow: hidden;
}

.cz-logo {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(120,0,255,0.35));
    will-change: transform, opacity;
    transition: opacity 3s ease, transform 3s ease;
}

@keyframes czFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes czFadeOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.85); }
}

@keyframes czFloat {
    0%   { transform: translateY(0px) rotate(var(--cz-rot)); }
    50%  { transform: translateY(-14px) rotate(var(--cz-rot)); }
    100% { transform: translateY(0px) rotate(var(--cz-rot)); }
}