/*
 * Motion & interaction system — Step 6.
 * Three reusable patterns: scroll-reveal, hover micro-interactions,
 * and a scroll-linked progress indicator (used by single.php in Step 10).
 * Everything here respects prefers-reduced-motion via the zeroed
 * duration/distance tokens in tokens.css.
 */

/* ---- Pattern 1: scroll-reveal ---- */
/* JS (assets/js/scroll-reveal.js) toggles .is-revealed via IntersectionObserver.
   No-JS fallback: content stays visible (starts visible, JS opts elements in). */
.reveal {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
	transition: opacity var(--duration-reveal) var(--ease-out),
		transform var(--duration-reveal) var(--ease-out);
}

.reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Staggered children: apply .reveal-stagger to a container, children get
   .reveal automatically with incremental delay via inline --reveal-i. */
.reveal-stagger > .reveal {
	transition-delay: calc(var(--reveal-i, 0) * 60ms);
}

.js-disabled .reveal,
.no-js .reveal {
	opacity: 1;
	transform: none;
}

/* ---- Pattern 2: hover micro-interactions ---- */
.hover-lift {
	transition: transform var(--duration-normal) var(--ease-spring),
		box-shadow var(--duration-normal) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.hover-lift:hover,
.hover-lift:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-border-strong);
}

/* ---- Pattern 3: scroll-linked reading progress bar ---- */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
	z-index: 1100;
	transition: width var(--duration-fast) linear;
}

@media (prefers-reduced-motion: reduce) {
	.reading-progress {
		transition: none;
	}
}

/* ---- Small utility keyframes reused across components ---- */
@keyframes pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 199, 0.25); }
	50% { box-shadow: 0 0 0 6px rgba(0, 229, 199, 0); }
}

.pulse-glow {
	animation: pulse-glow 2.4s var(--ease-standard) infinite;
}

@keyframes fade-in-up {
	from { opacity: 0; transform: translateY(var(--reveal-distance)); }
	to { opacity: 1; transform: none; }
}

.animate-fade-in-up {
	animation: fade-in-up var(--duration-reveal) var(--ease-out) both;
}