/* ========================================
   REALISTIC FALLING HEARTS ANIMATION
   Confined to charity banner only
   ======================================== */

.charity-banner {
    position: relative;
    overflow: hidden;
}

.heart {
    position: absolute;
    top: -10%;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    z-index: 1;
    font-size: 1.5rem;
    color: #ff69b4;
    text-shadow: 
        0 0 5px rgba(255, 105, 180, 0.8),
        0 0 10px rgba(255, 105, 180, 0.5),
        0 0 15px rgba(255, 105, 180, 0.3);
}

/* Realistic heart fall with natural sway and rotation */
@keyframes heartfall {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
        transform: translate3d(var(--sway-1), 5vh, 0) rotate(var(--rotate-1)) scale(1);
    }
    25% {
        transform: translate3d(var(--sway-2), 25vh, 0) rotate(var(--rotate-2)) scale(var(--scale-mid));
    }
    50% {
        transform: translate3d(var(--sway-3), 50vh, 0) rotate(var(--rotate-3)) scale(1);
    }
    75% {
        transform: translate3d(var(--sway-4), 75vh, 0) rotate(var(--rotate-4)) scale(var(--scale-mid));
    }
    95% {
        opacity: 1;
        transform: translate3d(var(--sway-5), 95vh, 0) rotate(var(--rotate-5)) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--sway-end), 105vh, 0) rotate(var(--rotate-end)) scale(0);
    }
}

/* Individual heart configurations with realistic physics */
.heart:nth-child(1) {
    --sway-1: 1vw; --sway-2: -2vw; --sway-3: 3vw; --sway-4: -1vw; --sway-5: 2vw; --sway-end: -1vw;
    --rotate-1: 30deg; --rotate-2: 90deg; --rotate-3: 150deg; --rotate-4: 210deg; --rotate-5: 270deg; --rotate-end: 320deg;
    --scale-mid: 1.1;
    left: 10vw;
    animation: heartfall 8s ease-in-out infinite;
    animation-delay: 0s;
}

.heart:nth-child(2) {
    --sway-1: -2vw; --sway-2: 3vw; --sway-3: -1vw; --sway-4: 2vw; --sway-5: -2vw; --sway-end: 1vw;
    --rotate-1: -25deg; --rotate-2: -70deg; --rotate-3: -130deg; --rotate-4: -190deg; --rotate-5: -250deg; --rotate-end: -300deg;
    --scale-mid: 1.2;
    left: 25vw;
    animation: heartfall 9s ease-in-out infinite;
    animation-delay: -2s;
}

.heart:nth-child(3) {
    --sway-1: 2vw; --sway-2: -1vw; --sway-3: 2vw; --sway-4: -2vw; --sway-5: 1vw; --sway-end: -1vw;
    --rotate-1: 40deg; --rotate-2: 100deg; --rotate-3: 160deg; --rotate-4: 220deg; --rotate-5: 280deg; --rotate-end: 330deg;
    --scale-mid: 0.9;
    left: 40vw;
    animation: heartfall 10s ease-in-out infinite;
    animation-delay: -4s;
}

.heart:nth-child(4) {
    --sway-1: -3vw; --sway-2: 2vw; --sway-3: -2vw; --sway-4: 3vw; --sway-5: -2vw; --sway-end: 2vw;
    --rotate-1: -35deg; --rotate-2: -80deg; --rotate-3: -140deg; --rotate-4: -200deg; --rotate-5: -260deg; --rotate-end: -310deg;
    --scale-mid: 1.15;
    left: 55vw;
    animation: heartfall 7s ease-in-out infinite;
    animation-delay: -1s;
}

.heart:nth-child(5) {
    --sway-1: 2vw; --sway-2: -3vw; --sway-3: 2vw; --sway-4: -1vw; --sway-5: 2vw; --sway-end: -2vw;
    --rotate-1: 50deg; --rotate-2: 110deg; --rotate-3: 170deg; --rotate-4: 230deg; --rotate-5: 290deg; --rotate-end: 340deg;
    --scale-mid: 1.0;
    left: 70vw;
    animation: heartfall 8.5s ease-in-out infinite;
    animation-delay: -3s;
}

.heart:nth-child(6) {
    --sway-1: -1vw; --sway-2: 2vw; --sway-3: -3vw; --sway-4: 1vw; --sway-5: -2vw; --sway-end: 1vw;
    --rotate-1: -45deg; --rotate-2: -95deg; --rotate-3: -155deg; --rotate-4: -215deg; --rotate-5: -275deg; --rotate-end: -325deg;
    --scale-mid: 1.1;
    left: 85vw;
    animation: heartfall 9.5s ease-in-out infinite;
    animation-delay: -5s;
}

