/* ============================================
   SERAPHIM WEATHER SYSTEM - CSS
   Integrates with existing site styles
   Weather effects, backgrounds, and day mode UI
   ============================================ */

/* ============================================
   WEATHER EFFECTS CONTAINER
   Inserted after bg-container
   ============================================ */
#weather-effects {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.weather-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.weather-layer.active {
    opacity: 1;
}

/* ============================================
   BACKGROUND IMAGE OVERRIDE
   Weather backgrounds replace the default bg.png
   ============================================ */
.bg-image {
    transition: opacity 1.5s ease;
}

/* Weather-specific backgrounds via JS */
html.time-night.weather-clear .bg-image,
html.time-night.weather-cloudy .bg-image,
html.time-night.weather-fog .bg-image {
    background-image: url('images/bg-night-clear.png') !important;
}

html.time-night.weather-rain .bg-image,
html.time-night.weather-storm .bg-image {
    background-image: url('images/bg-night-rain.png') !important;
}

html.time-night.weather-snow .bg-image {
    background-image: url('images/bg-night-snow.png') !important;
}

html.time-day.weather-clear .bg-image,
html.time-day.weather-cloudy .bg-image,
html.time-day.weather-fog .bg-image {
    background-image: url('images/bg-day-clear.png') !important;
}

html.time-day.weather-rain .bg-image,
html.time-day.weather-storm .bg-image {
    background-image: url('images/bg-day-rain.png') !important;
}

html.time-day.weather-snow .bg-image {
    background-image: url('images/bg-day-snow.png') !important;
}

/* Adjust bg-image opacity based on weather */
html.time-day .bg-image {
    opacity: 0.5 !important;
}

html.time-day.weather-snow .bg-image {
    opacity: 0.55 !important;
}

html.time-night .bg-image {
    opacity: 0.4 !important;
}

/* ============================================
   RAIN EFFECT
   ============================================ */
.rain-layer {
    overflow: hidden;
}

.rain-layer .rain-drop {
    position: absolute;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(150, 200, 255, 0.5), transparent);
    animation: rainFall linear infinite;
    opacity: 0;
}

html.time-night .rain-layer .rain-drop {
    background: linear-gradient(180deg, transparent, rgba(150, 200, 255, 0.6), transparent);
    box-shadow: 0 0 3px rgba(0, 255, 136, 0.15);
}

@keyframes rainFall {
    0% {
        transform: translateY(-100px) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(20px);
        opacity: 0;
    }
}

.rain-layer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(0deg, rgba(100, 150, 200, 0.1), transparent);
    opacity: 0.5;
}

/* ============================================
   SNOW EFFECT
   ============================================ */
.snow-layer {
    overflow: hidden;
}

.snow-layer .snowflake {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    animation: snowFall linear infinite;
    opacity: 0;
}

@keyframes snowFall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   FOG EFFECT - SUBTLE
   ============================================ */
.fog-layer {
    overflow: hidden;
}

.fog-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(150, 160, 180, 0.05) 40%,
        rgba(150, 160, 180, 0.07) 70%,
        transparent 100%
    );
    opacity: 0.5;
}

.fog-wisp {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.25;
}

.fog-wisp-1 {
    background: 
        radial-gradient(ellipse 80% 40% at 10% 60%, rgba(180, 190, 210, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 30% at 90% 40%, rgba(180, 190, 210, 0.06) 0%, transparent 70%);
    animation: fogWisp1 25s ease-in-out infinite;
}

.fog-wisp-2 {
    background: 
        radial-gradient(ellipse 70% 35% at 80% 70%, rgba(180, 190, 210, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 90% 45% at 20% 30%, rgba(180, 190, 210, 0.06) 0%, transparent 70%);
    animation: fogWisp2 30s ease-in-out infinite;
}

@keyframes fogWisp1 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.2; }
    50% { transform: translateX(30px) translateY(-20px); opacity: 0.3; }
}

@keyframes fogWisp2 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.15; }
    50% { transform: translateX(-40px) translateY(30px); opacity: 0.25; }
}

.fog-bank {
    position: absolute;
    bottom: -30px;
    left: -5%;
    right: -5%;
    height: 100px;
    background: linear-gradient(0deg, rgba(180, 190, 210, 0.08) 0%, transparent 100%);
    filter: blur(15px);
    opacity: 0.3;
    animation: fogBankRoll 20s ease-in-out infinite;
}

@keyframes fogBankRoll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

/* ============================================
   STORM EFFECT (LIGHTNING)
   ============================================ */
.storm-layer .lightning {
    position: absolute;
    inset: 0;
    background: rgba(200, 220, 255, 0.85);
    opacity: 0;
    animation: lightningFlash 8s ease-in-out infinite;
}

