/**
 * Animations — Eco Balloon Stand Theme
 * Scroll-triggered reveals, transitions, entrance effects
 */

/* ============================================================
   REDUCED MOTION — disable all animations
   ============================================================ */

@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;
	}

	[data-animate] {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

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

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

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

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

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

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

@keyframes spinOnce {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

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

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

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

/* ============================================================
   SCROLL-REVEAL BASE STATES
   Applied via JS: IntersectionObserver adds .is-visible class
   ============================================================ */

[data-animate] {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="fade-up"] {
	transform: translateY(1.5rem);
}

[data-animate="fade-in"] {
	transform: none;
}

[data-animate="fade-left"] {
	transform: translateX(-1.5rem);
}

[data-animate="fade-right"] {
	transform: translateX(1.5rem);
}

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

/* Visible state (class added by JS) */
[data-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger delay for grid children */
[data-animate-stagger] > * {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 0.33s; }
[data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 0.40s; }

[data-animate-stagger].is-visible > * {
	opacity: 1;
	transform: none;
}

/* ============================================================
   COMPONENT ANIMATIONS
   ============================================================ */

/* Hero — entrance */
.hero__badge {
	animation: slideDown 0.5s ease 0.1s both;
}

.hero__headline {
	animation: fadeUp 0.7s ease 0.2s both;
}

.hero__subline {
	animation: fadeUp 0.7s ease 0.35s both;
}

.hero__ctas {
	animation: fadeUp 0.7s ease 0.5s both;
}

.hero__trust {
	animation: fadeIn 0.7s ease 0.65s both;
}

.hero__visual {
	animation: scaleIn 0.8s ease 0.2s both;
}

/* Header — o.a. auto-hide (transform/opacity) mag niet worden overschreven */
.site-header {
	transition:
		transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.32s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease,
		padding 0.3s ease;
}

/* WhatsApp button entrance */
.whatsapp-button {
	animation: scaleIn 0.4s ease 1s both;
}

/* Hover micro-interactions */
.component-card:hover,
.product-card:hover,
.application-card:hover,
.media-card:hover {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Button loading state */
.btn--submit.is-loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.btn--submit.is-loading::after {
	content: '';
	position: absolute;
	inset: 50% 50% auto auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: -0.5625rem;
	margin-right: -0.5625rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spinOnce 0.7s linear infinite;
}

/* Form success/error slide in */
.form-success[hidden],
.form-error[hidden] {
	display: none !important;
}

.form-success,
.form-error {
	animation: fadeUp 0.4s ease;
}

/* Accordion panel transition */
.accordion-panel {
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.3s ease;
}

/* Section diagonal — parallax-like on scroll handled by JS */
.section--bg-dark::before {
	transition: clip-path 0.1s linear;
}

/* Nav link indicator */
.nav-link::after {
	content: '';
	display: block;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.nav-link:hover::after,
.nav-link.is-active::after {
	transform: scaleX(1);
}

/* Badge pulse on CTA hover */
.btn--primary:hover .badge-dot {
	animation: pulse 1s ease infinite;
}

/* Placeholder visual shimmer */
.placeholder-visual {
	background: linear-gradient(
		90deg,
		var(--color-background-alt) 25%,
		rgba(200, 190, 165, 0.4) 50%,
		var(--color-background-alt) 75%
	);
	background-size: 200% auto;
	animation: shimmer 2s linear infinite;
}

/* Trust badges fade in stagger */
.trust-bar {
	animation: fadeIn 0.6s ease 0.8s both;
}

.hero__trust .trust-item {
	animation: fadeUp 0.5s ease both;
}

.hero__trust .trust-item:nth-child(1) { animation-delay: 0.70s; }
.hero__trust .trust-item:nth-child(2) { animation-delay: 0.80s; }
.hero__trust .trust-item:nth-child(3) { animation-delay: 0.90s; }
.hero__trust .trust-item:nth-child(4) { animation-delay: 1.00s; }

/* USP card hover */
.usp-card {
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.usp-card:hover {
	transform: translateY(-3px);
}

/* Language toggle */
.lang-btn {
	transition: color 0.2s ease,
	            background-color 0.2s ease,
	            border-color 0.2s ease;
}

/* Mobile nav icon active state */
.mobile-bottom-nav__item.is-active svg {
	animation: scaleIn 0.2s ease;
}