/* ==========================================================================================
	Antics GSAP animation library
	Antics Digital Marketing -- antics.com
	Revised 1.18.23 KW
========================================================================================== */

section {
    overflow: hidden;    
    position: relative; /* Required to handle pin sections */
}

/* Start hidden just in case they load onscreen */
.gsap-riseUp,
.gsap-fadeIn,
.gsap-zoomIn {
	opacity: 0;
}

/*-----------------------------------------------
    The sticky section. This controls the pinned element and
    the different content that appears inside of it 
------------------------------------------------*/
/* The gsap-stickAndDissolve div contains the div we'll pin (gsap-stickyBitsGroup),
    the individual gsap-stickybit items (that we dissolve between),
    and the gsap-trigger items used to control the timing of the transitions. */
.gsap-stickAndDissolve {
    position: relative;
    min-height: 100vh;
}
/* The content we'll animate inside the pinned container */
/* We'll position the follow-on content on top of the first, but set their opacity to zero */
.gsap-stickyContentGroup {
    position: relative;    
    z-index: 100;
}
.gsap-stickyContent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;    
}
/* Only the first one starts visible */
.gsap-stickyContent:not(:first-of-type) {
    opacity: 0;    
}

/* The trigger elements are inserted by the animation javascript.
    We'll position the trigger elements absolute to the top of the 
    stickyOuter container so that they continue to scroll */
.gsap-triggerGroup {
    position: absolute;
    top: 0;
    height: 100%;    
    width: 5vw; /* Width of the tigger divs */
    z-index: 100;
}
/* To aid with debugging */
.gsap-trigger {
    border: 1px solid green; 
}

/*-----------------------------------------------
    The pinned panels -- the panels that "stick"
    to the top of the viewport and that are then 
    wiped off by the subsequent panels.
------------------------------------------------*/
.gsap-pinPanel {
    height: 100vh;
    overflow: hidden;
}
.gsap-pinPanel .container {
    height: 100%; /* Required if we want to center the content inside */
}

/** We'll treat the last panel differently. If we set the height to 1px and
    remove the content, we can make it appear that the next section wipes off the panel.
    Note: the :last-of-type selector doesn't seem to work here, maybe b/c of the animation **/
.gsap-lastpanel,
.gsap-lastpanel .container {
    height: auto;
}

/*-----------------------------------------------
    Parallax sections.
------------------------------------------------*/
section.gsap-parallax {
    position: relative;
    height: 100vh;    
    background-color: transparent; /* We need to see the bg div under the section */
}
.gsap-parallax .gsap-parallaxBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;     
}

/*-----------------------------------------------
	BG images that get swapped
------------------------------------------------*/
.gsap-swapBackground {    
    position: relative; /* Required to handle pin sections */
}

.gsap-startingBackground,
.gsap-endingBackground {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
	overflow: hidden;	
}
/* The div with the BG image we will fade in */
.gsap-endingBackground {
    z-index: 10;
    opacity: 0;
}
/* The div that gets covered up when we fade in the top one */
.gsap-startingBackground {
	z-index: 1;		    
}
/* The text and other content that appears in the foreground on top of the bg */
.gsap-backgroundContent {
	z-index: 100;
}
.gsap-backgroundContent,
.gsap-backgroundContent .container {
    position: relative;
}

/*-----------------------------------------------
	BG images that get scrolled
------------------------------------------------*/
.gsap-scrollBackgroundContainer {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.gsap-scrollBackgroundImageRight,
.gsap-scrollBackgroundImageLeft {
    position: absolute;
    height: 100%;
    width: 150vw;
    background-size: cover;
    z-index: 1;
}
.gsap-scrollBackgroundContent {
    position: relative;
    height: 100%;
    width: 100vw;
    z-index: 10;
}

/*-----------------------------------------------
	Zoom through foreground image
------------------------------------------------*/
.gsap-zoomThrough {
    position: relative;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
}
.gsap-zoomThroughBackground {
    height: 100%;
    opacity: 0;
}
.gsap-zoomThroughForeground {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    height: 100vh;
    min-height: 500px;
    width: 100%;

    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1);
}