/**
 * Background styles for KUSD Theme based on background.json
 */

/* Base Layer - Radial Gradient */
html, body {
    background-color: #030D06; /* Edge color */
    background-image: radial-gradient(circle at center, #0A1F11, #030D06);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow-x: hidden;
}

/* Atmospheric Layer - Soft Noise */
body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1Ii8+PC9zdmc+');
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}

/* Decorative Elements - Dollar Signs and Hexagons */
.dollar-sign, .hexagon {
    position: fixed;
    z-index: -1;
    pointer-events: none;
    filter: blur(3px);
}

.dollar-sign {
    color: #28C76F;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 100px;
    opacity: 0.25;
}

.hexagon {
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cG9seWdvbiBwb2ludHM9IjUwLDAgOTUsMjUgOTUsNzUgNTAsMTAwIDUsMzUgNSwyNSIgZmlsbD0iIzIwN0E0NCIvPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.20;
}

/* Animation for Dollar Signs */
@keyframes slow_drift {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(20px, 15px);
    }
    50% {
        transform: translate(-5px, 25px);
    }
    75% {
        transform: translate(-15px, 10px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Animation for Hexagons */
@keyframes slow_drift_rotate {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(15px, 10px) rotate(15deg);
    }
    50% {
        transform: translate(-10px, 20px) rotate(30deg);
    }
    75% {
        transform: translate(-20px, 5px) rotate(15deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Element Glow Effect */
.dollar-sign, .hexagon {
    box-shadow: 0 0 30px rgba(69, 245, 109, 0.5);
}