@keyframes lightningFlash {
    0%, 100% { opacity: 0; }
    1% { opacity: 0.6; }
    2% { opacity: 0; }
    3% { opacity: 0.4; }
    4% { opacity: 0; }
    52% { opacity: 0; }
    53% { opacity: 0.7; }
    54% { opacity: 0.1; }
    55% { opacity: 0.5; }
    56% { opacity: 0; }
}

/* ============================================
   STARS EFFECT (NIGHT CLEAR) - SUBTLE
   ============================================ */
.stars-layer {
    overflow: hidden;
}

.stars-layer .star {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: starTwinkle ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.stars-layer .moon-glow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, 
        rgba(200, 220, 255, 0.12) 0%, 
        rgba(200, 220, 255, 0.06) 30%,
        rgba(150, 180, 255, 0.03) 50%,
        transparent 70%);
    border-radius: 50%;
    animation: moonPulse 10s ease-in-out infinite;
}

/* Vertical beam for night - subtle version of day beam */
.stars-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(200, 220, 255, 0.03) 0%,
        rgba(200, 220, 255, 0.1) 35%,
        rgba(255, 255, 255, 0.2) 45%,
        rgba(255, 255, 255, 0.2) 55%,
        rgba(200, 220, 255, 0.1) 65%,
        rgba(200, 220, 255, 0.03) 100%
    );
    box-shadow: 
        0 0 40px 20px rgba(200, 220, 255, 0.05),
        0 0 80px 40px rgba(150, 180, 255, 0.03);
    animation: moonPulse 10s ease-in-out infinite;
}

@keyframes moonPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* ============================================
   SUN EFFECT (DAY CLEAR) - CENTER VERTICAL BEAM
   Matches the central vertical light column in day backgrounds
   Light source is at horizon/center, beaming up and down
   ============================================ */
.sun-layer {
    overflow: hidden;
}

/* Central vertical light beam - matches image's vertical column */
.sun-layer .sun-beam {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.3) 35%,
        rgba(255, 255, 255, 0.5) 45%,
        rgba(255, 255, 255, 0.5) 55%,
        rgba(255, 255, 255, 0.3) 65%,
        rgba(255, 255, 255, 0.1) 100%
    );
    box-shadow: 
        0 0 60px 30px rgba(255, 255, 255, 0.15),
        0 0 120px 60px rgba(200, 220, 255, 0.1),
        0 0 200px 100px rgba(200, 220, 255, 0.05);
    animation: sunBeamPulse 8s ease-in-out infinite;
}

/* Wider ambient glow around the beam */
.sun-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(200, 220, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(200, 220, 255, 0.02) 100%
    );
    animation: sunBeamPulse 8s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes sunBeamPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* Central glow point at horizon level (40-50% from top) */
.sun-layer .sun-glow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(255, 255, 255, 0.1) 20%,
        rgba(200, 220, 255, 0.05) 40%,
        transparent 60%);
    border-radius: 50%;
    animation: sunGlowPulse 6s ease-in-out infinite;
}

/* Secondary glow rings */
.sun-layer::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.08) 0%, 
        rgba(200, 220, 255, 0.04) 30%,
        transparent 50%);
    border-radius: 50%;
    animation: sunGlowPulse 6s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes sunGlowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
}

/* ============================================
   DAY MODE - GLASSMORPHISM ADJUSTMENTS
   Darker, more opaque backgrounds for readability
   Header and footer EXCLUDED
   ============================================ */

