/* Theme 11: Yellow Glow on Particle Background */

@keyframes move-particles {
    0% {
        transform: translateY(0) translateX(0);
    }
    100% {
        transform: translateY(-100vh) translateX(calc(var(--x-end) * 1px));
    }
}

body {
    background-color: #0f0f1a;
    color: var(--brand-light);
    overflow: hidden;
    position: relative;
}

.particle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.particle {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: var(--brand-yellow);
    animation: move-particles linear infinite;
}

.title {
    color: var(--white);
}

.subtitle {
    color: #dddddd;
}

#logo {
    animation: pulseYellowGlow 2s infinite alternate var(--timing-function);
}

@keyframes pulseYellowGlow {
    from {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(255, 199, 0, 0.5));
    }
    to {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px rgba(255, 199, 0, 0.9));
    }
}

/* Progress Bar for Theme 10 */
.progress-container {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.progress-bar {
    background-color: var(--brand-yellow);
    border-radius: 10px;
    animation: loadProgress 2s 0.5s var(--timing-function) forwards;
}

@keyframes loadProgress {
    from { width: 0%; }
    to { width: 72%; }
}