.heart:nth-child(7) {
    --sway-1: 3vw; --sway-2: -2vw; --sway-3: 1vw; --sway-4: -3vw; --sway-5: 2vw; --sway-end: -1vw;
    --rotate-1: 35deg; --rotate-2: 85deg; --rotate-3: 145deg; --rotate-4: 205deg; --rotate-5: 265deg; --rotate-end: 315deg;
    --scale-mid: 0.95;
    left: 15vw;
    animation: heartfall 10.5s ease-in-out infinite;
    animation-delay: -6s;
}

.heart:nth-child(8) {
    --sway-1: -2vw; --sway-2: 3vw; --sway-3: -2vw; --sway-4: 2vw; --sway-5: -3vw; --sway-end: 2vw;
    --rotate-1: -30deg; --rotate-2: -75deg; --rotate-3: -135deg; --rotate-4: -195deg; --rotate-5: -255deg; --rotate-end: -305deg;
    --scale-mid: 1.2;
    left: 30vw;
    animation: heartfall 7.5s ease-in-out infinite;
    animation-delay: -1.5s;
}

.heart:nth-child(9) {
    --sway-1: 1vw; --sway-2: -2vw; --sway-3: 2vw; --sway-4: -1vw; --sway-5: 1vw; --sway-end: -1vw;
    --rotate-1: 45deg; --rotate-2: 105deg; --rotate-3: 165deg; --rotate-4: 225deg; --rotate-5: 285deg; --rotate-end: 335deg;
    --scale-mid: 1.05;
    left: 45vw;
    animation: heartfall 9s ease-in-out infinite;
    animation-delay: -7s;
}

.heart:nth-child(10) {
    --sway-1: -3vw; --sway-2: 2vw; --sway-3: -1vw; --sway-4: 3vw; --sway-5: -2vw; --sway-end: 1vw;
    --rotate-1: -40deg; --rotate-2: -90deg; --rotate-3: -150deg; --rotate-4: -210deg; --rotate-5: -270deg; --rotate-end: -320deg;
    --scale-mid: 1.15;
    left: 60vw;
    animation: heartfall 8s ease-in-out infinite;
    animation-delay: -2.5s;
}

.heart:nth-child(11) {
    --sway-1: 2vw; --sway-2: -1vw; --sway-3: 3vw; --sway-4: -2vw; --sway-5: 1vw; --sway-end: -2vw;
    --rotate-1: 55deg; --rotate-2: 115deg; --rotate-3: 175deg; --rotate-4: 235deg; --rotate-5: 295deg; --rotate-end: 345deg;
    --scale-mid: 0.9;
    left: 75vw;
    animation: heartfall 10s ease-in-out infinite;
    animation-delay: -4.5s;
}

.heart:nth-child(12) {
    --sway-1: -2vw; --sway-2: 3vw; --sway-3: -2vw; --sway-4: 1vw; --sway-5: -3vw; --sway-end: 2vw;
    --rotate-1: -50deg; --rotate-2: -100deg; --rotate-3: -160deg; --rotate-4: -220deg; --rotate-5: -280deg; --rotate-end: -330deg;
    --scale-mid: 1.1;
    left: 90vw;
    animation: heartfall 7s ease-in-out infinite;
    animation-delay: -0.5s;
}

.heart:nth-child(13) {
    --sway-1: 1vw; --sway-2: -3vw; --sway-3: 2vw; --sway-4: -1vw; --sway-5: 2vw; --sway-end: -1vw;
    --rotate-1: 60deg; --rotate-2: 120deg; --rotate-3: 180deg; --rotate-4: 240deg; --rotate-5: 300deg; --rotate-end: 350deg;
    --scale-mid: 1.0;
    left: 5vw;
    animation: heartfall 9.5s ease-in-out infinite;
    animation-delay: -3.5s;
}

.heart:nth-child(14) {
    --sway-1: -1vw; --sway-2: 2vw; --sway-3: -3vw; --sway-4: 2vw; --sway-5: -1vw; --sway-end: 1vw;
    --rotate-1: -55deg; --rotate-2: -105deg; --rotate-3: -165deg; --rotate-4: -225deg; --rotate-5: -285deg; --rotate-end: -335deg;
    --scale-mid: 1.2;
    left: 20vw;
    animation: heartfall 8.5s ease-in-out infinite;
    animation-delay: -6.5s;
}

