/* ==========================================================================
   Skardu Origins — animations.css
   Keyframes, page-load fade, marquee, and GSAP pre-states.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page load fade-in
   -------------------------------------------------------------------------- */
body.so-fade-in {
	animation: so-body-fade 0.7s ease both;
}

@keyframes so-body-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Marquee (announcement bar + trust badges on mobile)
   -------------------------------------------------------------------------- */
@keyframes so-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Pause marquee on hover so text can be read */
.so-announcement:hover .so-announcement__track,
.so-trust:hover .so-trust__track {
	animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Hero scroll hint
   -------------------------------------------------------------------------- */
@keyframes so-scroll-hint {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	70% {
		transform: translateY(12px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   Hero GSAP pre-state
   Scroll animations are handled entirely by the AOS library (data-aos
   attributes); only the hero text timeline is custom (GSAP, tied to Swiper
   slide changes). Text starts hidden ONLY when JS is available (.so-js is
   added by main.js), so content is never lost if scripts fail to load.
   -------------------------------------------------------------------------- */
.so-js .so-hero__headline,
.so-js .so-hero__sub,
.so-js .so-hero__ctas {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   Gentle floating accent (hero scroll hint container)
   -------------------------------------------------------------------------- */
@keyframes so-float {
	0%, 100% {
		transform: translate(-50%, 0);
	}
	50% {
		transform: translate(-50%, -8px);
	}
}

.so-hero__scroll-hint {
	animation: so-float 3.4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Reduced motion: respect user preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	body.so-fade-in {
		animation: none;
	}

	.so-announcement__track,
	.so-trust__track,
	.so-hero__scroll-hint,
	.so-hero__scroll-hint span {
		animation: none !important;
	}

	.so-js .so-hero__headline,
	.so-js .so-hero__sub,
	.so-js .so-hero__ctas {
		opacity: 1;
	}

	.so-header,
	.so-header.is-scrolled {
		background: var(--so-green-deep);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

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

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

/* Prevent AOS + Swiper transform conflicts from hiding content */
.so-products-swiper.swiper {
	transform: none !important;
}

.so-process__intro,
.so-process__steps,
.so-parallax__content,
.so-why-us__grid {
	overflow: visible;
}