/* Section 10 Scroll Animation Styles */
#residential {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100vh;
}

.section10-image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh; /* Ensure full viewport height */
    min-height: 500px;
}

.section10-img-1,
.section10-img-2,
.section10-img-3,
.section10-img-4 {
    transition: none; /* Disable default transitions for GSAP control */
    pointer-events: none;
    will-change: transform, opacity, left, top;
}

.section10-text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2rem;
    pointer-events: none; /* allow scroll interactions */
}

.section10-label-1,
.section10-label-2 {
    position: relative;
    width: 50%;
    max-width: 900px;
    pointer-events: auto; /* allow text selection */
    will-change: transform, opacity;
    padding-left: 5%;
}

/* Ensure proper stacking - small overlay above, then base, then later images */
.section10-img-1 { z-index: 1; }
.section10-img-2 { z-index: 3; }
.section10-img-3 { z-index: 2; }
.section10-img-4 { z-index: 4; }

/* Label positioning */
.section10-label-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: inherit;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #residential {
        min-height: auto;
    }
    
    .section10-image-container {
        height: 60vh;
        min-height: 300px;
    }
    
    .section10-text-container {
        position: static;
        height: auto;
        min-height: 40vh;
        /* padding: 2rem 1rem; */
        padding: 5px 20px;
    }
    
    /* On mobile, show final state without scroll animation */
    .section10-img-4 {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    
    .section10-img-1,
    .section10-img-2,
    .section10-img-3 {
        opacity: 0 !important;
    }
    
    .section10-label-2 {
        opacity: 1 !important;
        transform: translateX(0) !important;
        padding: 0;
    }
    
    .section10-label-1 {
        opacity: 1 !important;
    }
}

/* Click indicator styles */
.section10-click-indicator {
    pointer-events: none;
}

.section10-click-indicator > div {
    pointer-events: all;
}

.section10-click-indicator > div:hover {
    background: rgba(0,0,0,0.9) !important;
    transform: translateX(-50%) scale(1.05);
}

/* Section cursor change */
#residential.section10-animating { cursor: pointer; }
#residential.animation-complete { cursor: default; }

/* Force Section 10 images to match section height */
#residential .center-img.section10-img-1,
#residential .center-img.section10-img-2,
#residential .center-img.section10-img-3,
#residential .center-img.section10-img-4 {
    height: 100vh;
    width: auto;
    object-fit: cover;
    top: 50%;
}

/* Desktop: Mirror JS initial state to avoid flash before GSAP runs */
@media (min-width: 769px) {
  #residential .section10-img-1 {
    left: calc(50vw + 250px);
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  #residential .section10-img-2 {
    left: calc(50vw - 150px);
    opacity: 1;
    transform: translateY(-50%) scale(0.5);
  }
  #residential .section10-img-3 {
    left: 50vw;
    opacity: 0;
    transform: translateY(-50%) scale(1);
  }
  #residential .section10-img-4 {
    /* Mirror JS: start as a small overlay off the right, like img2 */
    left: calc(50vw - 150px);
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }

  /* Final state helper: when JS grows img4 to full screen */
  #residential .section10-img-4.section10-fullscreen {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
  }
  #residential .section10-label-1 {
    opacity: 1;
    transform: scaleX(0.9);
    transform-origin: left center;
  }
  #residential .section10-label-2 {
    opacity: 0;
    transform: scaleX(0.9);
    transform-origin: left center;
  }
}

/* Mobile: mirror JS simplified final state */
@media (max-width: 768px) {
  .section10-img-4 {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
  }
}