/**
 * CSS cho hiệu ứng hoa rơi
 */

.flower-fall-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.flower {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Hoa đào - màu hồng */
.flower-peach {
    animation: flowerFloat 8s infinite ease-in-out;
}

.flower-peach img {
    filter: drop-shadow(0 2px 6px rgba(255, 182, 193, 0.4));
}

/* Hoa mai - màu vàng */
.flower-apricot {
    animation: flowerFloat 10s infinite ease-in-out;
}

.flower-apricot img {
    filter: drop-shadow(0 2px 6px rgba(255, 235, 59, 0.4));
}

/* Animation rơi nhẹ nhàng */
@keyframes flowerFloat {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(25px) translateX(10px) rotate(90deg);
    }
    50% {
        transform: translateY(50px) translateX(-5px) rotate(180deg);
    }
    75% {
        transform: translateY(75px) translateX(15px) rotate(270deg);
    }
    100% {
        transform: translateY(100px) translateX(0) rotate(360deg);
    }
}

/* Hiệu ứng khi không có hình ảnh - tạo hoa bằng CSS */
.flower-peach:not(:has(img)) {
    background: radial-gradient(circle at 30% 30%, 
        rgba(255, 182, 193, 0.9) 0%,
        rgba(255, 105, 180, 0.8) 30%,
        rgba(255, 20, 147, 0.7) 60%,
        rgba(219, 112, 147, 0.6) 100%);
    border-radius: 50% 0 50% 50%;
    position: relative;
}

.flower-peach:not(:has(img))::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 30%;
    height: 30%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
}

.flower-apricot:not(:has(img)) {
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 248, 220, 0.9) 0%,
        rgba(255, 235, 59, 0.8) 30%,
        rgba(255, 193, 7, 0.7) 60%,
        rgba(255, 152, 0, 0.6) 100%);
    border-radius: 50% 0 50% 50%;
    position: relative;
}

.flower-apricot:not(:has(img))::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 30%;
    height: 30%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%;
}

/* Responsive - giảm số lượng hoa trên mobile */
@media (max-width: 768px) {
    .flower-fall-container {
        /* Giảm opacity để không làm phiền trên mobile */
        opacity: 0.7;
    }
    
    .flower {
        /* Nhỏ hơn trên mobile */
        transform: scale(0.7);
    }
}

/* Tối ưu performance */
@media (prefers-reduced-motion: reduce) {
    .flower-fall-container {
        display: none;
    }
}

/* Hiệu ứng khi hover (tùy chọn) */
.flower:hover {
    transform: scale(1.2) !important;
    transition: transform 0.3s ease;
}