.leaves-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Even further behind */
    transition: transform 0.1s ease-out;
}

.leaf {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: -1;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
}

.l1 { top: 10%; left: 15%; }
.l2 { top: 40%; left: 80%; width: 140px; height: 140px; opacity: 0.4; }
.l3 { top: 70%; left: 75%; width: 80px; height: 80px; }
.l4 { top: 85%; left: 20%; width: 120px; height: 120px; opacity: 0.3; }

.berries-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 110; /* Above text (100) and can (50) */
    transition: transform 0.1s ease-out;
}

.berries-container-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Behind everything */
    transition: transform 0.1s ease-out;
}

.berry {
    position: absolute;
    width: 120px;
    height: 120px;
    outline: none;
    --progress-bar-color: transparent;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.berry.no-animation { animation: none !important; }

/* Provisional: reuse the same blueberry.glb for Limão Siciliano, tinted green via CSS
   filter instead of a dedicated green-fruit model. Swap for a real asset later. */
body.blue-theme .berry {
    filter: hue-rotate(-130deg) saturate(1.6) brightness(1.1) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.b1 { top: 25%; left: 30%; width: 220px; height: 220px; }
.b2 { top: 60%; left: 42%; width: 100px; height: 100px; }
.b3 { top: 30%; left: 62%; width: 250px; height: 250px; }
.b4 { top: 15%; left: 48%; width: 140px; height: 140px; }
.b5 { top: 75%; left: 20%; width: 120px; height: 120px; }
.b6 { top: 45%; left: 75%; width: 180px; height: 180px; }
.b7 { top: 15%; left: 40%; width: 80px; height: 80px; opacity: 0.7; }
.b8 { top: 50%; left: 55%; width: 70px; height: 70px; opacity: 0.6; }
.b9 { top: 80%; left: 35%; width: 75px; height: 75px; opacity: 0.7; }

@keyframes shine {
    from { transform: translateX(-100%) rotate(45deg); }
    to { transform: translateX(200%) rotate(45deg); }
}