/* ═══════════════════════════════════════════════════════════════════
   KAINER DASHBOARD - Logo Themes
   Seasonal and special occasion animations
═══════════════════════════════════════════════════════════════════ */

/* Theme container for effects */
.theme-effects {
    position: absolute;
    inset: -20px -40px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   WINTER THEME ❄️ (December - February)
═══════════════════════════════════════════════════════════════════ */
body.theme-winter .logo span {
    color: #a8d4ff !important;
    text-shadow: 0 0 20px rgba(168, 212, 255, 0.5);
}
body.theme-winter .logo .dot { color: #4a6a8a !important; }

.snowflake {
    position: absolute;
    color: white;
    font-size: 1rem;
    opacity: 0;
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    0% { 
        transform: translateY(-20px) rotate(0deg); 
        opacity: 0; 
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.6; }
    100% { 
        transform: translateY(120px) rotate(360deg); 
        opacity: 0; 
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SPRING THEME 🌸 (March - May)
═══════════════════════════════════════════════════════════════════ */
body.theme-spring .logo .c1 { color: #ff9ecd !important; }
body.theme-spring .logo .c2 { color: #ff7eb3 !important; }
body.theme-spring .logo .c3 { color: #ffd93d !important; }
body.theme-spring .logo .c4 { color: #6bcb77 !important; }
body.theme-spring .logo .c5 { color: #c9b1ff !important; }
body.theme-spring .logo .c6 { color: #87ceeb !important; }

.petal {
    position: absolute;
    font-size: 1.2rem;
    opacity: 0;
    animation: petalfall linear infinite;
}

@keyframes petalfall {
    0% { 
        transform: translate(0, -20px) rotate(0deg); 
        opacity: 0; 
    }
    10% { opacity: 1; }
    90% { opacity: 0.8; }
    100% { 
        transform: translate(40px, 120px) rotate(180deg); 
        opacity: 0; 
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SUMMER THEME ☀️ (June - August)
═══════════════════════════════════════════════════════════════════ */
body.theme-summer .logo span {
    text-shadow: 0 0 30px rgba(255, 200, 100, 0.4);
}
body.theme-summer .logo .c1 { color: #64b5f6 !important; }
body.theme-summer .logo .c2 { color: #ff8a65 !important; }
body.theme-summer .logo .c3 { color: #ffd54f !important; }
body.theme-summer .logo .c4 { color: #81c784 !important; }
body.theme-summer .logo .c5 { color: #ba68c8 !important; }
body.theme-summer .logo .c6 { color: #4dd0e1 !important; }

.sun-ray {
    position: absolute;
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.6), transparent);
    transform-origin: bottom center;
    animation: sunray 3s ease-in-out infinite;
}

@keyframes sunray {
    0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
    50% { opacity: 0.7; transform: scaleY(1.2); }
}

/* ═══════════════════════════════════════════════════════════════════
   HALLOWEEN THEME 🎃 (October)
═══════════════════════════════════════════════════════════════════ */
body.theme-halloween .logo .c1 { color: #ff6b35 !important; }
body.theme-halloween .logo .c2 { color: #ff4757 !important; }
body.theme-halloween .logo .c3 { color: #ffa502 !important; }
body.theme-halloween .logo .c4 { color: #7bed9f !important; }
body.theme-halloween .logo .c5 { color: #a55eea !important; }
body.theme-halloween .logo .c6 { color: #70a1ff !important; }
body.theme-halloween .logo span {
    text-shadow: 0 0 15px currentColor;
    animation: spookyFloat 3s ease-in-out infinite;
}
body.theme-halloween .logo span:nth-child(odd) {
    animation-delay: 0.3s;
}

@keyframes spookyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.bat {
    position: absolute;
    font-size: 1rem;
    opacity: 0;
    animation: batfly 6s linear infinite;
}

@keyframes batfly {
    0% { 
        transform: translate(-30px, 50%) scale(0.8); 
        opacity: 0; 
    }
    10% { opacity: 1; }
    50% { 
        transform: translate(50%, 20%) scale(1.1); 
    }
    90% { opacity: 1; }
    100% { 
        transform: translate(130%, 60%) scale(0.9); 
        opacity: 0; 
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CHRISTMAS THEME 🎄 (December 20-26)
═══════════════════════════════════════════════════════════════════ */
body.theme-christmas .logo .c1 { color: #e74c3c !important; }
body.theme-christmas .logo .c2 { color: #27ae60 !important; }
body.theme-christmas .logo .c3 { color: #f1c40f !important; }
body.theme-christmas .logo .c4 { color: #e74c3c !important; }
body.theme-christmas .logo .c5 { color: #27ae60 !important; }
body.theme-christmas .logo .c6 { color: #f1c40f !important; }
body.theme-christmas .logo span {
    text-shadow: 0 0 10px currentColor;
}

.christmas-light {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: twinkleLight 1s ease-in-out infinite;
}

@keyframes twinkleLight {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════════════
   BIRTHDAY THEME 🎂
═══════════════════════════════════════════════════════════════════ */
body.theme-birthday .logo span {
    animation: rainbowShift 3s linear infinite;
}
body.theme-birthday .logo span:nth-child(1) { animation-delay: 0s; }
body.theme-birthday .logo span:nth-child(2) { animation-delay: 0.15s; }
body.theme-birthday .logo span:nth-child(3) { animation-delay: 0.3s; }
body.theme-birthday .logo span:nth-child(4) { animation-delay: 0.45s; }
body.theme-birthday .logo span:nth-child(5) { animation-delay: 0.6s; }
body.theme-birthday .logo span:nth-child(6) { animation-delay: 0.75s; }
body.theme-birthday .logo span:nth-child(7) { animation-delay: 0.9s; }
body.theme-birthday .logo span:nth-child(8) { animation-delay: 1.05s; }
body.theme-birthday .logo span:nth-child(9) { animation-delay: 1.2s; }
body.theme-birthday .logo span:nth-child(10) { animation-delay: 1.35s; }
body.theme-birthday .logo span:nth-child(11) { animation-delay: 1.5s; }
body.theme-birthday .logo span:nth-child(12) { animation-delay: 1.65s; }
body.theme-birthday .logo span:nth-child(13) { animation-delay: 1.8s; }

@keyframes rainbowShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
}

.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    opacity: 0;
    animation: confettiFall linear infinite;
}

@keyframes confettiFall {
    0% { 
        transform: translateY(-10px) rotate(0deg); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(140px) rotate(720deg); 
        opacity: 0; 
    }
}

/* ═══════════════════════════════════════════════════════════════════
   NIGHT THEME 🌙 (22:00 - 05:00)
═══════════════════════════════════════════════════════════════════ */
body.theme-night .logo .c1 { color: #a8c0ff !important; }
body.theme-night .logo .c2 { color: #ffc8dd !important; }
body.theme-night .logo .c3 { color: #ffe66d !important; }
body.theme-night .logo .c4 { color: #88d8b0 !important; }
body.theme-night .logo .c5 { color: #c9b1ff !important; }
body.theme-night .logo .c6 { color: #7ec8e3 !important; }
body.theme-night .logo span {
    text-shadow: 0 0 25px currentColor;
}

.star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    animation: starTwinkle 2s ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.moon {
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 1.8rem;
    animation: moonGlow 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes moonGlow {
    0%, 100% { filter: drop-shadow(0 0 8px #ffe66d); }
    50% { filter: drop-shadow(0 0 15px #ffe66d); }
}

/* ═══════════════════════════════════════════════════════════════════
   NEW YEAR THEME 🎆 (December 31 - January 1)
═══════════════════════════════════════════════════════════════════ */
body.theme-newyear .logo span {
    animation: fireworkGlow 1.5s ease-in-out infinite;
}
body.theme-newyear .logo span:nth-child(odd) {
    animation-delay: 0.2s;
}

@keyframes fireworkGlow {
    0%, 100% { 
        text-shadow: 0 0 5px currentColor; 
        transform: scale(1);
    }
    50% { 
        text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; 
        transform: scale(1.02);
    }
}

.firework {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: fireworkBurst 2s ease-out infinite;
}

@keyframes fireworkBurst {
    0% { 
        transform: scale(0); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1); 
        opacity: 0.8; 
    }
    100% { 
        transform: scale(1.5); 
        opacity: 0; 
    }
}

/* ═══════════════════════════════════════════════════════════════════
   EASTER THEME 🐰 (Around Easter)
═══════════════════════════════════════════════════════════════════ */
body.theme-easter .logo .c1 { color: #a8d8ea !important; }
body.theme-easter .logo .c2 { color: #ffb6c1 !important; }
body.theme-easter .logo .c3 { color: #fffacd !important; }
body.theme-easter .logo .c4 { color: #98fb98 !important; }
body.theme-easter .logo .c5 { color: #dda0dd !important; }
body.theme-easter .logo .c6 { color: #b0e0e6 !important; }

.easter-egg {
    position: absolute;
    font-size: 1rem;
    animation: eggBounce 2s ease-in-out infinite;
}

@keyframes eggBounce {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}