/* /css/special_effects.css */

#effects-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Crucial: Clicks must pass through */
    overflow: hidden;
    z-index: 5010; /* Above the flipbook, below the control bar */
}

.particle {
    position: absolute;
    top: -5%; /* Start just off-screen */
    border-radius: 50%;
    opacity: 0;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* =================== */
/* --- SNOW STYLES --- */
/* =================== */
.particle.snow {
    background-color: white;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

@keyframes fall {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) translateX(50px);
        opacity: 0.8;
    }
}

/* ====================================== */
/* --- SAKURA (Cherry Blossom) STYLES --- */
/* ====================================== */
.particle.sakura {
    background-color: #ffb7c5; /* A soft pink */
    width: 10px; height: 10px;
    border-radius: 5px 0; /* A simple petal shape */
    animation-name: flutter;
}

@keyframes flutter {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(105vh) translateX(100px) rotate(720deg);
        opacity: 0;
    }
}

@keyframes horizontal-flutter {
    0%, 100% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
}

/* ========================= */
/* --- NEW: HEART STYLES --- */
/* ========================= */
/* --- V2: ROBUST HEART STYLES (WITH INNER WRAPPER) --- */

/* This is the new inner div that ONLY creates the shape. */
/* It has no animation or positioning itself. */
.heart-shape {
    position: relative; /* Anchor for the pseudo-elements */
    background-color: #ff4d4d;
    height: 10px;
    width: 10px;
    transform: rotate(-45deg);
}

.heart-shape:before,
.heart-shape:after {
    content: "";
    background-color: #ff4d4d;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    position: absolute;
}

.heart-shape:before {
    top: -5px;
    left: 0;
}

.heart-shape:after {
    left: 5px;
    top: 0;
}

/* 
  This rule now ONLY applies the correct animation to the main particle container.
  It no longer has any shape styles.
*/
.particle.rising_hearts {
    animation-name: rise; /* Use the rise animation */
}

.particle.heart {
    animation-name: flutter; /* The original falling hearts */
}
/* --- END V2 HEART STYLES --- */

/* ============================= */
/* --- NEW: PARTICLES STYLES --- */
/* ============================= */
/* We can reuse the .snow class for the basic shape and just change the color in the JS */
.particle.particles {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* =================================== */
/* --- NEW: RISING BALLOONS STYLES --- */
/* =================================== */
.particle.balloons {
    /* This will be the main circle of the balloon */
    border-radius: 50%;
    position: relative; /* Needed for the knot */
    animation-name: rise; /* Use our new rise animation */
}

.particle.balloons::after {
    /* This pseudo-element creates the little knot at the bottom */
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    bottom: -4px; /* Position just below the circle */
    transform: translateX(-50%);
    
    /* The classic CSS triangle trick */
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid; /* Color will be inherited */
}

/* New animation for rising instead of falling */
@keyframes rise {
    from {
        transform: translateY(100vh) translateX(0); /* Start at the bottom */
        opacity: 1;
    }
    to {
        transform: translateY(-100px) translateX(50px); /* End above the top */
        opacity: 0;
    }
}



/* ================================== */
/* --- NEW: FALLING LEAVES STYLES --- */
/* ================================== */
.particle.leaves {
    border-radius: 15% 50% 15% 50%; /* A simple, asymmetrical leaf shape */
    animation-name: flutter; /* Reuse the flutter animation for a gentle fall */
}