/* ============================================================
   WILDRA — Animations & Transitions
   Subtle, premium micro-animations
   ============================================================ */

/* ─── Scroll-triggered Fade In ──────────────────────────────── */
@keyframes wildraFadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

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

/* Elements that will animate on scroll — initial state */
.wildra-animate {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
	            transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

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

/* Stagger animation delays for children */
.wildra-animate-stagger > *:nth-child(1) { transition-delay: 0s; }
.wildra-animate-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.wildra-animate-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.wildra-animate-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.wildra-animate-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.wildra-animate-stagger > *:nth-child(6) { transition-delay: 0.5s; }

/* ─── Gold Shimmer Effect ───────────────────────────────────── */
@keyframes wildraGoldShimmer {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}

.wildra-shimmer {
	background: linear-gradient(
		90deg,
		var(--wildra-gold) 0%,
		var(--wildra-gold-light) 25%,
		var(--wildra-gold) 50%,
		var(--wildra-gold-light) 75%,
		var(--wildra-gold) 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: wildraGoldShimmer 4s linear infinite;
}

/* ─── Pulse Glow ────────────────────────────────────────────── */
@keyframes wildraGlow {
	0%, 100% { box-shadow: 0 0 20px rgba(201, 168, 76, 0.15); }
	50%      { box-shadow: 0 0 30px rgba(201, 168, 76, 0.3); }
}

.wildra-glow {
	animation: wildraGlow 3s ease-in-out infinite;
}

/* ─── Smooth Image Loading ──────────────────────────────────── */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity 0.5s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"][complete] {
	opacity: 1;
}

/* Fix for already loaded images */
img:not([loading="lazy"]) {
	opacity: 1;
}

/* ─── Hero Section Parallax-like Effect ─────────────────────── */
.wildra-hero-root {
	min-height: 100vh;
	background: linear-gradient(135deg, #0D0D0D 0%, #1A1A2E 55%, #0D0D0D 100%);
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.wildra-hero-root::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
	pointer-events: none;
}

.wildra-hero-root::after {
	content: "";
	position: absolute;
	top: -50%;
	right: -20%;
	width: 60%;
	height: 200%;
	background: radial-gradient(circle, rgba(201, 168, 76, 0.03) 0%, transparent 70%);
	pointer-events: none;
	animation: wildraFadeIn 2s ease forwards;
}

/* ─── Smooth Page Load ──────────────────────────────────────── */
@keyframes wildraPageLoad {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.wp-site-blocks {
	animation: wildraPageLoad 0.5s ease forwards;
}

/* ─── Respect user preferences ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.wildra-animate {
		opacity: 1;
		transform: none;
	}

	.wp-site-blocks {
		animation: none;
	}
}