/* ============================================================
	ANIMATIONS.CSS
	Keyframe definitions, scroll-reveal classes, and decorative
	motion utilities. Depends on tokens in base.css.
	============================================================ */


/* ── KEYFRAMES ── */

/* Gentle vertical float — used on the app tour mockup */
@keyframes float-vertical {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-8px); }
}

/* Pulsing opacity — used on status dots (nav dot, footer dot) */
@keyframes pulse-opacity {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

/* Subtle glow pulse — used on signal/status indicator dots */
@keyframes pulse-glow {
	0%, 100% { box-shadow: 0 0 6px rgba(1, 85, 1, 0.4); }
	50%       { box-shadow: 0 0 14px rgba(1, 85, 1, 0.75); }
}

/* Tour caption fade — used when switching tour slides */
@keyframes fade-in-up-quick {
	from {
		opacity:    0;
		transform: translateY(6px);
	}
	to {
		opacity:   1;
		transform: translateY(0);
	}
}

/* ── SCROLL REVEAL ── */
/* Elements start hidden and animate in when .is-visible is added by
	scroll-reveal.js via IntersectionObserver */

.reveal-on-scroll {
	opacity:   0;
	transform: translateY(22px);
	transition:
		opacity   var(--transition-slow),
		transform var(--transition-slow);
}

.reveal-on-scroll.is-visible {
	opacity:   1;
	transform: translateY(0);
}

/* Staggered children — add to a parent to delay each direct child */
.reveal-stagger > .reveal-on-scroll:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal-on-scroll:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > .reveal-on-scroll:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > .reveal-on-scroll:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > .reveal-on-scroll:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger > .reveal-on-scroll:nth-child(6) { transition-delay: 400ms; }

.reveal-stagger > .reveal-on-scroll.is-visible {
	transition-delay: 0ms;
}

/* ── DECORATIVE MOTION UTILITIES ── */

.animate-pulse-opacity {
	animation: pulse-opacity 2.5s ease-in-out infinite;
}

.animate-pulse-glow {
	animation: pulse-glow 2s ease-in-out infinite;
}


/* ── REDUCED MOTION ── */
/* Respects user OS accessibility setting */
@media (prefers-reduced-motion: reduce) {
	.reveal-on-scroll {
		opacity:    1;
		transform:  none;
		transition: none;
	}

	.animate-pulse-opacity,
	.animate-pulse-glow {
		animation: none;
	}
}