@charset "UTF-8";

/**
* CSS scroll-timeline animations for modern browsers
* These match the config.js definitions for GSAP fallback

* Animation Range Syntax:
* - "entry X%": When element enters viewport at X% from bottom
* - "exit X%": When element exits viewport at X% from top
* - "cover X%": When element covers viewport at X%
* - "contain X%": When viewport contains element at X%
* 
* Examples:
* - entry 0% = element bottom touches viewport bottom
* - entry 100% = element top touches viewport bottom
* - cover 0% = element top touches viewport top
* - cover 100% = element bottom touches viewport top
* 
* For scroll():
* - "0vh 100vh" = from page top to 100vh scroll distance
* - Start/end positions relative to scroll container
*/

/**
* Browser Support:
* - Chrome 115+: Full support (view + scroll)
* - Safari 17.5+: Full support (view + scroll)
* - Firefox: Partial (scroll only, view not working yet)
* - Edge 115+: Full support (view + scroll)
* 
* For unsupported browsers, scrolltime.js loads GSAP fallback
*/

/*******************************/
/*******************************/
/********** KEYFRAMES **********/
/*******************************/
/*******************************/

@keyframes reveal {
	from {
		opacity: .25;
		transform: translateY(25%);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes banner-reveal {
	from {
		transform: translateY(0%);
	}
	to {
		transform: translateY(50%);
	}
}

/********************************/
/********************************/
/********** ANIMATIONS **********/
/********************************/
/********************************/

/**************************/
/********** VIEW **********/
/**************************/

/**
View-based animations (element position in viewport)
Only applies in browsers that support animation-timeline: view()
**/

@supports (animation-timeline: view()) {
	.scrolltime-revealed {
		/*
		animation: reveal 1ms ease-in-out both;
		animation-range: entry 12.5% cover 25%;
		*/
		animation: reveal ease-in-out both;
		animation-range: cover -25% cover 25%;
		animation-timeline: view(block);
	}
}

/****************************/
/********** SCROLL **********/
/****************************/

/**
Scroll-based animations (page scroll position)
Only applies in browsers that support animation-timeline: scroll()
**/

@supports (animation-timeline: scroll(root block)) {
	.scrolltime-parallax img {
		animation: banner-reveal linear both;
		animation-range: 0vh 100vh;
		animation-timeline: scroll(root block);
	}
}