/* ==========================================================================
   Eimsky – advanced motion layer (see assets/js/advanced-motion.js)
   Uses individual transform properties (translate / rotate / scale) so it never
   overrides the theme's transform-based hover and reveal effects.
   ========================================================================== */

:root {
	--am-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 1. Word-by-word heading reveal ------------------------------------------ */
.am-split .am-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	/* room for descenders so the mask does not clip g / y / p */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.am-split .am-w__i {
	display: inline-block;
	translate: 0 110%;
	rotate: 0 0 1 4deg;
	opacity: 0;
	transition: translate 0.9s var(--am-ease), rotate 0.9s var(--am-ease), opacity 0.5s ease;
	transition-delay: calc(min(var(--am-i, 0), 24) * 45ms);
}
.am-split.am-split--in .am-w__i { translate: 0 0; rotate: 0 0 1 0deg; opacity: 1; }
/* Gradient words carry their own gradient while split (the parent's is paused). */
.am-split .text-gradient,
.am-split .text-gradient-light { background: none; -webkit-text-fill-color: currentColor; }
.am-split .am-w__i--grad {
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.am-split .text-gradient-light .am-w__i--grad { background-image: var(--gradient-light); }

/* 2. Parallax layers ------------------------------------------------------- */
.am-parallax { will-change: translate; }
.hero__media.am-parallax { inset: -10% 0; }               /* overscan so the edges never show */
.about__media img.am-parallax,
.why__media img.am-parallax,
.about-page__intro-media img.am-parallax,
.about-page__strengths-media img.am-parallax,
.about-page__story-photo img.am-parallax,
.services-page__platform-image img.am-parallax,
.news-single__image img.am-parallax,
.product-card__img.am-parallax { scale: 1.12; }
.serviceconnect-page__module-image img.am-parallax { scale: 1.08; }

/* 3. 3D tilt with glare ---------------------------------------------------- */
.am-tilt {
	position: relative;
	transform-style: preserve-3d;
	transition: rotate 0.6s var(--am-ease);
	will-change: rotate;
}
.am-tilt:hover { transition: rotate 0.12s linear; }
.am-glare {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(circle at var(--am-gx, 50%) var(--am-gy, 50%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
	mix-blend-mode: soft-light;
	transition: opacity 0.4s ease;
}
.am-tilt:hover .am-glare { opacity: 1; }
.products__grid,
.card-grid,
.industries__grid,
.news-page__grid,
.serviceconnect-page__case-grid { perspective: 1200px; }

/* 4. Magnetic buttons ------------------------------------------------------ */
.am-magnetic { transition: translate 0.45s var(--am-ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s; }
.am-magnetic:hover { transition: translate 0.15s linear, transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s; }

/* Button shine sweep (primary buttons) */
.am-ready .btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	z-index: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	pointer-events: none;
	transition: left 0.7s var(--am-ease);
}
.am-ready .btn--primary:hover::after { left: 130%; }
.am-ready .btn--primary > span { position: relative; z-index: 1; }

/* 5. Cursor follower ring -------------------------------------------------- */
.am-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1.5px solid rgba(98, 164, 32, 0.75);
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease, width 0.3s var(--am-ease), height 0.3s var(--am-ease), margin 0.3s var(--am-ease), background-color 0.3s ease, border-color 0.3s ease;
}
.am-cursor.is-visible { opacity: 1; }
.am-cursor.is-active { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgba(176, 203, 54, 0.14); border-color: rgba(176, 203, 54, 0.9); }
.am-cursor.is-text { width: 4px; height: 28px; margin: -14px 0 0 -2px; border-radius: 2px; background: rgba(98, 164, 32, 0.6); border-color: transparent; }
.am-cursor.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* 6. Scroll progress bar --------------------------------------------------- */
.am-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	height: 3px;
	background: var(--gradient);
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}
.admin-bar .am-progress { top: var(--wp-admin--admin-bar--height, 32px); }

/* "Reduce motion" visitors when the site respects that setting (Customizer → Eimsky: Animations). */


/* 7. Page loading transition: branded curtain ----------------------------
   html::before = curtain, html::after = logo + loading line. They are on the root element
   so the arriving page is covered before it paints (an inline <head> script adds .am-entering). */
html::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
	background:
		radial-gradient(60% 50% at 70% 40%, rgba(98, 164, 32, 0.22), rgba(98, 164, 32, 0) 70%),
		radial-gradient(50% 45% at 20% 75%, rgba(176, 203, 54, 0.14), rgba(176, 203, 54, 0) 70%),
		#002110;
	transform: translateY(101%);
	transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}
html::after {
	content: "";
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 100001;
	width: 200px;
	height: 56px;
	margin: -28px 0 0 -100px;
	pointer-events: none;
	opacity: 0;
	background:
		url("../images/brand/eimsky-logo-white.svg") center top / 165px 24px no-repeat,
		linear-gradient(90deg, #62a420, #7dcf2b, #b0cb36) center bottom / 0 3px no-repeat;
	transition: opacity 0.25s ease;
}
html.am-leaving::before { transform: translateY(0); pointer-events: auto; }
html.am-leaving::after { opacity: 1; transition-delay: 0.3s; animation: am-loading 1.4s ease-in-out 0.35s infinite; }
html.am-entering::before { transform: translateY(0); transition: none; }
html.am-entering::after { opacity: 1; transition: none; background-size: 165px 24px, 120px 3px; }
html.am-entering.am-entered::before { transform: translateY(-101%); transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); }
html.am-entering.am-entered::after { opacity: 0; transition: opacity 0.2s ease; }
@keyframes am-loading {
	0% { background-size: 165px 24px, 0 3px; }
	60% { background-size: 165px 24px, 160px 3px; }
	100% { background-size: 165px 24px, 160px 3px; background-position: center top, right bottom; }
}

/* 8. Section-to-section transitions (driven by --am-sp: 0 entering → 1 settled) */
.am-sec--expand {
	clip-path: inset(0 calc((1 - var(--am-sp, 1)) * 5vw) round calc((1 - var(--am-sp, 1)) * 48px));
	will-change: clip-path;
}
.am-sec--scale {
	scale: calc(0.92 + var(--am-sp, 1) * 0.08);
	transform-origin: 50% 0;
	will-change: scale;
}
.home .hero .hero__inner { will-change: translate, opacity; }

/* Footer watermark rises into view. */
.am-footer-mark {
	translate: 0 calc((1 - var(--am-sp, 1)) * 45%);
	opacity: calc(0.3 + var(--am-sp, 1) * 0.7);
}

/* 10. Hero depth (mouse) */
.home .hero__content,
.home .hero__badges { transition: translate 0.6s var(--am-ease); }

/* 1. Heading exit (words leave upwards when scrolled past, downwards when scrolling back) */
.am-split.am-split--instant .am-w__i { transition: none !important; }
.am-split.am-split--out .am-w__i {
	translate: 0 -110%;
	rotate: 0 0 1 -3deg;
	opacity: 0;
	transition-duration: 0.55s, 0.55s, 0.35s;
	transition-delay: calc(min(var(--am-i, 0), 24) * 18ms);
}
.am-split.am-split--out[data-am-dir="down"] .am-w__i { translate: 0 110%; rotate: 0 0 1 3deg; }

/* 1b. Text appear / exit */
.am-tx {
	opacity: 0;
	translate: 0 26px;
	filter: blur(6px);
	transition: opacity 0.7s var(--am-ease), translate 0.8s var(--am-ease), filter 0.7s var(--am-ease);
}
.am-tx[data-am-dir="up"] { translate: 0 -26px; }
.am-tx.is-in { opacity: 1; translate: 0 0; filter: none; transition-delay: 0.08s; }
.am-tx--instant { transition: none !important; }
.eyebrow.am-tx { translate: 0 14px; }
.eyebrow.am-tx[data-am-dir="up"] { translate: 0 -14px; }
.eyebrow.am-tx.is-in { translate: 0 0; transition-delay: 0s; }

/* 1c. Moving shapes behind sections */
.am-ambient-host { position: relative; isolation: isolate; }
.am-ambient {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}
.am-orb {
	position: absolute;
	border-radius: 50%;
	opacity: 0.9;
	animation: am-drift-a 26s ease-in-out infinite alternate paused;
	will-change: transform;
}
.am-ambient.is-live .am-orb,
.am-ambient.is-live .am-grid { animation-play-state: running; }
.am-orb--a { width: 46vmax; height: 46vmax; left: -14vmax; top: -18vmax; background: radial-gradient(circle closest-side, rgba(176, 203, 54, 0.16), rgba(176, 203, 54, 0) 72%); }
.am-orb--b { width: 38vmax; height: 38vmax; right: -12vmax; bottom: -16vmax; background: radial-gradient(circle closest-side, rgba(98, 164, 32, 0.13), rgba(98, 164, 32, 0) 72%); animation-name: am-drift-b; animation-duration: 32s; }
.am-orb--c { width: 22vmax; height: 22vmax; left: 52%; top: 38%; background: radial-gradient(circle closest-side, rgba(125, 207, 43, 0.1), rgba(125, 207, 43, 0) 72%); animation-name: am-drift-c; animation-duration: 22s; }
.am-ambient--dark .am-orb--a { background: radial-gradient(circle closest-side, rgba(176, 203, 54, 0.2), rgba(176, 203, 54, 0) 72%); }
.am-ambient--dark .am-orb--b { background: radial-gradient(circle closest-side, rgba(98, 164, 32, 0.24), rgba(98, 164, 32, 0) 72%); }
.am-ambient--dark .am-orb--c { background: radial-gradient(circle closest-side, rgba(125, 207, 43, 0.16), rgba(125, 207, 43, 0) 72%); }
.am-grid {
	position: absolute;
	inset: -80px;
	background-image:
		linear-gradient(rgba(176, 203, 54, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(176, 203, 54, 0.06) 1px, transparent 1px);
	background-size: 80px 80px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
	animation: am-grid 18s linear infinite paused;
}
@keyframes am-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(12vmax, 8vmax, 0) scale(1.15); } }
@keyframes am-drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-10vmax, -9vmax, 0) scale(0.92); } }
@keyframes am-drift-c { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-14vmax, 6vmax, 0); } 100% { transform: translate3d(8vmax, -7vmax, 0); } }
@keyframes am-grid { to { transform: translate3d(80px, 80px, 0); } }