/* Christmas Magic Effects v2.0 - Frontend Styles */

/* Snow Canvas */
#christmas-snow-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99997;
}

/* Effects Container */
#christmas-effects-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99998;
    overflow: hidden;
}

.christmas-magic-zone {
    position: relative;
    overflow: hidden;
}

/* Christmas Lights - String Style */
.christmas-lights-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 99999;
}

.christmas-lights-container.position-bottom {
    top: auto;
    bottom: 0;
}

.christmas-lights-container.position-left,
.christmas-lights-container.position-right {
    width: auto;
    height: 100%;
}

.christmas-lights-container.position-left {
    left: 0;
    right: auto;
}

.christmas-lights-container.position-right {
    left: auto;
    right: 0;
}

/* Wire/String */
.christmas-wire {
    position: absolute;
    width: 100%;
    height: 50px;
    top: 0;
}

.christmas-wire svg {
    width: 100%;
    height: 100%;
}

.christmas-wire path {
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 3;
}

/* Light Bulbs */
.christmas-bulb {
    position: absolute;
    width: 14px;
    height: 20px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    transform-origin: top center;
    animation: christmas-sway 3s ease-in-out infinite;
}

.christmas-bulb::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
    border-radius: 2px 2px 0 0;
}

.christmas-bulb::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 6px;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
}

/* Bulb Glow */
.christmas-bulb.lit {
    box-shadow: 
        0 0 10px 2px currentColor,
        0 0 20px 4px currentColor,
        0 0 30px 6px currentColor;
    animation: christmas-twinkle 2s ease-in-out infinite, christmas-sway 3s ease-in-out infinite;
}

@keyframes christmas-twinkle {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1.2);
    }
    50% { 
        opacity: 0.7;
        filter: brightness(0.8);
    }
}

@keyframes christmas-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* Icicle Lights */
.christmas-icicle {
    position: absolute;
    width: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, currentColor 100%);
    border-radius: 0 0 3px 3px;
    transform-origin: top center;
    animation: christmas-icicle-glow 2s ease-in-out infinite;
}

@keyframes christmas-icicle-glow {
    0%, 100% {
        box-shadow: 0 0 8px 2px currentColor;
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 15px 4px currentColor;
        opacity: 0.8;
    }
}

/* Sparkles */
.christmas-sparkle {
    position: absolute;
    pointer-events: none;
    animation: christmas-sparkle-float 4s ease-in-out infinite;
}

.christmas-sparkle::before,
.christmas-sparkle::after {
    content: '';
    position: absolute;
    background: currentColor;
}

.christmas-sparkle::before {
    width: 2px;
    height: 10px;
    left: 4px;
    top: 0;
    border-radius: 1px;
}

.christmas-sparkle::after {
    width: 10px;
    height: 2px;
    left: 0;
    top: 4px;
    border-radius: 1px;
}

@keyframes christmas-sparkle-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(-20px) rotate(180deg) scale(1.2);
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-40px) rotate(360deg) scale(0.8);
        opacity: 0;
    }
}

/* Santa Sleigh - Realistic Animated */
.christmas-santa-container {
    position: fixed;
    pointer-events: none;
    z-index: 99996;
    animation: christmas-santa-fly 12s linear forwards;
    filter: drop-shadow(3px 6px 10px rgba(0,0,0,0.4));
}

.christmas-santa-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    animation: christmas-santa-bob 1.5s ease-in-out infinite;
}

.christmas-reindeer {
    position: relative;
    width: 60px;
    height: 45px;
    margin-right: -8px;
    animation: christmas-reindeer-run 0.3s ease-in-out infinite;
}

.christmas-reindeer:nth-child(odd) { animation-delay: 0.2s; }

