/* =========================================================================
   1. GLOBAL SYSTEM VARIABLES & PACING TRACK
   ========================================================================= */
:root {
  --scroll: 0;          /* Driven perfectly by your script (0 to 1) */
  --total-slides: 37;
}

/* Outer wrapper establishes the total scrolling track. */
.scroll-track-speed {
  position: absolute;
  
  /* Give the container a bit more scroll depth (e.g., 180vh) so that 
     after the animation finishes, there is track left for it to slide upwards */
  height: 250vh; /*  XXXXXXXthe height of the total animationXXXXXXXX */
	right: 0px; 
}

/* =========================================================================
   2. THE MOTION CONTAINER (Now configured as a Sticky Track Frame)
   ========================================================================= */
.deck-container {
  /* --- THE STICKY EXIT FIX ---
     Changing this from fixed to sticky locks it to the viewport initially, 
     then releases it to slide up with the page flow once the timeline finishes. */
  position: sticky;
  top: 50px;
  
  right: 9%;
  width: 580px;
  height: 1000px;
  overflow: hidden;

  /* Link the parent container directly to your global scroll property */
  animation: parentGlobalMotion 1s linear both paused;
  animation-delay: calc(var(--scroll) * -1s);

  /* Hardware rendering optimization layers for Chrome, Safari & Firefox */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: center center;
}

/* This animation twists the ENTIRE presentation box as one unit as you scroll */
@keyframes parentGlobalMotion {
  /* On page load (scroll is 0), the whole deck starts tilted and slightly larger */
  0% {
    transform: scale(1.1) rotate(3deg);
  }
  /* By the time you scroll a small fraction, it straightens out completely 
     and remains stable for the rest of the slide transitions */
	55% {
    	transform: scale(0.75) rotate(0deg);
  }
  70% {
    transform: scale(0.6) rotate(0deg);
  }
  100% {
    transform: scale(0.6) rotate(0deg);
  }
}


/*  MOBILE KEYFRAMES OVERRIDE */
@media (max-width: 999px) {
  /* You can completely redefine the motion path for phone screens right here! */
	  @keyframes parentGlobalMotion {
	  /* On page load (scroll is 0), the whole deck starts tilted and slightly larger */
	  0% {
		transform: scale(1.1) rotate(3deg);
	  }
	  /* By the time you scroll a small fraction, it straightens out completely 
		 and remains stable for the rest of the slide transitions */
		55% {
			transform: scale(1.1) rotate(0deg);
	  }
	  70% {
		transform: scale(1.1) rotate(0deg);
	  }
	  100% {
		transform: scale(1.1) rotate(0deg);
	  }
	}
}

/* =========================================================================
   3. SLIDE STRUCTURAL LAYOUT (Flat Frame Progression)
   ========================================================================= */
.slide {
  position: absolute;   /* Securely absolute to remain boxed within sticky limits */
  top: 0;
  left: 0;
  width: 100%;          
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Slide timeline distribution math */
  --slide-start: calc(var(--i) / var(--total-slides));
  --slide-duration: calc(1 / var(--total-slides));
  
  /* Map scroll progress to a localized timeline */
  --local-progress: clamp(0, (var(--scroll) - var(--slide-start)) / var(--slide-duration), 1);
  
  /* Structural Visibility Calculations */
  --is-active: clamp(0, (var(--scroll) - var(--slide-start) + 0.0001) * 99999, 1);
  --is-finished: clamp(0, (var(--local-progress) - 0.999) * 99999, 1);
  --force-first-slide: clamp(0, 1 - (var(--i) * 99999) - (var(--scroll) * 99999), 1);
  --normal-visibility: calc(var(--is-active) - var(--is-finished));
}

/* --- LEAVE SLIDE 37 RUNNING FOREVER --- */
.slide {
  /* Modify opacity calculation so that slide 37 (--i: 36) remains visible 
     at opacity 1 even when the scrollbar crosses over the 100% finish line. */
  opacity: calc(
    clamp(0, calc(var(--normal-visibility) + var(--force-first-slide)), 1) + 
    clamp(0, calc(var(--i) - 35), 1) * var(--is-finished)
  );
  
  pointer-events: calc((var(--normal-visibility) + var(--force-first-slide)) <= 0 ? none : auto);
}

