/* Shared CryptoGrama cosmos / teal backdrop (same as index.php) */
.site-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(ellipse 90% 80% at 50% 45%, #04303a 0%, #021218 72%);
}

.site-backdrop--teal {
    background: radial-gradient(ellipse 90% 80% at 50% 45%, #04303a 0%, #021218 72%);
}

.site-backdrop--teal .backdrop-nebula,
.site-backdrop--teal .backdrop-hub-glow {
    display: none;
}

.site-backdrop--teal .backdrop-shimmer {
    background: linear-gradient(
        125deg,
        rgba(34, 211, 238, 0.08) 0%,
        transparent 35%,
        rgba(94, 234, 212, 0.1) 55%,
        transparent 75%,
        rgba(56, 189, 248, 0.07) 100%
    );
}

.site-backdrop--teal .backdrop-vignette {
    background:
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(2, 10, 16, 0.25) 85%, rgba(1, 6, 10, 0.55) 100%),
        linear-gradient(180deg, rgba(2, 12, 18, 0.15) 0%, transparent 18%, transparent 82%, rgba(2, 12, 18, 0.25) 100%);
}

.site-backdrop--cosmos {
    background:
        radial-gradient(ellipse 80% 60% at 50% 42%, #1a1048 0%, #08061a 55%, #030208 100%);
}

.backdrop-nebula {
    position: absolute;
    width: 130%;
    height: 130%;
    left: -15%;
    top: -15%;
    filter: blur(55px);
    opacity: 0.75;
    animation: nebula-drift 28s ease-in-out infinite alternate;
}

.backdrop-nebula--a {
    background:
        radial-gradient(ellipse 42% 38% at 32% 38%, rgba(59, 130, 246, 0.55) 0%, transparent 72%),
        radial-gradient(ellipse 38% 32% at 68% 55%, rgba(139, 92, 246, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 30% 28% at 50% 72%, rgba(37, 99, 235, 0.35) 0%, transparent 68%);
}

.backdrop-nebula--b {
    animation-duration: 34s;
    animation-direction: alternate-reverse;
    opacity: 0.6;
    background:
        radial-gradient(ellipse 35% 30% at 55% 30%, rgba(168, 85, 247, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 22% 62%, rgba(30, 64, 175, 0.45) 0%, transparent 72%),
        radial-gradient(ellipse 28% 25% at 78% 28%, rgba(99, 102, 241, 0.35) 0%, transparent 65%);
}

.backdrop-hub-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120vw;
    height: 120vh;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(160, 190, 255, 0.14) 0%, rgba(99, 102, 241, 0.08) 45%, transparent 75%);
    animation: hub-pulse 7s ease-in-out infinite;
}

.site-backdrop--cosmos .backdrop-shimmer {
    background: linear-gradient(
        135deg,
        rgba(96, 165, 250, 0.1) 0%,
        transparent 30%,
        rgba(167, 139, 250, 0.12) 50%,
        transparent 70%,
        rgba(59, 130, 246, 0.08) 100%
    );
}

.site-backdrop--cosmos .backdrop-vignette {
    background:
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(3, 5, 18, 0.25) 85%, rgba(1, 2, 8, 0.55) 100%),
        linear-gradient(180deg, rgba(4, 6, 20, 0.15) 0%, transparent 18%, transparent 82%, rgba(4, 6, 20, 0.25) 100%);
}

@keyframes nebula-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(3%, -2%) scale(1.05); }
}

@keyframes hub-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); }
}

.backdrop-plexus {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.backdrop-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 65% at 50% 48%, transparent 25%, rgba(2, 10, 16, 0.55) 72%, rgba(1, 6, 10, 0.92) 100%),
        linear-gradient(180deg, rgba(2, 12, 18, 0.35) 0%, transparent 30%, transparent 70%, rgba(2, 12, 18, 0.5) 100%);
}

.backdrop-shimmer {
    position: absolute;
    inset: 0;
    opacity: 0.65;
    background: linear-gradient(
        125deg,
        rgba(34, 211, 238, 0.08) 0%,
        transparent 35%,
        rgba(94, 234, 212, 0.1) 55%,
        transparent 75%,
        rgba(56, 189, 248, 0.07) 100%
    );
    background-size: 220% 220%;
    animation: shimmer-flow 14s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

@keyframes shimmer-flow {
    0% { background-position: 0% 40%; opacity: 0.45; }
    50% { background-position: 60% 60%; opacity: 0.75; }
    100% { background-position: 100% 30%; opacity: 0.5; }
}

.gradient-bg { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .backdrop-nebula,
    .backdrop-hub-glow,
    .backdrop-shimmer {
        animation: none !important;
    }
}