.christmas-reindeer-body {
    position: absolute;
    width: 40px;
    height: 22px;
    background: linear-gradient(135deg, #a0522d 0%, #8B4513 40%, #654321 100%);
    border-radius: 45% 55% 45% 50%;
    top: 12px;
    left: 5px;
    box-shadow: inset -3px -2px 5px rgba(0,0,0,0.3);
}

.christmas-reindeer-head {
    position: absolute;
    width: 18px;
    height: 16px;
    background: linear-gradient(135deg, #b8860b 0%, #a0522d 50%, #8B4513 100%);
    border-radius: 60% 70% 50% 45%;
    top: 8px;
    left: 40px;
}

.christmas-reindeer-nose {
    position: absolute;
    width: 5px;
    height: 4px;
    background: #1a0f0a;
    border-radius: 50%;
    top: 16px;
    left: 55px;
}

.christmas-reindeer.rudolph .christmas-reindeer-nose {
    width: 7px;
    height: 6px;
    background: radial-gradient(circle at 30% 30%, #ff6666 0%, #ff0000 50%, #cc0000 100%);
    box-shadow: 0 0 12px 5px rgba(255, 0, 0, 0.7), 0 0 25px 10px rgba(255, 0, 0, 0.4);
    animation: christmas-nose-glow 0.6s ease-in-out infinite alternate;
}

.christmas-reindeer-antler {
    position: absolute;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #5d4037 0%, #3e2723 100%);
    top: 0px;
    border-radius: 2px;
}

.christmas-reindeer-antler.left { left: 42px; transform: rotate(-25deg); }
.christmas-reindeer-antler.right { left: 50px; transform: rotate(25deg); }

.christmas-reindeer-ear {
    position: absolute;
    width: 6px;
    height: 10px;
    background: linear-gradient(180deg, #a0522d 0%, #8B4513 100%);
    border-radius: 50% 50% 30% 30%;
    top: 4px;
}

.christmas-reindeer-ear.left { left: 40px; transform: rotate(-15deg); }
.christmas-reindeer-ear.right { left: 52px; transform: rotate(15deg); }

.christmas-reindeer-tail {
    position: absolute;
    width: 8px;
    height: 6px;
    background: #f5f5dc;
    border-radius: 50%;
    top: 18px;
    left: 0px;
}

.christmas-reindeer-leg {
    position: absolute;
    width: 4px;
    height: 14px;
    background: linear-gradient(180deg, #8B4513 0%, #654321 50%, #4a3020 100%);
    border-radius: 2px 2px 3px 3px;
    bottom: -4px;
    transform-origin: top center;
}

/* Flying gallop - legs stretched out */
.christmas-reindeer-leg.front-left { left: 10px; animation: christmas-leg-fly-front 0.6s ease-in-out infinite; }
.christmas-reindeer-leg.front-right { left: 16px; animation: christmas-leg-fly-front 0.6s ease-in-out infinite 0.3s; }
.christmas-reindeer-leg.back-left { left: 32px; animation: christmas-leg-fly-back 0.6s ease-in-out infinite; }
.christmas-reindeer-leg.back-right { left: 38px; animation: christmas-leg-fly-back 0.6s ease-in-out infinite 0.3s; }

.christmas-sleigh {
    position: relative;
    width: 90px;
    height: 55px;
    margin-right: 10px;
}

.christmas-sleigh-body {
    position: absolute;
    width: 80px;
    height: 40px;
    background: linear-gradient(180deg, #dc143c 0%, #c41e3a 30%, #8b0000 100%);
    border-radius: 8px 25px 12px 45%;
    top: 5px;
    left: 5px;
    border: 3px solid #ffd700;
    box-shadow: inset -5px -3px 10px rgba(0,0,0,0.4), 0 5px 15px rgba(0,0,0,0.3);
}

.christmas-sleigh-runner {
    position: absolute;
    width: 85px;
    height: 10px;
    background: linear-gradient(180deg, #e8e8e8 0%, #c0c0c0 50%, #808080 100%);
    border-radius: 3px 3px 25px 8px;
    bottom: 0;
    left: 2px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.christmas-sleigh-front {
    position: absolute;
    right: -5px;
    top: 8px;
    width: 12px;
    height: 30px;
    background: linear-gradient(90deg, #8b0000 0%, #c41e3a 50%, #dc143c 100%);
    border-radius: 0 15px 10px 0;
    border: 2px solid #ffd700;
    border-left: none;
}

.christmas-santa-figure {
    position: absolute;
    top: -10px;
    left: 18px;
    transform: scaleX(-1);
}

.christmas-santa-body {
    width: 28px;
    height: 26px;
    background: linear-gradient(180deg, #dc143c 0%, #c41e3a 50%, #8b0000 100%);
    border-radius: 30% 30% 40% 40%;
    position: relative;
    box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3);
}

.christmas-santa-body::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 4px;
    background: #1a1a1a;
    bottom: 6px;
    left: 0;
    border-radius: 1px;
}

.christmas-santa-arm {
    position: absolute;
    width: 7px;
    height: 14px;
    background: linear-gradient(180deg, #dc143c 0%, #8b0000 100%);
    border-radius: 3px 3px 4px 4px;
    top: 4px;
}

.christmas-santa-arm::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 3px;
    background: #fff;
    bottom: 0;
    left: -0.5px;
    border-radius: 2px;
}

.christmas-santa-arm.left { left: -3px; transform: rotate(25deg); }
.christmas-santa-arm.right { right: -3px; transform: rotate(-35deg); }

.christmas-santa-head {
    position: absolute;
    width: 18px;
    height: 16px;
    background: linear-gradient(180deg, #ffdbac 0%, #f0c090 100%);
    border-radius: 50%;
    top: -14px;
    left: 5px;
    box-shadow: inset -1px -1px 3px rgba(0,0,0,0.1);
}

.christmas-santa-head::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 50%;
    top: 5px;
    left: 4px;
    box-shadow: 6px 0 0 #1a1a1a;
}

.christmas-santa-head::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 3px;
    background: rgba(255, 120, 120, 0.5);
    border-radius: 50%;
    top: 7px;
    left: 2px;
    box-shadow: 8px 0 0 rgba(255, 120, 120, 0.5);
}

.christmas-santa-nose {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle at 30% 30%, #f0a090 0%, #d08070 100%);
    border-radius: 50%;
    top: -9px;
    left: 12px;
    z-index: 3;
}

.christmas-santa-beard {
    position: absolute;
    width: 16px;
    height: 12px;
    background: linear-gradient(180deg, #fff 0%, #f5f5f5 50%, #e8e8e8 100%);
    border-radius: 30% 30% 50% 50%;
    top: -5px;
    left: 6px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

.christmas-santa-beard::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 4px;
    background: #fff;
    border-radius: 40% 40% 50% 50%;
    top: -2px;
    left: 1px;
}

.christmas-santa-hat {
    position: absolute;
    width: 22px;
    height: 16px;
    background: linear-gradient(135deg, #dc143c 0%, #c41e3a 50%, #8b0000 100%);
    border-radius: 50% 85% 0 0;
    top: -28px;
    left: 3px;
    transform: rotate(12deg);
}

.christmas-gift-sack {
    position: absolute;
    width: 30px;
    height: 28px;
    background: linear-gradient(135deg, #cd853f 0%, #8b4513 40%, #654321 100%);
    border-radius: 45% 45% 50% 50%;
    top: -2px;
    left: -8px;
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.3), 0 3px 6px rgba(0,0,0,0.2);
    z-index: -1;
}

/* Harness/Reins - connects sleigh to reindeer */
.christmas-reins-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 40px;
    height: 30px;
    margin: 0 -5px;
}

.christmas-rein {
    position: relative;
    height: 3px;
    width: 40px;
    background: linear-gradient(90deg, #8b4513 0%, #a0522d 50%, #8b4513 100%);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
    margin: 4px 0;
}

.christmas-rein.top { transform: rotate(-3deg); }
.christmas-rein.bottom { transform: rotate(3deg); }

.christmas-santa-trail {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.christmas-trail-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
    animation: christmas-trail-fade 1s ease-out forwards;
}

@keyframes christmas-santa-fly {
    0% { transform: translateX(-300px) translateY(0); }
    10% { transform: translateX(5vw) translateY(-25px); }
    20% { transform: translateX(15vw) translateY(-10px); }
    30% { transform: translateX(25vw) translateY(-35px); }
    40% { transform: translateX(35vw) translateY(-15px); }
    50% { transform: translateX(50vw) translateY(-30px); }
    60% { transform: translateX(60vw) translateY(-10px); }
    70% { transform: translateX(70vw) translateY(-40px); }
    80% { transform: translateX(80vw) translateY(-20px); }
    90% { transform: translateX(90vw) translateY(-30px); }
    100% { transform: translateX(calc(100vw + 300px)) translateY(-15px); }
}

@keyframes christmas-santa-bob {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes christmas-reindeer-run {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Flying gallop animation - legs stretch forward and back like flying */
@keyframes christmas-leg-fly-front {
    0%, 100% { transform: rotate(-45deg); }
    50% { transform: rotate(30deg); }
}

@keyframes christmas-leg-fly-back {
    0%, 100% { transform: rotate(45deg); }
    50% { transform: rotate(-30deg); }
}

@keyframes christmas-nose-glow {
    0% { box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.5), 0 0 10px 4px rgba(255, 0, 0, 0.2); }
    100% { box-shadow: 0 0 10px 4px rgba(255, 0, 0, 0.8), 0 0 20px 8px rgba(255, 0, 0, 0.4); }
}

@keyframes christmas-trail-fade {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0) translateX(50px); }
}

/* Frozen Icicles - Realistic frozen ice */
.christmas-frozen-icicles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 99990;
    overflow: visible;
}

.christmas-frozen-icicle {
    position: absolute;
    top: 0;
    background: linear-gradient(180deg, rgba(220, 240, 255, 0.95) 0%, rgba(200, 230, 255, 0.85) 10%, rgba(180, 220, 250, 0.7) 30%, rgba(160, 210, 245, 0.5) 60%, rgba(140, 200, 240, 0.3) 85%, rgba(120, 190, 235, 0.1) 100%);
    border-radius: 2px 2px 50% 50%;
    transform-origin: top center;
    box-shadow: inset 1px 0 2px rgba(255, 255, 255, 0.9), inset -1px 0 1px rgba(150, 200, 255, 0.4), 0 3px 6px rgba(100, 150, 200, 0.2);
}

.christmas-frozen-icicle::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 20%;
    width: 30%;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 1px;
}

.christmas-frozen-icicle::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: radial-gradient(ellipse at 30% 30%, rgba(220, 240, 255, 0.9) 0%, rgba(180, 220, 250, 0.6) 50%, rgba(140, 200, 240, 0.3) 100%);
    border-radius: 50%;
    animation: christmas-frozen-icicle-drop 6s ease-in-out infinite;
}

@keyframes christmas-frozen-icicle-drop {
    0%, 70% { opacity: 0.8; transform: translateX(-50%) translateY(0) scale(1); }
    75% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.2); }
    85% { opacity: 0.6; transform: translateX(-50%) translateY(15px) scale(0.8); }
    100% { opacity: 0; transform: translateX(-50%) translateY(25px) scale(0.4); }
}

/* Ornaments */
.christmas-ornament {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    animation: christmas-ornament-fall linear forwards;
}

.christmas-ornament::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 8px;
    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
    border-radius: 2px 2px 0 0;
}

.christmas-ornament::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 30%;
    height: 20%;
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    transform: rotate(-30deg);
}

@keyframes christmas-ornament-fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 50px)) rotate(720deg);
        opacity: 0.8;
    }
}

