/**
 * TKA Energy — Animations & Transitions
 */

/* ── Scroll Reveal ─────────────────────────── */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
	opacity: 1;
	transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ── Fade In ───────────────────────────────── */
.fade-in {
	animation: fadeIn 0.6s ease both;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Slide Up ──────────────────────────────── */
.slide-up {
	animation: slideUp 0.6s ease both;
}

@keyframes slideUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Scale In ──────────────────────────────── */
.scale-in {
	animation: scaleIn 0.4s ease both;
}

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

/* ── Hero Text Animation ───────────────────── */
.hero-title {
	animation: slideUp 0.8s ease both;
}

.hero-subtitle {
	animation: slideUp 0.8s 0.2s ease both;
}

.hero-description {
	animation: slideUp 0.8s 0.35s ease both;
}

.hero-ctas {
	animation: slideUp 0.8s 0.5s ease both;
}

/* ── Shimmer Loading ───────────────────────── */
@keyframes shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.skeleton {
	background: linear-gradient(90deg, var(--color-light) 25%, var(--color-lighter) 50%, var(--color-light) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}

/* ── Pulse ─────────────────────────────────── */
@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

/* ── Spin ──────────────────────────────────── */
@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ── Mobile Nav Transition ─────────────────── */
@media (max-width: 999px) {
	.mobile-nav {
		transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mobile-overlay {
		transition: opacity 0.35s ease;
	}
}