/**
 * Cairo Console — animation utilities
 * Scroll-reveal + hover helpers. Apply via class names only.
 */

:root {
	--dur: 550ms;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hover-dur: 180ms;
	--stagger-step: 80ms;
}

/* ── Scroll reveal (hidden until .is-visible) ──────────────── */
.reveal-up,
.reveal-fade,
.reveal-left,
.reveal-right,
.reveal-scale {
	transition-property: opacity, transform;
	transition-duration: var(--dur);
	transition-timing-function: var(--ease);
	transition-delay: calc(var(--reveal-delay, 0ms));
	will-change: opacity, transform;
}

[data-reveal-delay="1"] { --reveal-delay: 80ms; }
[data-reveal-delay="2"] { --reveal-delay: 160ms; }
[data-reveal-delay="3"] { --reveal-delay: 240ms; }
[data-reveal-delay="4"] { --reveal-delay: 320ms; }
[data-reveal-delay="5"] { --reveal-delay: 400ms; }
[data-reveal-delay="6"] { --reveal-delay: 480ms; }

.reveal-up {
	opacity: 0;
	transform: translateY(16px);
}

.reveal-fade {
	opacity: 0;
}

.reveal-left {
	opacity: 0;
	transform: translateX(-16px);
}

.reveal-right {
	opacity: 0;
	transform: translateX(16px);
}

.reveal-scale {
	opacity: 0;
	transform: scale(0.96);
}

.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
	opacity: 1;
	transform: none;
}

/* ── Hover utilities ─────────────────────────────────────────── */
.hover-lift,
.hover-brighten,
.hover-scale {
	transition-duration: var(--hover-dur);
	transition-timing-function: ease-out;
}

.hover-lift {
	transition-property: transform;
}

.hover-lift:hover {
	transform: translateY(-4px);
}

.hover-brighten {
	transition-property: color, border-color, background-color;
}

.hover-brighten:hover {
	color: var(--accent-gold);
	border-color: var(--accent-gold);
}

.hover-scale {
	transition-property: transform;
	overflow: hidden;
}

.hover-scale:hover,
.hover-scale:focus-within {
	transform: scale(1.03);
}

/* Underline draw-in for text links */
.hover-underline {
	position: relative;
	text-decoration: none;
}

.hover-underline::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--hover-dur) ease-out;
}

.hover-underline:hover::after,
.hover-underline:focus-visible::after {
	transform: scaleX(1);
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.reveal-up,
	.reveal-fade,
	.reveal-left,
	.reveal-right,
	.reveal-scale {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hover-lift:hover,
	.hover-scale:hover,
	.hover-scale:focus-within {
		transform: none;
	}

	.hover-underline::after {
		transform: scaleX(1);
		transition: none;
	}
}