/**
 * Hayder Voice — CSS Scroll-Driven Animations
 * All in @layer scroll-driven.
 * Respects prefers-reduced-motion.
 */

@layer scroll-driven {

	/* ============================================================
	 * HERO PARALLAX
	 * ============================================================ */

	@supports (animation-timeline: scroll()) {
		.hero__content {
			animation: hero-parallax linear both;
			animation-timeline: scroll(root block);
			animation-range: 0% 60%;
		}

		@keyframes hero-parallax {
			from { transform: translateY(0); opacity: 1; }
			to   { transform: translateY(40px); opacity: 0; }
		}

		/* Grain shift animation */
		.hero__grain {
			animation: grain-float linear both;
			animation-timeline: scroll(root block);
			animation-range: 0% 60%;
		}

		@keyframes grain-float {
			from { transform: translateY(0) scale(1); }
			to   { transform: translateY(-20px) scale(1.05); }
		}
	}

	/* ============================================================
	 * SECTION FADE-UP — View Timeline
	 * ============================================================ */

	@supports (animation-timeline: view()) {
		.recent-essays,
		.emotions-grid,
		.tales-slider,
		.newsletter-section,
		.featured-post,
		.related-posts,
		.archive-hero,
		.author-bio {
			animation: section-fade-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}

		@keyframes section-fade-up {
			from {
				opacity: 0;
				transform: translateY(32px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* Card stagger via view timeline */
		.post-card {
			animation: card-fade-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}

		@keyframes card-fade-up {
			from { opacity: 0; transform: translateY(24px); }
			to   { opacity: 1; transform: translateY(0); }
		}

		/* Card stagger delay via --item-index */
		.archive-grid__item,
		.recent-essays__grid > * {
			animation-delay: calc(var(--item-index, 0) * 60ms);
		}

		/* Emotion pill scale-in */
		.emotion-card {
			animation: pill-scale-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}

		@keyframes pill-scale-in {
			from { opacity: 0; transform: scale(0.9); }
			to   { opacity: 1; transform: scale(1); }
		}

		/* Stagger emotion pills */
		.emotions-grid__item {
			animation-delay: calc(var(--item-index, 0) * 30ms);
		}

		/* Clip-path reveal for featured post */
		.featured-post__image-wrap {
			animation: clip-reveal-x linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}

		@keyframes clip-reveal-x {
			from { clip-path: inset(0 100% 0 0); opacity: 0.5; }
			to   { clip-path: inset(0 0% 0 0); opacity: 1; }
		}

		/* Post hero fade */
		.post-hero__content {
			animation: hero-content-fade linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 50%;
		}

		@keyframes hero-content-fade {
			from { opacity: 0; transform: translateY(20px); }
			to   { opacity: 1; transform: translateY(0); }
		}

		/* Next post reveal */
		.next-post {
			animation: next-post-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}

		@keyframes next-post-reveal {
			from { opacity: 0; }
			to   { opacity: 1; }
		}
	}

	/* ============================================================
	 * READING PROGRESS (scroll-driven)
	 * ============================================================ */

	@supports (animation-timeline: scroll()) {
		.reading-progress__bar {
			animation: reading-progress-fill linear;
			animation-timeline: scroll(root block);
			animation-range: 0% 100%;
		}
	}

	/* ============================================================
	 * HEADER SCROLL BEHAVIOR (scroll-driven)
	 * ============================================================ */

	@supports (animation-timeline: scroll()) {
		@keyframes header-scroll-style {
			from {
				background-color: transparent;
				backdrop-filter: blur(0px);
				box-shadow: none;
			}
			to {
				background-color: oklch(8% 0.004 60 / 0.95);
				backdrop-filter: blur(20px);
				box-shadow: 0 1px 0 oklch(16% 0.006 60);
			}
		}

		.site-header {
			animation: header-scroll-style linear both;
			animation-timeline: scroll(root block);
			animation-range: 0px 80px;
		}
	}

	/* ============================================================
	 * PREFERS REDUCED MOTION — override everything
	 * ============================================================ */

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			animation-delay: 0ms !important;
		}

		.hero__content,
		.hero__grain,
		.recent-essays,
		.emotions-grid,
		.tales-slider,
		.newsletter-section,
		.featured-post,
		.related-posts,
		.archive-hero,
		.author-bio,
		.post-card,
		.emotion-card,
		.featured-post__image-wrap,
		.post-hero__content,
		.next-post,
		.reading-progress__bar,
		.site-header {
			animation: none !important;
			opacity: 1 !important;
			transform: none !important;
			clip-path: none !important;
		}
	}

} /* @layer scroll-driven */