/* --- CONFIGURAZIONE CORE --- */
:root {
    --color-dark-navy: #1e293b;
    --color-gray-text: #475569;
    --bg-main: #f8fafc;
    --transition-apple: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- CONTENITORE PRINCIPALE --- */
.scene {
    position: relative;
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    padding: 120px 0 180px 0;
    margin: 0 auto;
    perspective: 1500px;
}

.level-container {
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease;
}

/* --- LA CARD EFFETTO VETRO --- */
.iso-card {
    position: relative;
    width: 260px;
    height: 360px;
    border-radius: 0;
    transform: rotateX(55deg) rotateZ(-45deg);
    transition: var(--transition-apple);
    z-index: 2;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        -10px 10px 30px rgba(0, 0, 0, 0.05),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.iso-card:hover {
    transform: rotateX(55deg) rotateZ(-45deg) translateZ(40px);
    box-shadow: -40px 40px 80px rgba(0, 0, 0, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
}

/* --- INFO & TIPOGRAFIA --- */
.info {
    position: absolute;
    width: 440px;
    display: flex;
    align-items: center;
    z-index: 5;
}

.line {
    height: 2.5px;
    flex-grow: 1;
    border-radius: 2px;
}

.line::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: -4px;
    background: inherit;
}

.text b {
    display: block;
    color: var(--color-dark-navy);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* --- COLORI SPECIFICATI (Aggiornati) --- */

/* 1. OUTDOOR */
.level-container:nth-child(1) .iso-card {
    background: linear-gradient(135deg, rgba(212, 235, 208, 0.8), rgba(163, 207, 187, 0.8));
}
.level-container:nth-child(1) .line {
    background: #1e293b;
}

/* 2. COWORKING (Colori Screenshot) */
.level-container:nth-child(2) .iso-card {
    background: #fff;
}
.level-container:nth-child(2) .line {
    background: #1e293b;
}

/* 3. COLIVING (Colori Screenshot) */
.level-container:nth-child(3) .iso-card {
    background: #8bc1d1;
}
.level-container:nth-child(3) .line {
    background: #1e293b;
}

/* 4. TECHNACY (Il più scuro - Screenshot) */
.level-container:nth-child(4) .iso-card {
    background: #1d2a44;
}
.level-container:nth-child(4) .line {
    background: #1d2a44;
}
.level-container:nth-child(4) .text b {
    color: #1d2a44;
}

/* 5. ROOFTOP */
.level-container:nth-child(5) .iso-card {
    background: linear-gradient(135deg, rgba(207, 250, 254, 0.8), rgba(34, 211, 238, 0.8));
}
.level-container:nth-child(5) .line {
    background: #1e293b;
}

/* --- POSIZIONAMENTO DESKTOP --- */
.level-container:nth-child(odd) .info {
    left: 70%;
    text-align: left;
    top: 100px;
}
.level-container:nth-child(odd) .line::after {
    left: 0;
}
.level-container:nth-child(odd) .text {
    padding-left: 25px;
}

.level-container:nth-child(even) .info {
    right: 72%;
    flex-direction: row-reverse;
    text-align: right;
}
.level-container:nth-child(even) .line::after {
    right: 0;
}
.level-container:nth-child(even) .text {
    padding-right: 25px;
}

/* --- EFFETTO HOVER FOCUS --- */
.scene:has(.iso-card:hover) .level-container {
    opacity: 0.3;
}
.scene .level-container:has(.iso-card:hover) {
    opacity: 1;
}

/* --- FIX MOBILE (Anti-Scroll & Layout) --- */
@media (max-width: 992px) {
    .scene {
        padding: 60px 15px;
        perspective: none;
        overflow: hidden; /* Sicurezza extra */
    }

    .level-container {
        height: auto;
        margin-bottom: 80px;
        flex-direction: column !important;
    }

    .iso-card {
        width: 220px;
        height: 160px;
        transform: rotateX(45deg) rotateZ(-35deg) !important;
        margin-bottom: 30px;
    }

    .info {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .line {
        width: 2px;
        height: 40px;
        margin-bottom: 15px;
        flex-grow: 0;
        background: #cbd5e1 !important; /* Colore neutro per la linea verticale */
    }

    .line::after {
        top: -5px;
        left: 50% !important;
        transform: translateX(-50%);
    }

    .text {
        padding: 0 !important;
        max-width: 90%;
    }

    .scene:has(.iso-card:hover) .level-container {
        opacity: 1; /* Disattiva fade su mobile per facilità d'uso */
    }
}

.building-levels {
    background: white;
}

.button-wrap.negative > a,
.button-wrap.negative > a:hover {
    background: #1c2a48 !important;
    color: white !important;
    text-decoration: none;
}

/* Linee: più sottili e visibili */
.scene .line {
    height: 1px; /* Sottile */
    background-color: rgba(255, 255, 255, 0.8); /* Più visibile (bianco intenso) */
    width: 100px; /* Regola in base al tuo layout */
}

/* Rimoziome del pallino finale (after) */
.scene .line::after {
    display: none !important;
    content: none !important;
}

/* Transizione Pulsante "Scopri" */
.btn-light,
.btn-primary {
    transition: all 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    padding: 4px 8px;
    gap: 6px;
}

/* Gestione del testo interno */
.btn-text {
    font-size: 0.85rem;
    font-weight: normal;
}

.btn-primary:hover .btn-text {
    display: inline-block;
}

.livelli-text .stat-row {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    justify-content: center;
}

.stat-box {
    text-align: center;
}

.stat-box .num {
    font-size: 3rem;
    font-weight: 700;
    color: #5ab0c5;
    line-height: 1;
}

.stat-box .lbl {
    font-size: 1.25rem;
    color: #555;
    margin-top: 0.3rem;
}

.livelli-text .stat-row {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    /* Permette agli elementi di andare a capo se non c'è spazio */
    flex-wrap: wrap; 
}

/* Quando lo schermo è più piccolo di 768px (standard mobile) */
@media (max-width: 768px) {
    .livelli-text .stat-row > * {
        /* Forza ogni elemento interno a occupare il 100% o il 50% */
        flex: 1 1 calc(50% - 2rem); 
    }
}