/* =========================================================================
   4. IMAGE BASELINE PROPERTIES
   ========================================================================= */
.go-entry2-img1 {
  display: block;
  max-width: 100%;
  height: auto;
}





/* =========================================================================
   CUSTOM FOR SCREEN SIZES
   ========================================================================= */

@media screen and (max-width: 1500px) {
	.scroll-track-speed {
		right: 0px; 
	}
	.deck-container {
	  top: 50px;
	  right: 9%;
	  width: 500px;
	  height: 1000px;
	}
}

@media screen and (max-width: 1500px) {
	.scroll-track-speed {
		right: 50px; 
		height: 250vh;
	}
	.deck-container {
	  width: 500px;
	}
}
@media screen and (max-width: 1200px) {
	
	.deck-container {
	  width: 450px;
	  height: 770px;
	}
}



@media screen and (max-width: 1300px) and (min-width: 1000px) and (orientation: portrait) {
		.scroll-track-speed {
		height: 190vh;
	}
}






/*------------------------------------------------------------------------------*/

@media screen and (min-width: 1000px) {
    .go-entry1 img {
        width: 567px;
    }
	.go-entry1 {
        padding-top: 10vh;
		padding-bottom: 36vh;
    }
}

@media screen and (max-width: 999px) {
    .go-entry1 {
        padding-top: 60px;
        text-align: center;
        float: none;
        width: 100% !important;
    }
	 .go-entry2 {
        position: relative;
        height: 510px;
        float: none;
        width: 100% !important;
    }
	.go-home-1000 .column {
        float: none;
        width: 100% !important;
    }
}









/* MOBILE
==============================================================================================================
==============================================================================================================*/

