/* 1. Ensure padding and borders do not add to element widths */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Prevent horizontal scrolling on the root container */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* 3. Make all media scale down automatically to fit screen width */
img, video, iframe, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* 4. Convert fixed-width containers to fluid maximum widths */
.container, main, table, div {
    max-width: 100%;
}
/* 1. Prevent accidental horizontal scroll drift & enable native smooth scrolling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
    /* Disables pull-to-refresh & overscroll bounce effects where undesirable */
    overscroll-behavior-y: contain; 
    /* Fixes webkit tap delay & unwanted highlight artifacts */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 2. Full-height vertical sections (for snap-scrolling or story feeds) */
.vertical-section {
    min-height: 100vh;
    /* Accounts for mobile browser dynamic URL bars (iOS Safari / Android Chrome) */
    min-height: 100dvh; 
    width: 100%;
}

/* 3. Ensure media elements fit perfectly inside vertical flows */
img, video, canvas, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}
/* 1. Prevent accidental horizontal scroll drift & enable native smooth scrolling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}

body {
    max-width: 100vw;
    overflow-x: hidden;
    /* Disables pull-to-refresh & overscroll bounce effects where undesirable */
    overscroll-behavior-y: contain; 
    /* Fixes webkit tap delay & unwanted highlight artifacts */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* 2. Full-height vertical sections (for snap-scrolling or story feeds) */
.vertical-section {
    min-height: 100vh;
    /* Accounts for mobile browser dynamic URL bars (iOS Safari / Android Chrome) */
    min-height: 100dvh; 
    width: 100%;
}

/* 3. Ensure media elements fit perfectly inside vertical flows */
img, video, canvas, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Parent Container */
.snap-scroll-container {
    height: 100dvh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* Options: mandatory | proximity */
    scroll-behavior: smooth;
}

/* Child Sections */
.snap-scroll-child {
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* Forces single section scroll per gesture */
}
// Performant lazy loading & scroll-triggered animations
const observerOptions = {
    root: null, // Default: viewport
    rootMargin: '0px 0px -50px 0px', // Trigger slightly before element enters view
    threshold: 0.1 // 10% visible
};

const handleScrollIntersection = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // Add visible class for animation or trigger image loading
            entry.target.classList.add('in-view');
            
            // Unobserve if trigger is one-time only
            observer.unobserve(entry.target);
        }
    });
};

const observer = new IntersectionObserver(handleScrollIntersection, observerOptions);

// Attach observer to target sections
document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
.long-vertical-card {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px; /* Estimated height of element before render */
}