/* Christmas Mode Styles - Active only during Dec 1 - Dec 31 */

/* =========================================
   1. The Atmosphere: Realistic Falling Snow
   ========================================= */

/* Snowfall Container - Layered behind content but visible */
.christmas-snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; /* Behind main content (usually z-index 100+), above background */
    overflow: hidden;
}

/* Base snowflake style */
.christmas-snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: background-position; /* Optimize performance */
}

/* Layer 1: Foreground - Large, fast, slightly blurred */
.christmas-snow.layer1 {
    z-index: 3;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%200v24M0%2012h24M4.2%204.2l15.6%2015.6M19.8%204.2L4.2%2019.8M12%204l2%202M12%204l-2%202M12%2020l2-2M12%2020l-2-2M4%2012l2-2M4%2012l-2-2M20%2012l-2-2M20%2012l2-2%22%20transform%3D%22translate%2842.0%2C%2042.0%29%20scale%281.5%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.9%22%20/%3E%3Cpath%20d%3D%22M12%200L15%209L24%2012L15%2015L12%2024L9%2015L0%2012L9%209Z%22%20transform%3D%22translate%28165.6%2C%20405.6%29%20scale%281.2%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.9%22%20/%3E%3Cpath%20d%3D%22M12%200v24M0%2012h24M4.2%204.2l15.6%2015.6M19.8%204.2L4.2%2019.8M12%204l2%202M12%204l-2%202M12%2020l2-2M12%2020l-2-2M4%2012l2-2M4%2012l-2-2M20%2012l-2-2M20%2012l2-2%22%20transform%3D%22translate%28403.2%2C%20163.2%29%20scale%281.4%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.9%22%20/%3E%3Cpath%20d%3D%22M12%200L15%209L24%2012L15%2015L12%2024L9%2015L0%2012L9%209Z%22%20transform%3D%22translate%28524.4%2C%20464.4%29%20scale%281.3%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.9%22%20/%3E%3C/svg%3E');
    background-size: 600px 600px;
    animation: snowFall1 8s linear infinite;
    filter: blur(1px);
}

/* Layer 2: Midground - Medium size, normal speed */
.christmas-snow.layer2 {
    z-index: 2;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%22500%22%20height%3D%22500%22%20viewBox%3D%220%200%20500%20500%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22%20transform%3D%22translate%2865.4%2C%20115.4%29%20scale%280.8%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.7%22%20/%3E%3Cpath%20d%3D%22M12%200v24M0%2012h24M4.2%204.2l15.6%2015.6M19.8%204.2L4.2%2019.8M12%204l2%202M12%204l-2%202M12%2020l2-2M12%2020l-2-2M4%2012l2-2M4%2012l-2-2M20%2012l-2-2M20%2012l2-2%22%20transform%3D%22translate%28214.2%2C%20314.2%29%20scale%280.9%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.7%22%20/%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22%20transform%3D%22translate%28365.4%2C%2065.4%29%20scale%280.8%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.7%22%20/%3E%3Cpath%20d%3D%22M12%200v24M0%2012h24M4.2%204.2l15.6%2015.6M19.8%204.2L4.2%2019.8M12%204l2%202M12%204l-2%202M12%2020l2-2M12%2020l-2-2M4%2012l2-2M4%2012l-2-2M20%2012l-2-2M20%2012l2-2%22%20transform%3D%22translate%28414.2%2C%20414.2%29%20scale%280.9%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.7%22%20/%3E%3C/svg%3E');
    background-size: 500px 500px;
    animation: snowFall2 10s linear infinite;
}

