/* styles/flowers.css */

.flower-cluster-wrapper {
    position: absolute;
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 10;
    width: 16vw;
    height: 16vw;
    margin-left: -8vw;
}

.hidden-cluster {
    display: none !important;
}

/* Custom Cluster Overrides (Positions, Scales, and Z-Index layering) */
.cluster-0 { left: 18% !important; bottom: 24% !important; transform: scale(0.55) !important; z-index: 10; }
.cluster-1 { left: 8% !important; bottom: 2% !important; transform: scale(0.85) !important; z-index: 100; }
.cluster-2 { left: 42% !important; bottom: 0% !important; transform: scale(0.9) !important; z-index: 110; }
.cluster-3 { left: 26% !important; bottom: 12% !important; transform: scale(0.72) !important; z-index: 50; }
.cluster-4 { left: 56% !important; bottom: 6% !important; transform: scale(0.78) !important; z-index: 80; }
.cluster-5 { left: 38% !important; bottom: 20% !important; transform: scale(0.62) !important; z-index: 30; }

.cluster-10 { left: 12% !important; bottom: 16% !important; transform: scale(0.65) !important; z-index: 40; }
.cluster-11 { left: 48% !important; bottom: 14% !important; transform: scale(0.7) !important; z-index: 45; }
.cluster-12 { left: 3% !important; bottom: 10% !important; transform: scale(0.75) !important; z-index: 60; }
.cluster-13 { left: 52% !important; bottom: 22% !important; transform: scale(0.58) !important; z-index: 20; }
.cluster-14 { left: 62% !important; bottom: 10% !important; transform: scale(0.8) !important; z-index: 70; }
.cluster-15 { left: 6% !important; bottom: 25% !important; transform: scale(0.52) !important; z-index: 5; }
.cluster-16 { left: 32% !important; bottom: 4% !important; transform: scale(0.88) !important; z-index: 90; }
.cluster-17 { left: 62% !important; bottom: 0% !important; transform: scale(0.9) !important; z-index: 120; }

.cluster-18 { left: 15% !important; bottom: 8% !important; transform: scale(0.76) !important; z-index: 75; }
.cluster-19 { left: 24% !important; bottom: 19% !important; transform: scale(0.64) !important; z-index: 35; }
.cluster-20 { left: 50% !important; bottom: 4% !important; transform: scale(0.85) !important; z-index: 95; }
.cluster-21 { left: 58% !important; bottom: 15% !important; transform: scale(0.68) !important; z-index: 55; }
.cluster-22 { left: 45% !important; bottom: 2% !important; transform: scale(0.86) !important; z-index: 105; }
.cluster-23 { left: 10% !important; bottom: 28% !important; transform: scale(0.48) !important; z-index: 1; }

.cluster-24 { left: 35% !important; bottom: 12% !important; transform: scale(0.7) !important; z-index: 55; }
.cluster-25 { left: 60% !important; bottom: 22% !important; transform: scale(0.55) !important; z-index: 25; }
.cluster-26 { left: 5% !important; bottom: 5% !important; transform: scale(0.8) !important; z-index: 95; }
.cluster-27 { left: 48% !important; bottom: 18% !important; transform: scale(0.65) !important; z-index: 35; }
.cluster-28 { left: 22% !important; bottom: 8% !important; transform: scale(0.75) !important; z-index: 65; }
.cluster-29 { left: 62% !important; bottom: 12% !important; transform: scale(0.72) !important; z-index: 52; }
.cluster-30 { left: 5% !important; bottom: 20% !important; transform: scale(0.65) !important; z-index: 18; }
.cluster-31 { left: 62% !important; bottom: 15% !important; transform: scale(0.7) !important; z-index: 68; }
.cluster-32 { left: 12% !important; bottom: 15% !important; transform: scale(0.75) !important; z-index: 48; }
.cluster-33 { left: 25% !important; bottom: 25% !important; transform: scale(0.6) !important; z-index: 12; }
.cluster-34 { left: 48% !important; bottom: 25% !important; transform: scale(0.62) !important; z-index: 14; }
.cluster-35 { left: 52% !important; bottom: 18% !important; transform: scale(0.68) !important; z-index: 42; }
.cluster-36 { left: 10% !important; bottom: 10% !important; transform: scale(0.78) !important; z-index: 82; }
.cluster-37 { left: 35% !important; bottom: 5% !important; transform: scale(0.85) !important; z-index: 98; }
.cluster-38 { left: 45% !important; bottom: 18% !important; transform: scale(0.6) !important; z-index: 22; }
.cluster-39 { left: 60% !important; bottom: 28% !important; transform: scale(0.55) !important; z-index: 5; }
.cluster-40 { left: 20% !important; bottom: 32% !important; transform: scale(0.45) !important; z-index: 2; }
.cluster-41 { left: 55% !important; bottom: 30% !important; transform: scale(0.5) !important; z-index: 3; }


