@charset "UTF-8";

/**
 * scrolltime.css 1.1.0
 * Author: hybrid.
 *
 * CSS scroll-timeline animations for modern browsers.
 * GSAP fallback loaded via scrolltime.js for unsupported browsers.
 *
 * Browser support
 * Chrome 115+, Edge 115+, Safari 17.5+ — full (view + scroll)
 * Firefox — partial (scroll only)
 *
 * Animation range syntax
 * entry X%   — element enters viewport at X% from bottom
 * exit X%    — element exits viewport at X% from top
 * cover X%   — element covers viewport at X%
 * contain X% — viewport contains element at X%
 *
 * Classes
 * .scrolltime-revealed  — fade + slide up on scroll into view
 * .scrolltime-parallax  — parallax on img within banners
 */

/**
* 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
*/



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */


/* ============================== 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%);
	}
}


/* ============================== TRANSITIONS ============================== */

.scrolltime-parallax img {
	transition:
		opacity var(--duration-fast) var(--ease);
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */


/* ============================== VIEW ============================== */

/* View-based animations — requires 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 — requires 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);
	}
}