/* --- 1. THE STRUCTURAL CONTAINER --- */
.services-xray {
    position: relative;
    padding: 80px 8% 60px 8%;
    /* No massive height needed, but ensure enough scroll distance */
    min-height: 150vh; 
}

.xray-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Keeps the nav starting at the top */
    position: relative;
    width: 100%;
}

/* --- 2. TYPOGRAPHY SYNC --- */
.xray-header {
    margin-bottom: 40px; /* Reduced gap to first category */
}

.xray-header h2 {
    font-size: clamp(1.8rem, 3.8vw, 3.2rem) !important; /* Balanced scale */
    line-height: 1.0;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

/* --- 3. THE INTERACTIVE INDEX --- */
/* Ensure text is on top of the fixed building background if needed */
.services-nav {
    position: relative;
    z-index: 10;
    width: 50%;
}

.nav-item {
    padding: 35px 0;
    border-bottom: 1px dashed rgba(0, 71, 171, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mod-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #0047AB;
    letter-spacing: 4px;
    display: block;
    margin-bottom: 10px;
}

.nav-item h3 {
    font-size: clamp(1.15rem, 2.5vw, 2.1rem) !important;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.2); /* "Off" State */
    margin: 10px 0;
    transition: 0.4s;
}

.nav-item p {
    max-height: 0;
    overflow: hidden;
    color: rgba(0, 212, 255, 0.6);
    font-size: 14px;
    line-height: 1.6;
    transition: max-height 0.4s ease, margin-top 0.4s ease;
}

/* Hover/Active Reveal */
/* Remove Hover Highlight from Nav Items */
.nav-item:hover h3 {
    color: rgba(255, 255, 255, 0.2); /* Keep it dim like 'Off' state */
    padding-left: 0; /* No shift on hover */
    text-shadow: none;
}
/* Only the .active class (from Click or Scroll) highlights the text */
.nav-item.active h3 {
    color: #fff !important;
    padding-left: 20px !important;
    text-shadow: 0 0 25px rgba(0, 71, 171, 0.6) !important;
}

.nav-item.active p {
    max-height: 120px !important;
    margin-top: 15px !important;
}


/* THE CONTAINER FOR THE BUILDING */
.xray-fixed-wrapper {
    position: fixed; /* Lock to the screen */
    top: 0;
    right: 8%; /* Match your 8% margin */
    width: 40%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center; /* PERFECT VERTICAL CENTER */
    pointer-events: none;
    z-index: 5;
    
    /* Initially hidden */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    will-change: transform, opacity;
    transform: translateZ(0); /* Triggers the phone's Graphics Chip */
    backface-visibility: hidden;
}
/* --- 4. THE VIEWPORT (The Visual Heart) --- */
/* THE VIEWPORT ENGINE */
/* THE CENTERING ENGINE */
/* THE CENTERING ENGINE */


/* Show building only when inside the section zone */
/* Show effect when section is active */
.services-xray.show-building .xray-fixed-wrapper {
    opacity: 1;
    visibility: visible;
}
/* Hard hide when we are definitely out of the section */
.services-xray:not(.show-building) .xray-fixed-wrapper {
    display: none; 
}

#building-xray {
    width: auto;      /* Change from 100% to auto to allow height to dictate size */
    height: 60%;    /* Force the SVG to respect the container's max-height */
    margin: 0 auto;  /* Keep it horizontally centered */
}
.building-display-unit {
    width: 60%;
    max-height: 30vh;
}
/* --- 5. X-RAY SERVICE LOGIC --- */
.xray-layer {
    display: none; /* This is the key optimization */
    transition: opacity 0.4s ease;
    opacity: 0;
}

/* Base Ghost State (Gray Blueprint) */
/* We keep only the skeleton 'alive' in memory at all times */
#structural-skeleton {
    display: block !important;
    opacity: 0.15;
    stroke: #bbbbbb;
}

/* --- CONSOLIDATED WAKE-UP LOGIC (Memory Optimization) --- */
#building-xray.active-soil #soil-strata, 
#building-xray.active-soil #foundation-system,
#building-xray.active-design #structural-skeleton,
#building-xray.active-design #steel-system,
#building-xray.active-design #foundation-system,
#building-xray.active-bim #bim-mesh,
#building-xray.active-audit #diagnostic-nodes,
#building-xray.active-ndt #ndt-scan,
#building-xray.active-thermal #thermal-surface,
#building-xray.active-supervision #structural-skeleton,
#building-xray.active-supervision #foundation-system,
#building-xray.active-supervision #soil-strata,
#building-xray.active-supervision #steel-system {
    display: block !important;
    opacity: 1 !important;
}
/* --- MOD_01: SOIL INVESTIGATION SPECIFICS --- */
#building-xray.active-soil #soil-strata, 
#building-xray.active-soil #foundation-system {
    stroke: #00d4ff;
    stroke-width: 1.5px;
}

/* --- MOD_02: STRUCTURAL DESIGN SPECIFICS --- */
#building-xray.active-design #structural-skeleton .main-columns path {
    stroke: #00d4ff !important;
    stroke-width: 2.5px !important;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.6));
}

#building-xray.active-design #structural-skeleton .slabs path {
    stroke: #ffffff !important;
    stroke-width: 0.8px !important;
    opacity: 0.4 !important;
}

#building-xray.active-design #steel-system {
    stroke-width: 3px !important;
    filter: drop-shadow(0 0 12px #00d4ff);
}

/* --- MOD_03 - MOD_05: ANIMATIONS --- */
.active-bim #bim-mesh { animation: nodeBlink 1.5s infinite alternate; }
.active-audit .pulse { animation: diagnosticPulse 1s infinite; }
.active-ndt #laser-line { animation: laserScan 2.5s infinite linear; }

/* --- MOD_06: THERMAL --- */
.active-thermal #thermal-surface { opacity: 0.8 !important; }

/* --- MOD_07: SUPERVISION SPECIFICS --- */
#building-xray.active-supervision #structural-skeleton path,
#building-xray.active-supervision #structural-skeleton line {
    stroke: #00d4ff !important;
    stroke-width: 2px !important;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.8));
}


/* --- 6. ANIMATIONS --- */
@keyframes diagnosticPulse {
    0% { r: 4; opacity: 1; }
    100% { r: 15; opacity: 0; }
}

@keyframes laserScan {
    0% { transform: translateY(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(400px); opacity: 0; }
}

@keyframes nodeBlink {
    from { filter: brightness(1); }
    to { filter: brightness(2) drop-shadow(0 0 5px #00ffff); }
}

/* --- 7. MOBILE ADAPTATION --- */
@media (max-width: 1024px) {
    .xray-flex-container { flex-direction: column; }
    .xray-viewport {
        position: relative;
        top: 0;
        transform: none;
        width: 100%;
        height: 400px;
        order: -1;
        margin-bottom: 50px;
    }
    .services-nav { width: 100%; }
}