@charset "UTF-8";

/**
 * scrolltime.css 1.0.0
 *
 * CSS scroll-timeline animations — native browser implementation.
 * For unsupported browsers, scrolltime.js loads a GSAP fallback.
 *
 * BROWSER SUPPORT
 * Chrome 115+  — full support (view + scroll)
 * Safari 17.5+ — full support (view + scroll)
 * Firefox      — partial (scroll only, view not supported)
 * Edge 115+    — full support (view + scroll)
 *
 * 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%
 *
 * 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
 *
 * CLASSES
 * .scrolltime-revealed  — fade-in + translateY on scroll into view
 * .scrolltime-parallax  — parallax effect on img inside element
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */

/**
 * Override these in your project CSS to customize animations per context.
 * All variables are optional — defaults are defined here.
 */

:root {
	--scrolltime-reveal-from-opacity: .25;
	--scrolltime-reveal-from-y: 25%;
	--scrolltime-reveal-range-start: cover -25%;
	--scrolltime-reveal-range-end: cover 25%;

	--scrolltime-parallax-to-y: 50%;
	--scrolltime-parallax-range-start: 0vh;
	--scrolltime-parallax-range-end: 100vh;
}


/* ============================================================ */
/* ==================== KEYFRAMES (SHARED) ==================== */
/* ============================================================ */

@keyframes scrolltime-reveal {
	from {
		opacity: var(--scrolltime-reveal-from-opacity);
		transform: translateY(var(--scrolltime-reveal-from-y));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scrolltime-parallax {
	from {
		transform: translateY(0%);
	}
	to {
		transform: translateY(var(--scrolltime-parallax-to-y));
	}
}


/* =========================================================== */
/* ==================== ANIMATIONS (CORE) ==================== */
/* =========================================================== */

/**
 * Core animation bindings — do not modify per project.
 * Override behavior via CSS variables in :root or scoped selectors.
 */


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

/**
 * View-based animations — triggered by element position in viewport.
 * @supports guard: only applies in browsers with view() support.
 */

@supports (animation-timeline: view()) {
	.scrolltime-revealed {
		animation: scrolltime-reveal ease-in-out both;
		animation-range: var(--scrolltime-reveal-range-start) var(--scrolltime-reveal-range-end);
		animation-timeline: view(block);
	}
}


/* ========== SCROLL ========== */

/**
 * Scroll-based animations — triggered by page scroll position.
 * @supports guard: only applies in browsers with scroll() support.
 */

@supports (animation-timeline: scroll(root block)) {
	.scrolltime-parallax img {
		animation: scrolltime-parallax linear both;
		animation-range: var(--scrolltime-parallax-range-start) var(--scrolltime-parallax-range-end);
		animation-timeline: scroll(root block);
	}
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */

/**
 * Project-specific overrides and additional scroll animations.
 * Use CSS variable overrides scoped to a selector when possible.
 *
 * Example — slower reveal on hero sections:
 * .hero .scrolltime-revealed {
 *     --scrolltime-reveal-range-start: cover -50%;
 *     --scrolltime-reveal-range-end: cover 10%;
 * }
 */