/* ==========================================================================
   Animations — keyframes, transition primitives, scroll-reveal classes.
   ========================================================================== */

/* === Keyframes === */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInLeft {
	from { opacity: 0; transform: translateX(-50px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
	from { opacity: 0; transform: translateX(50px); }
	to   { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes morphShape {
	0%   { clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 0 100%); }
	50%  { clip-path: polygon(0 0, 98% 0, 100% 8%, 100% 100%, 0 100%); }
	100% { clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 0 100%); }
}

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

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

/* === Scroll-reveal default state === */
[data-animate] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--duration-page) var(--ease-elegant),
		transform var(--duration-page) var(--ease-elegant);
	will-change: opacity, transform;
}

[data-animate].is-visible {
	opacity: 1;
	transform: translateY(0);
}

[data-animate="left"] {
	transform: translateX(-50px);
}

[data-animate="left"].is-visible {
	transform: translateX(0);
}

[data-animate="right"] {
	transform: translateX(50px);
}

[data-animate="right"].is-visible {
	transform: translateX(0);
}

[data-animate="scale"] {
	transform: scale(0.95);
}

[data-animate="scale"].is-visible {
	transform: scale(1);
}

/* Stagger delays */
[data-animate-delay="1"] { transition-delay: 100ms; }
[data-animate-delay="2"] { transition-delay: 200ms; }
[data-animate-delay="3"] { transition-delay: 300ms; }
[data-animate-delay="4"] { transition-delay: 400ms; }
[data-animate-delay="5"] { transition-delay: 500ms; }

/* === Hover utilities === */
.hover-lift {
	transition: transform var(--duration-base) var(--ease-out),
		box-shadow var(--duration-base) var(--ease-out);
}

.hover-lift:hover,
.hover-lift:focus {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
}

.hover-zoom-img {
	overflow: hidden;
}

.hover-zoom-img img {
	transition: transform var(--duration-slow) var(--ease-out);
}

.hover-zoom-img:hover img,
.hover-zoom-img:focus-within img {
	transform: scale(1.05);
}

/* === Subtle gentle float for accent shapes === */
.float-anim {
	animation: gentleFloat 6s ease-in-out infinite;
}

.pulse-anim {
	animation: pulse 3s ease-in-out infinite;
}