/* ===========================
   SEASONAL THEMES
   =========================== */

/*
   HOW TO USE:
   - This file contains seasonal theme overrides
   - Simply update the active theme below by commenting/uncommenting sections
   - Themes: winter, spring, summer, fall, christmas, easter, halloween
*/

/* ===========================
   WINTER THEME (Active)
   =========================== */

:root {
    /* Winter color palette - cool tones with warm accents */
    --seasonal-gradient-1: #e8f4f8;
    --seasonal-gradient-2: #f0f9ff;
    --seasonal-gradient-3: #e0f2fe;
    --seasonal-gradient-4: #f8fafc;
    --seasonal-accent: #60a5fa;
    --seasonal-accent-light: #dbeafe;
}

/* Winter gradient for hero */
.hero {
    background: linear-gradient(135deg,
        var(--seasonal-gradient-1) 0%,
        var(--seasonal-gradient-2) 25%,
        var(--seasonal-gradient-3) 50%,
        var(--seasonal-gradient-4) 75%,
        #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle frost effect overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(224, 242, 254, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(186, 230, 253, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

/* Ensure content is above the overlay */
.hero-content {
    position: relative;
    z-index: 1;
}

/* Winter accent on service cards */
.service-card:hover {
    background-color: var(--seasonal-accent-light);
}

/* Animated snowflakes */
@keyframes snowfall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

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

/* Snow animation is handled by snow.js for better control */

/* CTA winter accent */
.cta {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
}

/* ===========================
   SPRING THEME (Inactive - Example)
   =========================== */

/*
:root {
    --seasonal-gradient-1: #fef3f9;
    --seasonal-gradient-2: #fef9f3;
    --seasonal-gradient-3: #f3fef5;
    --seasonal-gradient-4: #fefce8;
    --seasonal-accent: #ec4899;
    --seasonal-accent-light: #fce7f3;
}

.hero {
    background: linear-gradient(135deg,
        var(--seasonal-gradient-1) 0%,
        var(--seasonal-gradient-2) 25%,
        var(--seasonal-gradient-3) 50%,
        var(--seasonal-gradient-4) 75%,
        #ffffff 100%);
}

.hero::after {
    content: '🌸 🌼 🌷';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    opacity: 0.3;
}
*/

/* ===========================
   SUMMER THEME (Inactive - Example)
   =========================== */

/*
:root {
    --seasonal-gradient-1: #fffbeb;
    --seasonal-gradient-2: #fef3c7;
    --seasonal-gradient-3: #fed7aa;
    --seasonal-gradient-4: #fef9f3;
    --seasonal-accent: #f59e0b;
    --seasonal-accent-light: #ffedd5;
}

.hero {
    background: linear-gradient(135deg,
        var(--seasonal-gradient-1) 0%,
        var(--seasonal-gradient-2) 25%,
        var(--seasonal-gradient-3) 50%,
        var(--seasonal-gradient-4) 75%,
        #ffffff 100%);
}

.hero::after {
    content: '☀️ 🌊 🏖️';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    opacity: 0.3;
}
*/

/* ===========================
   FALL/AUTUMN THEME (Inactive - Example)
   =========================== */

/*
:root {
    --seasonal-gradient-1: #fef3f3;
    --seasonal-gradient-2: #fef9f3;
    --seasonal-gradient-3: #fff7ed;
    --seasonal-gradient-4: #fefce8;
    --seasonal-accent: #ea580c;
    --seasonal-accent-light: #ffedd5;
}

.hero {
    background: linear-gradient(135deg,
        var(--seasonal-gradient-1) 0%,
        var(--seasonal-gradient-2) 25%,
        var(--seasonal-gradient-3) 50%,
        var(--seasonal-gradient-4) 75%,
        #ffffff 100%);
}

.hero::after {
    content: '🍂 🍁 🍄';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    opacity: 0.3;
}
*/

/* ===========================
   CHRISTMAS THEME (Inactive - Example)
   =========================== */

/*
:root {
    --seasonal-gradient-1: #fef2f2;
    --seasonal-gradient-2: #f0fdf4;
    --seasonal-gradient-3: #fef3f9;
    --seasonal-gradient-4: #ffffff;
    --seasonal-accent: #dc2626;
    --seasonal-accent-light: #fee2e2;
}

.hero {
    background: linear-gradient(135deg,
        var(--seasonal-gradient-1) 0%,
        var(--seasonal-gradient-2) 25%,
        var(--seasonal-gradient-3) 50%,
        var(--seasonal-gradient-4) 75%,
        #ffffff 100%);
}

.hero::after {
    content: '🎄 ⛄ 🎅';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    opacity: 0.3;
}

.cta {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #dc2626 100%);
}
*/

/* ===========================
   EASTER THEME (Inactive - Example)
   =========================== */

/*
:root {
    --seasonal-gradient-1: #fef3f9;
    --seasonal-gradient-2: #fef9c3;
    --seasonal-gradient-3: #ddd6fe;
    --seasonal-gradient-4: #e0f2fe;
    --seasonal-accent: #a855f7;
    --seasonal-accent-light: #f3e8ff;
}

.hero {
    background: linear-gradient(135deg,
        var(--seasonal-gradient-1) 0%,
        var(--seasonal-gradient-2) 25%,
        var(--seasonal-gradient-3) 50%,
        var(--seasonal-gradient-4) 75%,
        #ffffff 100%);
}

.hero::after {
    content: '🐰 🥚 🌷';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    opacity: 0.3;
}
*/

/* ===========================
   HALLOWEEN THEME (Inactive - Example)
   =========================== */

/*
:root {
    --seasonal-gradient-1: #fff7ed;
    --seasonal-gradient-2: #fef3c7;
    --seasonal-gradient-3: #1a1a3e;
    --seasonal-gradient-4: #fef9f3;
    --seasonal-accent: #f97316;
    --seasonal-accent-light: #ffedd5;
}

.hero {
    background: linear-gradient(135deg,
        #1a1a3e 0%,
        #2d1b47 25%,
        #3d2555 50%,
        #2d1b47 75%,
        #1a1a3e 100%);
}

.hero h1,
.hero .tagline {
    color: #f97316;
}

.hero::after {
    content: '🎃 👻 🦇';
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    opacity: 0.5;
}

.cta {
    background: linear-gradient(135deg, #7c2d12 0%, #9a3412 50%, #ea580c 100%);
}
*/