/**
 * Sælkerabúðin - Animations
 * Scroll reveal, hover transitions, keyframes
 */

/* ─── SCROLL REVEAL ────────────────────────────── */

[data-animate] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

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

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

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

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

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

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

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

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

/* ─── STAGGERED CHILDREN ───────────────────────── */

[data-animate-stagger] > * {
	opacity: 0;
	transform: translateY(20px);
	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.1s; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 0.15s; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 0.2s; }
[data-animate-stagger].is-visible > *:nth-child(5) { transition-delay: 0.25s; }
[data-animate-stagger].is-visible > *:nth-child(6) { transition-delay: 0.3s; }
[data-animate-stagger].is-visible > *:nth-child(7) { transition-delay: 0.35s; }
[data-animate-stagger].is-visible > *:nth-child(8) { transition-delay: 0.4s; }
[data-animate-stagger].is-visible > *:nth-child(9) { transition-delay: 0.45s; }

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

/* ─── SCROLL INDICATOR BOUNCE ──────────────────── */

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

.saelk-scroll-indicator {
	animation: saelk-bounce-down 2s ease-in-out infinite;
}

/* ─── FADE IN UP KEYFRAMES ─────────────────────── */

@keyframes saelk-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.saelk-animate-in {
	animation: saelk-fade-in-up 0.6s ease forwards;
}

/* ─── PULSE GLOW ───────────────────────────────── */

@keyframes saelk-pulse-glow {
	0%, 100% {
		box-shadow: 0 0 20px rgba(198, 134, 66, 0.15);
	}
	50% {
		box-shadow: 0 0 40px rgba(198, 134, 66, 0.3);
	}
}

/* ─── LOADING SKELETON ─────────────────────────── */

@keyframes saelk-skeleton {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

.saelk-skeleton {
	background: linear-gradient(90deg, #222 25%, #333 50%, #222 75%);
	background-size: 200% 100%;
	animation: saelk-skeleton 1.5s ease-in-out infinite;
	border-radius: 4px;
}