@media (max-width: 999px) {
  	.scroll-track-speed {
		right: auto;
        height: 30vh;
        left: auto;
        width: calc(100% - 40px);
	}
	.deck-container {
	  width: 250px;
        height: 592px;
        right: auto;
        left: auto;
        margin: 0px auto;
	}



/*



@media screen and (max-width: 999px) {
	.go-home-1000 .column {
		float: none;
		width: 100% !important;	
	}
	.go-entry1 {
		padding-top: 60px;
		text-align: center;
		float: none;
		width: 100% !important;
	}
	.go-entry2 {
		position: relative;
		height: 510px;	
		float: none;
		width: 100% !important;
	}
	
	
	.go-entry2-img2, 
	.go-entry2-img3,	

	.go-entry2-img5, 
	.go-entry2-img6, 

	.go-entry2-img8, 
	.go-entry2-img9, 

	.go-entry2-img11, 
	.go-entry2-img12,

	.go-entry2-img14, 
	.go-entry2-img15,
	

	
	.go-entry2-img17, 
	.go-entry2-img18,
	

	
	.go-entry2-img20, 
	.go-entry2-img21,
	

	
	.go-entry2-img23, 
	.go-entry2-img24, 
	

	
	.go-entry2-img26, 
	.go-entry2-img27, 
	
	.go-entry2-img28, 
	
	.go-entry2-img34, 
	.go-entry2-img35, 
	.go-entry2-img36,
	.go-entry2-img37
	
	{
		display: none !important;
	}
	
	

	
	.go-entry2-img1,
	.go-entry2-img4,
	.go-entry2-img7,
	.go-entry2-img10,
	.go-entry2-img13,
	.go-entry2-img16,
	.go-entry2-img19,
	.go-entry2-img22,
	.go-entry2-img25,
	.go-entry2-img29,
	.go-entry2-img30,
	.go-entry2-img31,
	.go-entry2-img32,
	.go-entry2-img33
	{
		height: 600px;
		margin-bottom: -33px;
		position: absolute;
		left: calc(50% - 180px);
		top: 0px;
	}
	.go-entry2-img1 {
		opacity: 1;
		animation: go-anim-mob1 ease-in-out;
		animation-timeline: view(00px 00px);	
	}
	.go-entry2-img4 {
		opacity: 1;
		animation: go-anim-mob2 ease-in-out;
		animation-timeline: view(00px 00px);	
	}
	.go-entry2-img7 {
		opacity: 1;
		animation: go-anim-mob3 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img10 {
		opacity: 1;
		animation: go-anim-mob4 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img13 {
		opacity: 0;
		animation: go-anim-mob5 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img16 {
		opacity: 0;
		animation: go-anim-mob6 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img19 {
		opacity: 0;
		animation: go-anim-mob7 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img22 {
		opacity: 0;
		animation: go-anim-mob8 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img25 {
		opacity: 0;
		animation: go-anim-mob9 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img29 {
		opacity: 0;
		animation: go-anim-mob10 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img30 {
		opacity: 0;
		animation: go-anim-mob11 ease-in-out;
		animation-timeline: view(00px 00px);
	}	
	.go-entry2-img31 {
		opacity: 0;
		animation: go-anim-mob12 ease-in-out;
		animation-timeline: view(00px 00px);
	}	
	.go-entry2-img32 {
		opacity: 0;
		animation: go-anim-mob13 ease-in-out;
		animation-timeline: view(00px 00px);
	}
	.go-entry2-img33 {
		opacity: 0;
		animation: go-anim-mob14 ease-in-out;
		animation-timeline: view(00px 00px);
	}
}


@media screen and (max-width: 719px) {
	.go-entry2-img1,
	.go-entry2-img4,
	.go-entry2-img7,
	.go-entry2-img10,
	.go-entry2-img13,
	.go-entry2-img16,
	.go-entry2-img19,
	.go-entry2-img22,
	.go-entry2-img25,
	.go-entry2-img29,
	.go-entry2-img30,
	.go-entry2-img31,
	.go-entry2-img32,
	.go-entry2-img33
	{
		height: 400px;
		margin-bottom: -33px;
		position: absolute;
		left: calc(50% - 118px);
		top: 0px;
	}
		.go-entry2 {
		position: relative;
		height: 400px;	
		float: none;
		width: 100% !important;
	}
}






@keyframes go-anim-mob1 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 1;
  }
30%		 {opacity: 1;}
30.10%	 {opacity: 0;}


  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 0;
  }
}

@keyframes go-anim-mob2 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
30.00%	{ opacity: 0;}
30.10%	{ opacity: 1;}
31%		{ opacity: 1;}
31.1%	{ opacity: 0;}
	
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 0;
  }
}

@keyframes go-anim-mob3 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	31.00%	{ opacity: 0;}
	31.05%	{ opacity: 1;}
	32%		{ opacity: 1;}
	32.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 0;
  }
}

@keyframes go-anim-mob4 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	32.00%	{ opacity: 0;}
	32.05%	{ opacity: 1;}
	33%		{ opacity: 1;}
	33.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 0;
  }
}

@keyframes go-anim-mob5 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	33.00%	{ opacity: 0;}
	33.05%	{ opacity: 1;}
	34%		{ opacity: 1;}
	34.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob6 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	34.00%	{ opacity: 0;}
	34.05%	{ opacity: 1;}
	35%		{ opacity: 1;}
	35.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob7 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	35.00%	{ opacity: 0;}
	35.05%	{ opacity: 1;}
	36%		{ opacity: 1;}
	36.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob8 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	36.00%	{ opacity: 0;}
	36.05%	{ opacity: 1;}
	37%		{ opacity: 1;}
	37.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob9 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	37.00%	{ opacity: 0;}
	37.05%	{ opacity: 1;}
	38%		{ opacity: 1;}
	38.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob10 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	38.00%	{ opacity: 0;}
	38.05%	{ opacity: 1;}
	39%		{ opacity: 1;}
	39.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob11 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	39.00%	{ opacity: 0;}
	39.05%	{ opacity: 1;}
	40%		{ opacity: 1;}
	40.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob12 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	40.00%	{ opacity: 0;}
	40.05%	{ opacity: 1;}
	41%		{ opacity: 1;}
	41.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob13 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	41.00%	{ opacity: 0;}
	41.05%	{ opacity: 1;}
	42%		{ opacity: 1;}
	42.1%	{ opacity: 0;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}

@keyframes go-anim-mob14 {
	0% {
	-webkit-transform: rotate3d(0, 0, 1, 4deg);
    transform: rotate3d(0, 0, 1, 4deg);
	opacity: 0;
  }
	42.00%	{ opacity: 0;}
	42.05%	{ opacity: 1;}
	43%		{ opacity: 1;}
	43.1%	{ opacity: 1;}
	
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
	100% {
	opacity: 1;
  }
	
}