/* Snow Accumulation - Realistic Snow Cap Style */
.christmas-snow-ground {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 99995;
    transition: height 0.25s ease-out;
    overflow: visible;
}

.christmas-snow-ground-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.christmas-snow-drips {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    pointer-events: none;
}

/* Color Themes */
.bulb-red { background: linear-gradient(180deg, #ff6b6b 0%, #c41e3a 100%); color: #ff4444; }
.bulb-green { background: linear-gradient(180deg, #69db7c 0%, #2d5a3d 100%); color: #44ff44; }
.bulb-blue { background: linear-gradient(180deg, #74c0fc 0%, #1864ab 100%); color: #4488ff; }
.bulb-yellow { background: linear-gradient(180deg, #ffe066 0%, #fab005 100%); color: #ffdd44; }
.bulb-orange { background: linear-gradient(180deg, #ffa94d 0%, #e8590c 100%); color: #ff8844; }
.bulb-purple { background: linear-gradient(180deg, #da77f2 0%, #7950f2 100%); color: #aa44ff; }
.bulb-pink { background: linear-gradient(180deg, #f783ac 0%, #c2255c 100%); color: #ff66aa; }
.bulb-white { background: linear-gradient(180deg, #ffffff 0%, #e9ecef 100%); color: #ffffff; }
.bulb-warm { background: linear-gradient(180deg, #fff3bf 0%, #ffd43b 100%); color: #ffeeaa; }
.bulb-cool { background: linear-gradient(180deg, #d0ebff 0%, #74c0fc 100%); color: #aaddff; }
.bulb-gold { background: linear-gradient(180deg, #ffe066 0%, #b8860b 100%); color: #ffd700; }

/* Responsive */
@media (max-width: 768px) {
    .christmas-bulb {
        width: 10px;
        height: 14px;
    }
    
    .christmas-santa {
        font-size: 30px;
    }
}