static/flower-animation.css

/* CSS for flower background animations */
.flower-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.1;
}

.flower-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.flower-particles::before {
    content: '🌸';
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 1.5em;
    animation: float 8s ease-in-out infinite;
}

.flower-particles::after {
    content: '🌺';
    position: absolute;
    top: 70%;
    right: 10%;
    font-size: 1.2em;
    animation: float 6s ease-in-out infinite reverse;
}

/* Additional floating flowers */
.flower-extra {
    position: fixed;
    top: 40%;
    left: 80%;
    font-size: 1.8em;
    animation: float 7s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

.flower-extra::before {
    content: '🌷';
}

.flower-extra2 {
    position: fixed;
    top: 80%;
    left: 20%;
    font-size: 1.3em;
    animation: float 5s ease-in-out infinite reverse;
    z-index: -1;
    pointer-events: none;
}

.flower-extra2::before {
    content: '🌻';
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-20px) rotate(180deg); 
        opacity: 1;
    }
}