/* ==========================================================================
   Reliance Energy - Design System & Master Stylesheet
   Supports: Light Mode (Default Corporate Solar) & Dark Mode (High-Tech Celestial)
   ========================================================================== */

/* 1. CSS Custom Variables & Design Tokens */
:root {
    /* Brand Accent Colors */
    --color-solar-blue: #1D68FE;
    --color-solar-blue-hover: #1555D6;
    --color-solar-cyan: #06B6D4;
    --color-solar-green: #10B981;
    --color-solar-green-hover: #059669;
    --color-solar-amber: #F59E0B;

    /* Official Reliance Energy Logo Colors */
    --color-brand-blue: rgb(40, 120, 225);
    --color-brand-green: rgb(149, 209, 69);

    /* Light Theme (Default Professional Solar Look) */
    --bg-base: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-secondary: #F1F5F9;
    --border-color: #E2E8F0;
    --border-subtle: #CBD5E1;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B;
    
    /* Shadows */
    --shadow-glass: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
    --shadow-glow-blue: 0 8px 25px -4px rgba(29, 104, 254, 0.35);
    --shadow-glow-green: 0 8px 25px -4px rgba(16, 185, 129, 0.35);
}

/* Dark Theme Overrides */
html.dark {
    --bg-base: #070D18;
    --bg-surface: #0B1324;
    --bg-card: #101B33;
    --bg-card-secondary: #15223E;
    --border-color: #1C2C50;
    --border-subtle: #243862;
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    
    --shadow-glass: 0 12px 35px -5px rgba(0, 0, 0, 0.5), 0 4px 15px -2px rgba(0, 0, 0, 0.3);
    --shadow-glow-blue: 0 0 35px -5px rgba(29, 104, 254, 0.45);
    --shadow-glow-green: 0 0 35px -5px rgba(16, 185, 129, 0.45);
}

/* 2. Base & Typography */
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-secondary);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
}

::selection {
    background-color: var(--color-solar-green);
    color: #070D18;
}

/* 3. Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-solar-blue);
}

/* 4. Glassmorphism Panels */
.glass-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

html.dark .glass-panel {
    background: rgba(16, 27, 51, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(28, 44, 80, 0.7);
}

.glass-panel-hover:hover {
    border-color: var(--color-solar-blue);
    transform: translateY(-4px);
}

/* 5. Theme Radial Glow */
.solar-ambient-glow {
    background: radial-gradient(circle at 50% 0%, rgba(29, 104, 254, 0.12) 0%, rgba(16, 185, 129, 0.06) 40%, transparent 70%);
}

html.dark .solar-ambient-glow {
    background: radial-gradient(circle at 50% 0%, rgba(29, 104, 254, 0.18) 0%, rgba(16, 185, 129, 0.08) 35%, transparent 70%);
}

/* ==========================================
   6. CINEMATIC CONTINUOUS MOVING HERO BACKGROUND
   ========================================== */
@keyframes heroContinuousMove {
    0% {
        transform: scale(1) translate(0%, 0%);
    }
    25% {
        transform: scale(1.08) translate(-1.5%, -1%);
    }
    50% {
        transform: scale(1.14) translate(1%, -2%);
    }
    75% {
        transform: scale(1.07) translate(-1%, 1.5%);
    }
    100% {
        transform: scale(1) translate(0%, 0%);
    }
}

.hero-moving-bg {
    background-image: url('../images/solar_hero.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    animation: heroContinuousMove 32s infinite alternate ease-in-out;
    will-change: transform;
}

/* Overlays for Hero Background Readability */
html.dark .hero-overlay {
    background: linear-gradient(180deg, 
        rgba(7, 13, 24, 0.65) 0%, 
        rgba(7, 13, 24, 0.82) 40%, 
        rgba(7, 13, 24, 0.94) 75%, 
        #070D18 100%);
}

html.light .hero-overlay,
html:not(.dark) .hero-overlay {
    background: linear-gradient(180deg, 
        rgba(248, 250, 252, 0.72) 0%, 
        rgba(248, 250, 252, 0.86) 45%, 
        rgba(248, 250, 252, 0.96) 80%, 
        #F8FAFC 100%);
}

/* 7. Active Category Tab */
.cat-tab.active {
    background: linear-gradient(135deg, var(--color-solar-blue) 0%, var(--color-solar-cyan) 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-glow-blue);
}

.cat-chip.active {
    background: linear-gradient(135deg, var(--color-solar-blue) 0%, var(--color-solar-cyan) 100%) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-glow-blue);
}

/* 8. Navbar Alignment Utilities */
.nav-link {
    position: relative;
    padding: 0.5rem 0.25rem;
    font-weight: 600;
    transition: color 0.2s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2.5px;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-solar-blue);
    border-radius: 999px;
    transition: width 0.25s ease-in-out;
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* 9. Pulse Glow Animations */
@keyframes pulseIndicator {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}
.live-pulse {
    animation: pulseIndicator 2.5s infinite ease-in-out;
}

/* 10. Official Logo Colors */
.brand-logo-reliance,
.text-brand-blue {
    color: rgb(40, 120, 225) !important;
}

.brand-logo-energy,
.text-brand-green {
    color: rgb(149, 209, 69) !important;
}