/* Basic reset for the page */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

/* The main container that holds both the image and the scroll sections.
  It needs to be relative to correctly position the sticky element.
*/
.hero-container {
    position: relative;
    /* Height is 300vh: 100vh for each of the three image sections */
    height: 300vh; 
}

/*
  This is the core element. It sticks to the top of the viewport
  and holds our transitioning background image.
*/
.sticky-hero-image {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    /* --- IMAGE SETUP --- */
    /* Replace 'vlcsnap-2025-07-12-10h04m06s986.jpg' with the path to your image */
    background-image: url('vlcsnap-2025-07-12-10h04m06s986.png');
    
    /* Make the image cover the full height, but be 300% wide */
    background-size: 300% 100%;
    
    /* Center the image vertically */
    background-position: 0% 50%;
    
    /* Add a smooth transition for when the background position changes */
    transition: background-position 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* This container enables the scroll snapping.
  It's positioned absolutely to sit on top of the hero container.
*/
.scroll-snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Tells the browser to snap on the Y-axis (vertical).
      'mandatory' means it will always snap to a point.
    */
    scroll-snap-type: y mandatory;
    
    /* Enables scrolling within this container */
    overflow-y: scroll;
}

/* Each of the three invisible sections that trigger a snap.
  Each one is the full height of the viewport.
*/
.scroll-section {
    height: 100vh;
    width: 100%;
    
    /* Defines where the snapping should align */
    scroll-snap-align: start;
}

/* The main content area that appears after the hero scrolling is done.
*/
.main-content {
    padding: 40px 20px;
    text-align: center;
    background-color: white;
}