.heart:nth-child(15) {
    --sway-1: 3vw; --sway-2: -2vw; --sway-3: 1vw; --sway-4: -2vw; --sway-5: 3vw; --sway-end: -2vw;
    --rotate-1: 65deg; --rotate-2: 125deg; --rotate-3: 185deg; --rotate-4: 245deg; --rotate-5: 305deg; --rotate-end: 355deg;
    --scale-mid: 0.95;
    left: 35vw;
    animation: heartfall 10.5s ease-in-out infinite;
    animation-delay: -8s;
}

.heart:nth-child(16) {
    --sway-1: -2vw; --sway-2: 1vw; --sway-3: -2vw; --sway-4: 3vw; --sway-5: -2vw; --sway-end: 1vw;
    --rotate-1: -60deg; --rotate-2: -110deg; --rotate-3: -170deg; --rotate-4: -230deg; --rotate-5: -290deg; --rotate-end: -340deg;
    --scale-mid: 1.15;
    left: 50vw;
    animation: heartfall 7.5s ease-in-out infinite;
    animation-delay: -1.8s;
}

.heart:nth-child(17) {
    --sway-1: 2vw; --sway-2: -3vw; --sway-3: 2vw; --sway-4: -1vw; --sway-5: 2vw; --sway-end: -1vw;
    --rotate-1: 70deg; --rotate-2: 130deg; --rotate-3: 190deg; --rotate-4: 250deg; --rotate-5: 310deg; --rotate-end: 360deg;
    --scale-mid: 1.05;
    left: 65vw;
    animation: heartfall 9s ease-in-out infinite;
    animation-delay: -5.5s;
}

.heart:nth-child(18) {
    --sway-1: -3vw; --sway-2: 2vw; --sway-3: -1vw; --sway-4: 2vw; --sway-5: -3vw; --sway-end: 2vw;
    --rotate-1: -65deg; --rotate-2: -115deg; --rotate-3: -175deg; --rotate-4: -235deg; --rotate-5: -295deg; --rotate-end: -345deg;
    --scale-mid: 1.1;
    left: 80vw;
    animation: heartfall 8s ease-in-out infinite;
    animation-delay: -2.8s;
}

.heart:nth-child(19) {
    --sway-1: 1vw; --sway-2: -2vw; --sway-3: 3vw; --sway-4: -2vw; --sway-5: 1vw; --sway-end: -1vw;
    --rotate-1: 75deg; --rotate-2: 135deg; --rotate-3: 195deg; --rotate-4: 255deg; --rotate-5: 315deg; --rotate-end: 365deg;
    --scale-mid: 0.9;
    left: 95vw;
    animation: heartfall 10s ease-in-out infinite;
    animation-delay: -7.5s;
}

.heart:nth-child(20) {
    --sway-1: -2vw; --sway-2: 3vw; --sway-3: -2vw; --sway-4: 1vw; --sway-5: -2vw; --sway-end: 1vw;
    --rotate-1: -70deg; --rotate-2: -120deg; --rotate-3: -180deg; --rotate-4: -240deg; --rotate-5: -300deg; --rotate-end: -350deg;
    --scale-mid: 1.2;
    left: 12vw;
    animation: heartfall 7s ease-in-out infinite;
    animation-delay: -0.8s;
}

/* Enhanced visual effects for realistic depth */
.heart:nth-child(3n) {
    filter: blur(0.3px);
    opacity: 0.9;
}

.heart:nth-child(5n) {
    filter: blur(0.5px);
    opacity: 0.85;
}

/* Foreground hearts - larger and brighter */
.heart:nth-child(4n+1) {
    font-size: 2rem;
    text-shadow:
        0 0 8px rgba(255, 105, 180, 0.9),
        0 0 15px rgba(255, 105, 180, 0.6),
        0 0 20px rgba(255, 105, 180, 0.4);
}

/* Background hearts - smaller and dimmer */
.heart:nth-child(6n+2) {
    font-size: 1.2rem;
    filter: blur(0.8px);
    opacity: 0.7;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .heart {
        font-size: 1.2rem;
    }

    .heart:nth-child(4n+1) {
        font-size: 1.5rem;
    }

    .heart:nth-child(6n+2) {
        font-size: 1rem;
    }
}