/* Shared animation layer (switched by body classes from the customizer). */
@property --mo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mo-probe { to { opacity: .99; } }
@keyframes mo-rot { to { --mo-a: 360deg; } }
@keyframes mo-spin { to { transform: rotate(360deg); } }
@keyframes mo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mo-fadein { from { opacity: 0; } }
@keyframes mo-shine { to { transform: translateX(-260%) skewX(-20deg); } }
@keyframes mo-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes mo-glint { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes mo-sun { 0% { transform: translateX(-45%); } 100% { transform: translateX(45%); } }
@keyframes mo-breathe { 0%, 100% { opacity: .5; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
.mo-probe { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; animation: mo-probe 1000s linear infinite; }
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* Reveal on scroll (classes added by JS, so without JS everything stays visible). */
.mo-reveal .mo-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.mo-reveal .mo-rv.mo-in { opacity: 1; transform: none; }

/* Button shine on hover. */
.mo-shine .btn { position: relative; overflow: hidden; isolation: isolate; }
.mo-shine .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 110%; width: 40%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); }
.mo-shine .btn:hover::after, .mo-shine .btn:focus-visible::after { animation: mo-shine .8s ease forwards; }

/* Spotlight (desktop): elements get .mo-spot-el from JS; colour via --mo-spot. */
@media (hover: hover) and (pointer: fine) {
	.mo-spot .mo-spot-el { background-image: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), var(--mo-spot, rgba(255, 255, 255, .1)), transparent 60%); }
}

/* ---------- Kesem effects ---------- */
@keyframes ksm-orb-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, 40px) scale(1.12); } }
@keyframes ksm-orb-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, -30px) scale(.9); } }
@keyframes ksm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ksm-flow { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes ksm-marquee { to { transform: translateX(50%); } }

/* Hero: drifting colour glows, slowly turning ring, floating product. */
.mo-hero.mo-ready .hero .orb-a { animation: ksm-orb-a 16s ease-in-out infinite; }
.mo-hero.mo-ready .hero .orb-b { animation: ksm-orb-b 19s ease-in-out infinite; }
.mo-hero.mo-ready .hero-product img { animation: ksm-float 6s ease-in-out infinite; }
.mo-hero.mo-ready .hero-product .ring { animation: mo-spin 26s linear infinite; }
.mo-hero .hero-copy > * { animation: mo-fadein .8s ease both; }
.mo-hero .hero-copy > *:nth-child(2) { animation-delay: .08s; }
.mo-hero .hero-copy > *:nth-child(3) { animation-delay: .16s; }
.mo-hero .hero-copy > *:nth-child(4) { animation-delay: .24s; }
.mo-hero .hero-copy > *:nth-child(5) { animation-delay: .32s; }

/* Energy line flowing along the menu bar. */
.mo-flow.mo-ready .nav-bar .flow { opacity: 1; animation: ksm-flow 4.5s linear infinite; }
.mo-flow.mo-ready.menu-white .nav-bar .flow { animation: none; }

/* Eyebrow lines grow in. */
.mo-lines .eyebrow::before, .mo-lines .eyebrow::after { transform: scaleX(0); transition: transform .8s cubic-bezier(.2, .7, .2, 1) .15s; }
.mo-lines .eyebrow.mo-in::before, .mo-lines .eyebrow.mo-in::after { transform: scaleX(1); }

/* Cards lift on hover. */
@media (hover: hover) {
	.mo-lift .seg-card:hover, .mo-lift .sys-card:hover, .mo-lift .sol-box:hover, .mo-lift .post-card-link:hover, .mo-lift .stat-grid li:hover { transform: translateY(-6px); }
	.mo-zoom .gal-item a:hover img, .mo-zoom .post-card-link:hover .post-card-img img { transform: scale(1.07); }
}

/* Logos marquee. */
.mo-marquee.mo-ready .logos-track.is-marquee { animation: ksm-marquee 40s linear infinite; }
.mo-marquee .logos-viewport:hover .logos-track { animation-play-state: paused; }

/* Spotlight colours. */
.seg-card, .sol-box { --mo-spot: color-mix(in srgb, var(--teal) 10%, transparent); }
.sys-card, .stat-grid li { --mo-spot: color-mix(in srgb, var(--green) 18%, transparent); }

html.mo-stopped .eyebrow::before, html.mo-stopped .eyebrow::after { transform: none !important; transition: none !important; }
html.mo-stopped .nav-bar .flow { opacity: 0 !important; }
html.mo-stopped .logos-track.is-marquee { flex-wrap: wrap; justify-content: center; width: auto; }
html.mo-stopped .logos-track.is-marquee > [aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.eyebrow::before, .eyebrow::after { transform: none !important; }
	.hero-copy > * { animation: none !important; }
}

/* Full stop (accessibility tool, or window.moAnim.stop()). The probe keeps running so we can detect a restart. */
html.mo-stopped *:not(.mo-probe), html.mo-stopped *::before, html.mo-stopped *::after { animation: none !important; }
html.mo-stopped .mo-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
html.mo-stopped .btn::after { display: none !important; }
html.mo-stopped .mo-spot-el { background-image: none !important; }
html.mo-stopped .stack-card { position: relative !important; top: auto !important; transform: none !important; filter: none !important; }

@media (prefers-reduced-motion: reduce) {
	.mo-rv { opacity: 1 !important; transform: none !important; }
	.stack-card { position: relative !important; top: auto !important; transform: none !important; }
}

/* Hearts rising in the hero. */
@keyframes ksm-heart-up { 0% { transform: translateY(0) rotate(-45deg) scale(.7); opacity: 0; } 15% { opacity: .55; } 100% { transform: translateY(-420px) rotate(-45deg) scale(1.1); opacity: 0; } }
.mo-hero.mo-ready .hero .hearts i { animation: ksm-heart-up 11s ease-in infinite; }
.mo-hero.mo-ready .hero .hearts i:nth-child(2) { animation-delay: 2s; animation-duration: 13s; }
.mo-hero.mo-ready .hero .hearts i:nth-child(3) { animation-delay: 4.5s; }
.mo-hero.mo-ready .hero .hearts i:nth-child(4) { animation-delay: 6s; animation-duration: 14s; }
.mo-hero.mo-ready .hero .hearts i:nth-child(5) { animation-delay: 8s; }
.mo-hero.mo-ready .hero .hearts i:nth-child(6) { animation-delay: 9.5s; animation-duration: 12s; }
.mo-hero.mo-ready .hero-team img { animation: ksm-float 7s ease-in-out infinite 1s; }
.mo-hero.mo-ready .memorial .mem-icon { animation: mo-breathe 4s ease-in-out infinite; }
.mo-lift .don-card:hover { transform: translateY(-6px); }
.don-card { --mo-spot: color-mix(in srgb, var(--green) 10%, transparent); }