/* ================================================================
   FLARE INTERNATIONAL - ANIMATIONS
   Scroll-triggered animations and hover effects
   ================================================================ */

/* ── KEYFRAMES ── */

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

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

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

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

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

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

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

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

/* ── BASE ANIMATION CLASS ── */

.anim {
	opacity: 0;
}

.anim.in {
	animation: fadeUp 0.6s ease forwards;
}

.anim.anim-fade-in.in {
	animation: fadeIn 0.6s ease forwards;
}

.anim.anim-fade-left.in {
	animation: fadeLeft 0.6s ease forwards;
}

.anim.anim-fade-right.in {
	animation: fadeRight 0.6s ease forwards;
}

.anim.anim-scale.in {
	animation: scaleIn 0.5s ease forwards;
}

/* ── STAGGER DELAYS ── */

.anim-d1 { animation-delay: 0.1s !important; }
.anim-d2 { animation-delay: 0.2s !important; }
.anim-d3 { animation-delay: 0.3s !important; }
.anim-d4 { animation-delay: 0.4s !important; }
.anim-d5 { animation-delay: 0.5s !important; }
.anim-d6 { animation-delay: 0.6s !important; }

/* ── HOVER TRANSITIONS ── */

.hover-lift {
	transition: transform var(--transition), box-shadow var(--transition);
}

.hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(15, 58, 74, 0.12);
}

.hover-glow {
	transition: box-shadow var(--transition);
}

.hover-glow:hover {
	box-shadow: 0 8px 24px rgba(254, 187, 138, 0.3);
}

/* ── SCROLL INDICATOR ── */

.hero-scroll {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.hero-scroll span {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(245, 245, 245, 0.70);
	font-family: var(--font-primary);
}

.hero-scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(180deg, rgba(108, 171, 182, 0.4), transparent);
	animation: pulse 2s ease-in-out infinite;
}

/* ── PREFERS REDUCED MOTION ── */

@media (prefers-reduced-motion: reduce) {
	.anim {
		opacity: 1;
	}

	.anim.in {
		animation: none;
	}

	.hover-lift:hover {
		transform: none;
	}

	.hero-scroll-line {
		animation: none;
	}

	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}