/* ==========================================================================
   ACPL Animations — animations.css
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes acpl-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes acpl-fadeUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

@keyframes acpl-fadeLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes acpl-fadeRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

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

@keyframes acpl-slideGoldLine {
	from {
		width: 0;
	}
	to {
		width: 60px;
	}
}

@keyframes acpl-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}

@keyframes acpl-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.6; }
}

@keyframes acpl-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

@keyframes acpl-underlineSlide {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---------- Reveal Classes (activated by IntersectionObserver) ---------- */
.acpl-reveal {
	opacity: 0;
	transition: none;
}

.acpl-reveal.is-visible {
	animation-duration: 0.7s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode: forwards;
}

.acpl-reveal--up.is-visible       { animation-name: acpl-fadeUp; }
.acpl-reveal--down.is-visible     { animation-name: acpl-fadeDown; }
.acpl-reveal--left.is-visible     { animation-name: acpl-fadeLeft; }
.acpl-reveal--right.is-visible    { animation-name: acpl-fadeRight; }
.acpl-reveal--fade.is-visible     { animation-name: acpl-fadeIn; }
.acpl-reveal--scale.is-visible    { animation-name: acpl-scaleIn; }

/* Stagger delays for grid children */
.acpl-reveal--stagger.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.acpl-reveal--stagger.is-visible > *:nth-child(2) { animation-delay: 80ms; }
.acpl-reveal--stagger.is-visible > *:nth-child(3) { animation-delay: 160ms; }
.acpl-reveal--stagger.is-visible > *:nth-child(4) { animation-delay: 240ms; }
.acpl-reveal--stagger.is-visible > *:nth-child(5) { animation-delay: 320ms; }
.acpl-reveal--stagger.is-visible > *:nth-child(6) { animation-delay: 400ms; }
.acpl-reveal--stagger.is-visible > *:nth-child(7) { animation-delay: 480ms; }
.acpl-reveal--stagger.is-visible > *:nth-child(8) { animation-delay: 560ms; }

.acpl-reveal--stagger.is-visible > * {
	opacity: 0;
	animation-name: acpl-fadeUp;
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode: forwards;
}

/* Manual delay utilities */
.acpl-delay-1 { animation-delay: 100ms !important; }
.acpl-delay-2 { animation-delay: 200ms !important; }
.acpl-delay-3 { animation-delay: 300ms !important; }
.acpl-delay-4 { animation-delay: 400ms !important; }
.acpl-delay-5 { animation-delay: 500ms !important; }

/* ---------- Hover Effects ---------- */
.acpl-hover-lift {
	transition: transform var(--duration-normal) var(--ease-out),
	            box-shadow var(--duration-normal) var(--ease-out);
}

.acpl-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.acpl-hover-gold {
	transition: box-shadow var(--duration-normal) var(--ease-out);
}

.acpl-hover-gold:hover {
	box-shadow: var(--shadow-gold);
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.acpl-reveal {
		opacity: 1;
	}

	.acpl-reveal--stagger > * {
		opacity: 1;
	}
}