/* --- 1. BASE --- */
.body-orto {
    margin: 0;
    padding: 0;
    background: #000; /* Nero assoluto di base */
    overflow: hidden; /* Evita lo scroll durante la ricerca col binocolo */
    font-family: 'Quicksand', sans-serif;
}

#orto-magico {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: url('../img/orto/sfondo-terreno-notte.png') no-repeat center center;
    background-size: cover;
    cursor: none; 
}

/* --- 2. IL BINOCOLO (LENTE) --- */
#binocolo-cursor {
    position: absolute;
    width: 250px; /* Leggermente ridotto per adattarsi meglio a vari schermi */
    height: 250px;
    border: 10px solid #2e1a0e;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    /* L'ombra gigante crea il buio pesto attorno alla lente */
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.95); 
    
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: top, left;
}

/* --- 3. AREA RACCOLTO E INGREDIENTI --- */
.area-raccolto {
    position: relative;
    width: 100%;
    height: 100%;
}

.ingrediente-spia {
    position: absolute; /* Li sparpagliamo nel buio */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: auto;
}

.asset-orto {
    width: 120px; /* Dimensione media */
    filter: brightness(0) blur(15px); /* Completamente invisibili nel buio */
    transition: filter 0.3s ease;
}

/* Quando la lente passa sopra (gestito via JS aggiungendo una classe o via coordinate) */
/* Se il tuo JS cambia il filtro quando la lente è vicina: */
.ingrediente-visibile .asset-orto {
    filter: brightness(1) blur(0);
}

/* --- 4. FIX RESPONSIVE (IL SEGRETO) --- */

/* Su Desktop: sparpagliati a mano (esempi di posizioni) */
.ingrediente-spia:nth-child(1) { top: 20%; left: 15%; }
.ingrediente-spia:nth-child(2) { top: 60%; left: 25%; }
.ingrediente-spia:nth-child(3) { top: 30%; left: 70%; }
.ingrediente-spia:nth-child(4) { top: 75%; left: 80%; }
.ingrediente-spia:nth-child(5) { top: 15%; left: 45%; }

/* Su Mobile: evitiamo che finiscano troppo ai bordi */
@media (max-width: 768px) {
    #binocolo-cursor {
        width: 180px; /* Lente più piccola */
        height: 180px;
        box-shadow: 0 0 0 1500px rgba(0, 0, 0, 0.95);
        cursor: auto; /* Su mobile il tocco deve funzionare */
    }

    .asset-orto {
        width: 90px; /* Verdure più piccole */
    }

    /* Riposizioniamo le verdure in un'area più centrale per il pollice */
    .ingrediente-spia:nth-child(1) { top: 25%; left: 20%; }
    .ingrediente-spia:nth-child(2) { top: 50%; left: 30%; }
    .ingrediente-spia:nth-child(3) { top: 35%; left: 60%; }
    .ingrediente-spia:nth-child(4) { top: 65%; left: 70%; }
    .ingrediente-spia:nth-child(5) { top: 20%; left: 55%; }
}

/* --- 5. ANIMAZIONE BALZO --- */
.balzo .asset-orto {
    animation: balzo-terra 0.6s ease-out;
}

@keyframes balzo-terra {
    0% { transform: translateY(0); }
    40% { transform: translateY(-70px) rotate(10deg); }
    100% { transform: translateY(0); }
}
@media (max-width: 768px) {
    #binocolo-cursor {
        display: none; /* NASCONDI IL BINOCOLO SU MOBILE */
    }

    #orto-magico {
        cursor: auto; /* Ripristina il cursore standard */
    }
    
    .asset-orto {
        filter: brightness(1) blur(0) !important; /* Rendi tutto visibile su mobile */
    }
}