/* TERMINAL CARD - Hero CLI block */
html.time-day .terminal-card,
html.time-day .hero-terminal-card {
    background: rgba(5, 8, 15, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* HERO STATS CARD */
html.time-day .hero-stats-card {
    background: rgba(10, 15, 25, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* PILLAR CARDS - Main service cards */
html.time-day .pillar,
html.time-day .pillar-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.time-day .pillar:hover,
html.time-day .pillar-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

html.time-day .pillar.featured,
html.time-day .pillar-card.featured {
    background: rgba(10, 15, 25, 0.82) !important;
}

/* PLATFORM CARDS */
html.time-day .platform-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .platform-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* SERVICE CARDS */
html.time-day .service-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .service-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* PRICING CARDS */
html.time-day .pricing-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .pricing-card.featured {
    background: rgba(10, 15, 25, 0.82) !important;
}

/* AI CARDS */
html.time-day .ai-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .ai-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* USE CASE CARDS */
html.time-day .use-case-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .use-case-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* METRIC CARDS */
html.time-day .metric-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* GENERIC CARD CLASS (fallback) */
html.time-day .card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* SECTION BACKGROUNDS */
html.time-day .section {
    background: transparent !important;
}

html.time-day .section.alt,
html.time-day .section-alt {
    background: rgba(10, 15, 25, 0.3) !important;
}

/* DROPDOWN MENUS (NOT header - header stays dark always) */
html.time-day .nav-dropdown:not(.header .nav-dropdown),
html.time-day .dropdown-menu:not(.header .dropdown-menu) {
    background: rgba(10, 15, 25, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* FORMS */
html.time-day input:not([type="checkbox"]):not([type="radio"]),
html.time-day textarea,
html.time-day select {
    background: rgba(10, 15, 25, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html.time-day input:focus,
html.time-day textarea:focus,
html.time-day select:focus {
    background: rgba(10, 15, 25, 0.9) !important;
}

/* FAQ / ACCORDION ITEMS */
html.time-day .faq-item,
html.time-day .accordion-item {
    background: rgba(10, 15, 25, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* TIMELINE ITEMS */
html.time-day .timeline-item {
    background: rgba(10, 15, 25, 0.7) !important;
}

/* CONTACT / CTA SECTIONS */
html.time-day .cta-section,
html.time-day .contact-section {
    background: rgba(10, 15, 25, 0.5) !important;
}

/* ============================================
   DAY MODE + SNOW - EXTRA DARK (brightest bg)
   ============================================ */
html.time-day.weather-snow .terminal-card,
html.time-day.weather-snow .hero-terminal-card {
    background: rgba(2, 5, 12, 0.9) !important;
}

html.time-day.weather-snow .hero-stats-card {
    background: rgba(5, 10, 18, 0.88) !important;
}

html.time-day.weather-snow .pillar,
html.time-day.weather-snow .pillar-card,
html.time-day.weather-snow .platform-card,
html.time-day.weather-snow .service-card,
html.time-day.weather-snow .pricing-card,
html.time-day.weather-snow .ai-card,
html.time-day.weather-snow .use-case-card,
html.time-day.weather-snow .metric-card,
html.time-day.weather-snow .card {
    background: rgba(5, 10, 18, 0.82) !important;
}

html.time-day.weather-snow .pillar:hover,
html.time-day.weather-snow .pillar-card:hover,
html.time-day.weather-snow .platform-card:hover,
html.time-day.weather-snow .service-card:hover,
html.time-day.weather-snow .ai-card:hover,
html.time-day.weather-snow .use-case-card:hover,
html.time-day.weather-snow .card:hover {
    background: rgba(5, 10, 18, 0.9) !important;
}

/* ============================================
   NIGHT MODE - NO CHANGES NEEDED
   Existing styles already optimized for dark
   ============================================ */

/* ============================================
   Z-INDEX MANAGEMENT
   ============================================ */
.bg-container, .bg-layer {
    z-index: 0 !important;
}

#weather-effects {
    z-index: 1 !important;
}

.main, main {
    position: relative;
    z-index: 10;
}

/* Header/Footer maintain their existing z-index */

/* ============================================
   RESPONSIVE - MOBILE PERFORMANCE
   ============================================ */
@media (max-width: 768px) {
    /* Reduce blur on mobile */
    html.time-day .terminal-card,
    html.time-day .pillar,
    html.time-day .pillar-card,
    html.time-day .platform-card,
    html.time-day .service-card,
    html.time-day .card {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* Lighter particles on mobile */
    .rain-layer .rain-drop {
        opacity: 0.4 !important;
    }
    
    .snow-layer .snowflake {
        opacity: 0.6 !important;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .weather-layer,
    .rain-drop,
    .snowflake,
    .star,
    .fog-wisp,
    .fog-bank,
    .lightning,
    .sun-beam,
    .sun-glow,
    .moon-glow {
        animation: none !important;
    }
    
    #weather-effects {
        display: none !important;
    }
}

/* ============================================
   PRINT - DISABLE ALL WEATHER
   ============================================ */
@media print {
    #weather-effects,
    .bg-container {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
}

/* ============================================
   CLOUDY WEATHER EFFECT
   Uses filter to create overcast appearance
   ============================================ */
html.weather-cloudy .bg-image {
    filter: saturate(0.6) brightness(0.85) contrast(0.95) !important;
}

html.weather-cloudy .bg-overlay {
    background: linear-gradient(180deg, 
        rgba(80, 90, 100, 0.35) 0%, 
        rgba(60, 70, 80, 0.25) 50%, 
        rgba(80, 90, 100, 0.4) 100%) !important;
}

/* Cloudy text indicator in CLI */
html.weather-cloudy .hero-cli::after {
    content: ' ☁️';
}

/* Slightly muted green glow on cloudy days */
html.weather-cloudy {
    --terminal-green: #88cc99;
}

/* FOG effect - heavier overlay */
html.weather-fog .bg-image {
    filter: saturate(0.4) brightness(0.75) contrast(0.9) blur(1px) !important;
}

html.weather-fog .bg-overlay {
    background: linear-gradient(180deg, 
        rgba(150, 160, 170, 0.5) 0%, 
        rgba(130, 140, 150, 0.4) 50%, 
        rgba(150, 160, 170, 0.55) 100%) !important;
}