/**
 * Scroll Storytelling Styles
 * Dynamic color themes, particles, and HUD panels
 */

/* ========================================
   CSS VARIABLES - DYNAMIC THEME COLORS
   ======================================== */

:root {
    --theme-r: 232;
    --theme-g: 224;
    --theme-b: 228;
    --theme-color: rgb(var(--theme-r), var(--theme-g), var(--theme-b));
}

/* ========================================
   THEME COLOR CLASSES
   ======================================== */

.theme-text {
    color: var(--theme-color);
    transition: color 0.5s ease;
}

.theme-bg {
    background-color: var(--theme-color);
    transition: background-color 0.5s ease;
}

.theme-border {
    border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5);
    transition: border-color 0.5s ease;
}

.theme-shadow {
    box-shadow: 0 0 40px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3);
    transition: box-shadow 0.5s ease;
}

.theme-gradient {
    background: radial-gradient(circle, rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.15) 0%, transparent 70%);
    transition: background 0.5s ease;
}

/* ========================================
   SCROLL INDICATOR
   ======================================== */

#scroll-indicator {
    animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ========================================
   SCANNER BEAM ANIMATION
   ======================================== */

#scanner-beam {
    will-change: transform, opacity;
}

/* Scanner beam scan animation (top to bottom) */
@keyframes scannerBeam {
    0% {
        top: 0%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        top: 50%;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* DOC2U branding glow (triggered during scan) */
@keyframes doc2uGlow {
    0%, 100% {
        filter: drop-shadow(0 0 0px #C4CEB8);
    }
    50% {
        filter: drop-shadow(0 0 20px #C4CEB8) drop-shadow(0 0 40px #C4CEB8);
    }
}

/* ========================================
   HUD PANELS - MEDICAL THEME
   ======================================== */

.medical-hud-panel {
    will-change: opacity, transform;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.medical-hud-panel h3 {
    font-family: var(--dark-font-heading, 'Poppins', sans-serif);
    letter-spacing: -0.02em;
}

.medical-hud-panel p {
    font-family: var(--dark-font-body, 'Poppins', sans-serif);
}

/* Medical icon containers */
.medical-hud-panel img {
    transition: transform 0.3s ease;
}

.medical-hud-panel:hover img {
    transform: scale(1.05);
}

/* ========================================
   PARTICLE EFFECTS
   ======================================== */

#stars-container,
#clouds-container,
#lines-container {
    will-change: transform;
}

/* Stars */
#stars-container > div {
    will-change: transform;
    transition: opacity 0.3s ease;
}

/* Clouds (gradient blobs) */
#clouds-container > div {
    will-change: transform;
    mix-blend-mode: screen;
}

/* Speed lines */
#lines-container > div {
    will-change: transform;
    opacity: 0.1;
}

/* ========================================
   DYNAMIC THEME CORE LIGHT
   ======================================== */

#theme-core {
    will-change: background;
    transition: background 0.5s ease;
    mix-blend-mode: screen;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Mobile HUD panels - show from bottom with animations */
    /* Styles are applied via JavaScript in scroll-storytelling.js */

    /* Reduce particle count visually */
    #stars-container > div:nth-child(n+26),
    #clouds-container > div:nth-child(n+7),
    #lines-container > div:nth-child(n+11) {
        display: none;
    }

    /* Scroll indicator adjustment */
    #scroll-indicator {
        bottom: 20px !important;
    }

    #scroll-indicator span {
        font-size: 8px !important;
        letter-spacing: 0.3em !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    #stars-container,
    #clouds-container,
    #lines-container,
    .medical-hud-panel,
    #scroll-indicator {
        animation: none !important;
        transition: none !important;
    }

    #theme-core {
        transition: none !important;
    }
}

/* GPU acceleration hints */
#hud-hero,
.medical-hud-panel,
.parallax-hero-title,
.parallax-hero-subtitle {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ========================================
   HOLOGRAPHIC DEPTH PARALLAX
   ======================================== */

.parallax-hero-title,
.parallax-hero-subtitle {
    transition: transform 0.15s ease-out;
    will-change: transform;
}