/* ==========================================================================
   SEO Agency Pro — Animations
   Scroll-triggered reveals use IntersectionObserver in assets/js/main.js,
   which toggles the .is-visible class. Everything here degrades to a
   static, fully visible state if JS is disabled (see the no-js rule below).
   ========================================================================== */

.sap-anim {
	opacity: 0;
	transition: opacity .7s ease, transform .7s ease;
	will-change: opacity, transform;
}
.sap-anim[data-anim="fade-up"] { transform: translateY(28px); }
.sap-anim[data-anim="fade-in"] { transform: translateY(0); }
.sap-anim[data-anim="scale"] { transform: scale(.92); }
.sap-anim[data-anim="slide"] { transform: translateX(-24px); }

.sap-anim.is-visible {
	opacity: 1;
	transform: none;
}

/* No-JS fallback: never leave content invisible. */
.no-js .sap-anim { opacity: 1; transform: none; }

/* Floating hero/decorative elements. */
@keyframes sap-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
.sap-float { animation: sap-float 5s ease-in-out infinite; }
.sap-float--delay { animation-delay: 1.5s; }

/* Counter emphasis pulse when a value finishes animating. */
@keyframes sap-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.06); }
	100% { transform: scale(1); }
}
.sap-counter__value.is-done { animation: sap-pulse .4s ease; }

/* Trusted-by logo marquee: two identical tracks slide left in lockstep,
   so the second track fills in exactly as the first scrolls out — a
   seamless, gapless loop with no JS. */
@keyframes sap-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

/* Ambient hero glow: slow, GPU-cheap (opacity + transform only, no
   filter/blur re-render), so it doesn't cost meaningful frame time. */
@keyframes sap-glow-pulse {
	0%, 100% { transform: scale(1); opacity: .35; }
	50% { transform: scale(1.08); opacity: .5; }
}
.sap-hero__blob--1 { animation: sap-glow-pulse 9s ease-in-out infinite; }
.sap-hero__blob--2 { animation: sap-glow-pulse 9s ease-in-out infinite 3s; }

/* Process connectors: a flowing dash suggesting an active data pipeline.
   Pure background-position animation on a 1px-tall element — negligible
   paint cost. */
@keyframes sap-flow {
	to { background-position: -24px 0; }
}
.sap-process__step:not(:last-child)::after {
	border-top: none;
	background-image: repeating-linear-gradient(90deg, var(--sap-primary) 0 6px, transparent 6px 12px);
	background-size: 24px 1.5px;
	height: 1.5px;
	opacity: .55;
	animation: sap-flow 1.1s linear infinite;
}

/* Primary button shine sweep — hover-only, so it costs nothing until
   a pointer is actually over the button. */
.sap-btn--primary { position: relative; overflow: hidden; }
.sap-btn--primary::after {
	content: '';
	position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-20deg);
	opacity: 0;
}
.sap-btn--primary:hover::after {
	opacity: 1;
	animation: sap-shine .9s ease;
}
@keyframes sap-shine {
	from { left: -60%; }
	to { left: 130%; }
}

/* Mobile menu bar → X transform. */
.sap-menu-toggle.is-open .sap-menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sap-menu-toggle.is-open .sap-menu-toggle__bar:nth-child(2) { opacity: 0; }
.sap-menu-toggle.is-open .sap-menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Accordion panel open/close. */
.sap-accordion__panel {
	overflow: hidden;
}

/* Respect user motion preference: disable everything decorative. */
@media (prefers-reduced-motion: reduce) {
	.sap-anim {
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.sap-float { animation: none !important; }
	.sap-counter__value.is-done { animation: none !important; }
	.sap-trust__logos { animation: none !important; }
	.sap-trust__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.sap-trust__marquee .sap-trust__logos[aria-hidden="true"] { display: none; }
	.sap-hero__blob--1, .sap-hero__blob--2 { animation: none !important; }
	.sap-process__step::after { animation: none !important; }
	.sap-btn--primary:hover::after { animation: none !important; opacity: 0 !important; }
	html { scroll-behavior: auto !important; }
	* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Theme-option kill switch (Customizer → Animations), applied via body class. */
body.sap-motion-off .sap-anim { transition: none !important; opacity: 1 !important; transform: none !important; }
body.sap-motion-off .sap-float { animation: none !important; }
body.sap-motion-off .sap-trust__logos { animation: none !important; }
body.sap-motion-off .sap-trust__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
body.sap-motion-off .sap-trust__marquee .sap-trust__logos[aria-hidden="true"] { display: none; }
body.sap-motion-off .sap-hero__blob--1, body.sap-motion-off .sap-hero__blob--2 { animation: none !important; }
body.sap-motion-off .sap-process__step::after { animation: none !important; }
body.sap-motion-off .sap-btn--primary:hover::after { animation: none !important; opacity: 0 !important; }