.cluster-finale-1 { left: 72% !important; bottom: 24% !important; transform: scale(0.65) !important; z-index: 15; }
.cluster-finale-2 { left: 88% !important; bottom: 8% !important; transform: scale(0.75) !important; z-index: 85; }
.cluster-finale-3 { left: 2% !important; bottom: 22% !important; transform: scale(0.6) !important; z-index: 25; }
.cluster-finale-4 { left: 96% !important; bottom: 2% !important; transform: scale(0.85) !important; z-index: 115; }
.cluster-finale-5 { left: 92% !important; bottom: 20% !important; transform: scale(0.65) !important; z-index: 35; }
.cluster-finale-6 { left: 20% !important; bottom: 2% !important; transform: scale(0.82) !important; z-index: 102; }
.cluster-finale-7 { left: 58% !important; bottom: 26% !important; transform: scale(0.58) !important; z-index: 8; }
.cluster-finale-8 { left: 78% !important; bottom: 15% !important; transform: scale(0.72) !important; z-index: 65; }
.cluster-finale-9 { left: 85% !important; bottom: 4% !important; transform: scale(0.8) !important; z-index: 92; }
.cluster-finale-10 { left: 40% !important; bottom: 15% !important; transform: scale(0.7) !important; z-index: 50; }
.cluster-finale-11 { left: 68% !important; bottom: 5% !important; transform: scale(0.75) !important; z-index: 90; }
.cluster-finale-12 { left: 30% !important; bottom: 25% !important; transform: scale(0.6) !important; z-index: 20; }
.cluster-finale-13 { left: 82% !important; bottom: 28% !important; transform: scale(0.62) !important; z-index: 10; }
.cluster-finale-14 { left: 15% !important; bottom: 18% !important; transform: scale(0.68) !important; z-index: 40; }
.cluster-finale-15 { left: 50% !important; bottom: 10% !important; transform: scale(0.82) !important; z-index: 100; }
.cluster-finale-16 { left: 10% !important; bottom: 12% !important; transform: scale(0.72) !important; z-index: 62; }
.cluster-finale-17 { left: 25% !important; bottom: 5% !important; transform: scale(0.84) !important; z-index: 104; }
.cluster-finale-18 { left: 38% !important; bottom: 8% !important; transform: scale(0.78) !important; z-index: 88; }
.cluster-finale-19 { left: 62% !important; bottom: 5% !important; transform: scale(0.82) !important; z-index: 108; }
.cluster-finale-20 { left: 70% !important; bottom: 12% !important; transform: scale(0.74) !important; z-index: 64; }
.cluster-finale-21 { left: 80% !important; bottom: 22% !important; transform: scale(0.66) !important; z-index: 44; }
.cluster-finale-22 { left: 90% !important; bottom: 15% !important; transform: scale(0.72) !important; z-index: 72; }
.cluster-finale-23 { left: 5% !important; bottom: 28% !important; transform: scale(0.58) !important; z-index: 11; }
.cluster-finale-24 { left: 95% !important; bottom: 25% !important; transform: scale(0.64) !important; z-index: 34; }
.cluster-finale-25 { left: 42% !important; bottom: 2% !important; transform: scale(0.88) !important; z-index: 118; }
.cluster-finale-26 { left: 85% !important; bottom: 20% !important; transform: scale(0.68) !important; z-index: 38; }
.cluster-finale-27 { left: 78% !important; bottom: 5% !important; transform: scale(0.8) !important; z-index: 95; }
.cluster-finale-28 { left: 35% !important; bottom: 30% !important; transform: scale(0.55) !important; z-index: 5; }
.cluster-finale-29 { left: 65% !important; bottom: 28% !important; transform: scale(0.58) !important; z-index: 6; }


/* 2D Image Specific Styles */
.flower-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0.5vw 1vw rgba(0,0,0,0.1));
}

/* Animations */
.flower-bloom {
    animation: smooth-appear 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transform-origin: bottom center;
}

@keyframes smooth-appear {
    0% {
        opacity: 0;
        transform: translateY(4vh) scale(0.6);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.flower-wither {
    animation: wither-anim 0.8s ease-in forwards;
}

@keyframes wither-anim {
    to {
        transform: scale(0) translateY(3vh);
        opacity: 0;
    }
}