/* =========================================
   NUCLEAR LAYOUT FIXES
   (Prevents horizontal scrolling & disappearing dots)
   ========================================= */

/* 1. Global Box Sizing Reset 
   This ensures padding doesn't make elements wider than 100% */
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 2. Force Body Containment 
   This cuts off anything that tries to stick out the right side */
html, body {
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}

@supports not (overflow: clip) {
    body { overflow-x: hidden; }
}

/* 3. Protect the Navigation Dots 
   This forces them to sit on top of everything (Z-Index 9999) 
   and stick to the GLASS screen, not the page content. */
.scroll-progress {
    position: fixed !important;
    right: 12px !important;    /* Safe distance from edge on mobile */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999 !important;  /* Sit on top of images/video */
    width: 4px;                /* Ensure it has width */
}

/* 4. Fix Image/Section Blowouts 
   Prevents large images or containers from pushing the page width out */
img, video, iframe, .panel, section {
    max-width: 100%;
}

/* 5. Mobile Adjustments */
@media (max-width: 768px) {
    .scroll-progress {
        right: 8px !important; /* Tighter to edge on small screens */
    }
    
    /* Ensure dots are centered on the line */
    .scroll-progress__dot {
        margin-left: -4px !important;
    }
}