/* Seasonal Theme Elements Container */
.seasonal-theme {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Snow Fall Effect */
@keyframes snowfall {
    0% { transform: translateY(-100vh) translateX(0); opacity: 1; }
    100% { transform: translateY(100vh) translateX(20px); opacity: 0; }
}

.snowflake {
    position: absolute;
    top: -20px;
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(0,0,0,0.1);
    animation: snowfall 10s linear infinite;
    opacity: 0.8;
}

/* Sakura Effect */
.sakura-tree {
    position: absolute;
    bottom: 0px;
    right: 40px;
    left: auto;
    width: 350px;
    height: 400px;
    background: url('../assets/img/sakura tree.png') no-repeat bottom center;
    background-size: contain;
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
}

@media (max-width: 768px) {
    .sakura-tree {
        width: 200px;
        height: 230px;
        right: 50%;
        left: auto;
        transform: translateX(50%);
    }
}

@keyframes sakuraLifecycle {
    0% {
        top: -40px;
        transform: translateX(0) rotate(0deg);
        opacity: 0;
    }
    2% { opacity: 1; }
    10% { transform: translateX(var(--x1, 30px)) rotate(var(--r1, 90deg)); }
    20% { transform: translateX(var(--x2, -30px)) rotate(var(--r2, 180deg)); }
    30% { 
        top: calc(100% - var(--ground-offset, 50px));
        transform: translateX(var(--x3, 20px)) rotate(var(--r3, 270deg));
        opacity: 1;
    }
    90% { 
        top: calc(100% - var(--ground-offset, 50px));
        transform: translateX(var(--x3, 20px)) rotate(var(--r3, 270deg));
        opacity: 1;
    }
    100% { 
        top: calc(100% - var(--ground-offset, 50px));
        transform: translateX(var(--x3, 20px)) rotate(var(--r3, 270deg));
        opacity: 0;
    }
}

@keyframes sakuraSway {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
}

.petal {
    position: absolute;
    top: -40px;
    width: var(--size, 12px);
    height: calc(var(--size, 12px) * 1.33);
    background: radial-gradient(circle at bottom right, #ffb7c5, #ff69b4);
    border-radius: 15px 0 15px 0;
    opacity: 0;
    box-shadow: 0 0 5px rgba(255, 183, 197, 0.5);
    transform-origin: center bottom;
    left: var(--left, 0%);
}

.petal.falling {
    animation: sakuraLifecycle var(--duration, 20s) linear forwards;
}

.petal.static {
    top: auto;
    bottom: var(--ground-offset, 50px);
    transform: rotate(var(--tr, 45deg));
    opacity: 0.85;
}

.petal::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: inherit; border-radius: inherit;
    animation: sakuraSway var(--sway-duration, 2s) ease-in-out infinite;
}

/* Different petal shapes/colors */
.petal.type-2 {
    background: radial-gradient(circle at bottom right, #ffd1dc, #ff91af);
    border-radius: 12px 2px 12px 2px;
}

.petal.type-3 {
    background: radial-gradient(circle at bottom right, #fff0f5, #ffb7c5);
    border-radius: 20px 0 20px 0;
}

/* Rain Effect */
@keyframes rainfall {
    0% { transform: translateY(-100px); opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

.drop {
    position: absolute;
    top: -20px;
    width: 2px;
    height: 15px;
    background: rgba(255, 255, 255, 0.4);
    animation: rainfall 1s linear infinite;
}

/* Fireworks Effect (Improved Multi-color realistic scatter) */
@keyframes fireworkLaunch {
    0% { transform: translateY(10px); opacity: 0; }
    5% { transform: translateY(0); opacity: 1; height: 30px; }
    95% { transform: translateY(calc(var(--target-y) * 0.98)); opacity: 1; height: 10px; }
    100% { transform: translateY(var(--target-y)); opacity: 0; height: 0; }
}

@keyframes fireworkSparkle {
    0% { 
        transform: translate(0, 0) scale(0); 
        opacity: 1; 
    }
    1% { /* Completely instant massive pop */
        transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4)) scale(2); 
        opacity: 1;
        box-shadow: 0 0 10px currentColor, 0 0 15px currentColor;
    }
    40% { /* Drag */
        opacity: 1; 
        transform: translate(calc(var(--tx) * 0.95), calc(var(--ty) * 0.95)) scale(1); 
        box-shadow: 0 0 4px currentColor;
    }
    100% { /* Gravity drop */
        opacity: 0; 
        transform: translate(var(--tx), calc(var(--ty) + var(--fall-dist, 60px))) scale(0.3); 
        box-shadow: none;
    }
}

.firework-container {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 10px;
}

.firework-trail {
    position: absolute;
    bottom: 0;
    left: 5px;
    width: 2px;
    height: 0;
    /* Soft glowing trail */
    background: linear-gradient(to top, transparent, rgba(255, 240, 200, 0.8), #ffffff);
    border-radius: 3px;
    animation: fireworkLaunch 1.4s ease-out forwards;
    transform-origin: bottom;
    opacity: 0;
}

.firework-burst {
    position: absolute;
    left: 5px;
    width: 2px;
    height: 2px;
}

.spark {
    position: absolute;
    top: 0;
    left: 0;
    background-color: currentColor; /* Uses color set via JS */
    border-radius: 50%;
    opacity: 0;
    animation: fireworkSparkle 2s ease-out forwards;
    /* Delay set to trigger precisely right before trail reaches 100% */
    animation-delay: 1.34s;
    transform-origin: center;
    width: var(--size, 3px);
    height: var(--size, 3px);
}

.spark-dot, .spark-line {
    display: none; /* Removing previous complex structural styles for better visual pure dot */
}


/* Fall Leaves Effect */
@keyframes fallLifecycle {
    0% {
        top: -40px;
        transform: translateX(0) rotateX(0) rotateY(0) rotateZ(0);
        opacity: 0;
    }
    2% { opacity: 1; }
    15% { transform: translateX(var(--x1)) rotateX(var(--rx1)) rotateY(var(--ry1)) rotateZ(var(--rz1)); }
    30% { transform: translateX(var(--x2)) rotateX(var(--rx2)) rotateY(var(--ry2)) rotateZ(var(--rz2)); }
    45% { 
        top: calc(100% - var(--ground-offset, 50px));
        transform: translateX(var(--x3)) rotateX(var(--rx3)) rotateY(var(--ry3)) rotateZ(var(--rz3));
        opacity: 1;
    }
    90% { 
        top: calc(100% - var(--ground-offset, 50px));
        transform: translateX(var(--x3)) rotateX(var(--rx3)) rotateY(var(--ry3)) rotateZ(var(--rz3));
        opacity: 1;
    }
    100% { 
        top: calc(100% - var(--ground-offset, 50px));
        transform: translateX(var(--x3)) rotateX(var(--rx3)) rotateY(var(--ry3)) rotateZ(var(--rz3));
        opacity: 0;
    }
}

.leaf {
    position: absolute;
    top: -40px;
    font-size: var(--size, 1.5rem);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    left: var(--left, 0%);
    transform-style: preserve-3d;
    opacity: 0;
}

.leaf.falling {
    animation: fallLifecycle var(--duration, 25s) linear forwards;
}

.leaf.static {
    top: auto;
    bottom: var(--ground-offset, 50px);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 45deg));
    opacity: 0.85;
}