/* Layer 3: Background - Small, slow, sharp */
.christmas-snow.layer3 {
    z-index: 1;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%200%20400%20400%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22%20transform%3D%22translate%2814.0%2C%2014.0%29%20scale%280.5%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.5%22%20/%3E%3Cpath%20d%3D%22M12%200L15%209L24%2012L15%2015L12%2024L9%2015L0%2012L9%209Z%22%20transform%3D%22translate%2892.8%2C%20172.8%29%20scale%280.6%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.5%22%20/%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22%20transform%3D%22translate%28214.00000000000003%2C%2094.0%29%20scale%280.5%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.5%22%20/%3E%3Cpath%20d%3D%22M12%202v20M2%2012h20M4.9%204.9l14.2%2014.2M19.1%204.9L4.9%2019.1%22%20transform%3D%22translate%28332.8%2C%20292.8%29%20scale%280.6%29%22%20stroke%3D%22white%22%20stroke-width%3D%221.5%22%20fill%3D%22white%22%20opacity%3D%220.5%22%20/%3E%3C/svg%3E');
    background-size: 400px 400px;
    animation: snowFall3 13s linear infinite;
}

/* Animations matched to background-size for seamless looping */
@keyframes snowFall1 {
    0% { background-position: 0 0; }
    100% { background-position: 0 600px; }
}

@keyframes snowFall2 {
    0% { background-position: 0 0; }
    100% { background-position: 0 500px; }
}

@keyframes snowFall3 {
    0% { background-position: 0 0; }
    100% { background-position: 0 400px; }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .christmas-snow {
        animation: none !important;
        background-position: 0 0 !important;
    }
}

/* =========================================
   2. The Scenery: Christmas Trees (Footer)
   ========================================= */

/* Container for the scenic footer */
.christmas-footer-scenery {
    position: fixed; /* Fixed position to follow scroll */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    pointer-events: none; /* Let clicks pass through */
    z-index: 999; /* High z-index to sit on top of background/content but below header/modals */
    overflow: hidden;
}

/* Trees generation using CSS borders (triangles) or SVGs if available.
   Using CSS shapes for lightweight implementation without external assets. */
.christmas-tree {
    position: absolute;
    bottom: -20px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 80px solid rgba(255, 255, 255, 0.1); /* Subtle ghostly tree */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
    transition: transform 0.3s ease;
}

/* Varying tree sizes and positions */
.christmas-tree:nth-child(1) { left: 5%; transform: scale(0.8); border-bottom-color: rgba(20, 50, 20, 0.3); }
.christmas-tree:nth-child(2) { left: 15%; transform: scale(1.2); border-bottom-color: rgba(30, 60, 30, 0.4); z-index: 2; }
.christmas-tree:nth-child(3) { left: 25%; transform: scale(0.9); border-bottom-color: rgba(20, 50, 20, 0.3); }
.christmas-tree:nth-child(4) { right: 25%; transform: scale(0.9); border-bottom-color: rgba(20, 50, 20, 0.3); }
.christmas-tree:nth-child(5) { right: 15%; transform: scale(1.3); border-bottom-color: rgba(30, 60, 30, 0.4); z-index: 2; }
.christmas-tree:nth-child(6) { right: 5%; transform: scale(0.8); border-bottom-color: rgba(20, 50, 20, 0.3); }

/* Micro-interaction: Wiggle on hover (when user hovers near footer) */
footer:hover .christmas-tree {
    animation: treeWiggle 2s ease-in-out infinite;
}
.christmas-tree:nth-child(even) { animation-delay: 0.5s; }

@keyframes treeWiggle {
    0%, 100% { transform: rotate(0deg) scale(var(--scale, 1)); }
    25% { transform: rotate(2deg) scale(var(--scale, 1)); }
    75% { transform: rotate(-2deg) scale(var(--scale, 1)); }
}

/* =========================================
   3. The "Delighter": Santa's Sleigh
   ========================================= */

.santa-sleigh-container {
    position: fixed;
    top: 10%;
    left: -200px; /* Start off-screen */
    z-index: 5; /* Behind nav but visible */
    pointer-events: none;
    will-change: transform;
}

.santa-sleigh {
    font-size: 40px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    opacity: 0.9;
}

/* Animation triggered by JS class */
.santa-flying {
    animation: flyAcross 12s linear forwards;
}

@keyframes flyAcross {
    0% {
        left: -200px;
        top: 20%;
        transform: rotate(5deg) scale(0.8);
    }
    25% {
        top: 15%;
        transform: rotate(0deg) scale(0.9);
    }
    50% {
        top: 25%;
        transform: rotate(5deg) scale(1);
    }
    75% {
        top: 10%;
        transform: rotate(0deg) scale(0.9);
    }
    100% {
        left: 110%; /* Fly off right side */
        top: 15%;
        transform: rotate(-5deg) scale(0.8);
    }
}

/* =========================================
   4. Existing Decorations (Logo & Header)
   ========================================= */

/* Logo Decoration */
header .logo a {
    position: relative;
    display: inline-block;
}

header .logo a::after {
    content: "🎅";
    position: absolute;
    top: -15px;
    right: -10px;
    font-size: 24px;
    transform: rotate(20deg);
    z-index: 100;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    animation: hatBob 3s ease-in-out infinite;
}

header .logo a::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 5px;
    width: 90%;
    height: 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5px 5px 2px 2px;
    filter: blur(1px);
    z-index: 101;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

@keyframes hatBob {
    0%, 100% { transform: rotate(20deg) scale(1); }
    50% { transform: rotate(10deg) scale(1.1); }
}

header.main-header {
    border-bottom: 1px solid rgba(255, 0, 0, 0.3);
    box-shadow: 0 4px 30px rgba(0, 255, 0, 0.05);
    transition: all 0.5s ease;
}
/* Persistent Winter World - Snow Accumulation */

/* Ledge Targeting */
.snow-catch {
    position: relative !important; /* Ensure pseudo-element positioning works */
    /* We don't want overflow: hidden to cut off the snow, but for some elements like rounded cards,
       we might need the snow to be inside or follow the border.
       If overflow is hidden, ::before will be cut.
       Let's check if .service-card has overflow: hidden. Yes it does.
       So we need to be careful. If overflow is hidden, the snow must be inside the element.
    */
}

/* The Snow Layer */
.snow-catch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* The height is controlled dynamically by JS variable --snow-level */
    height: var(--snow-level, 0px);

    /* Organic Snow SVG
       Width 100, Height 10.
       Path: M0,0 L100,0 L100,4 C80,10 60,3 40,8 C20,12 10,5 0,4 Z
       This creates a more varied wave (Cubic Bezier).
    */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,4 C80,10 60,3 40,8 C20,12 10,5 0,4 Z' fill='rgba(255,255,255,0.95)'/%3E"),
        linear-gradient(rgba(255,255,255,0.95), rgba(255,255,255,0.95));

    background-position:
        bottom left,
        top left;

    background-repeat:
        repeat-x,
        no-repeat;

    /* Scaled to 100px width for more detail, 10px height */
    background-size:
        100px 10px,
        100% calc(100% - 9px);

    /* Match the parent's border radius at the top */
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;

    pointer-events: none; /* Let clicks pass through */
    z-index: 100; /* On top of content */
    transition: height 1s ease-out; /* Smooth growth */
}

/* Specific adjustments for Navigation Bar */
header.main-header.snow-catch::before {
    z-index: 999; /* Below the content of header but above background */
    /* Since header has content, snow should probably be on top of background but maybe behind text?
       Actually, snow usually piles ON TOP of things.
       But we don't want to obscure the logo or menu.
       Let's make it relatively small max-height or make it sit on the top border.
    */
    opacity: 0.9;
}

/* Adjustments for Service Cards */
.service-card.snow-catch::before {
    /* Since service card has overflow: hidden, this is fine, it will look like snow filling up from inside top. */
    /* To make it look like a pile ON TOP, we might need a separate element if overflow clips it.
       If overflow is hidden, ::before at top:0 is inside the box.
       That's actually perfect for "snow accumulation on the card".
    */
}

/* Adjustments for Section Separators or Titles */
/* If we apply .snow-catch to a div separator */
.separator-line.snow-catch {
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin: 20px 0;
    /* Snow will pile on top of this line */
}

.separator-line.snow-catch::before {
    top: auto;
    bottom: 0; /* Grow upwards? No, height grows down from top usually. */
    /* If it's a line, snow should sit ON it.
       So top: -Xpx?
       If we want "height" to mean "depth of snow", and it sits on a ledge.
    */
    transform-origin: top;
}