/* 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%); }
}

/* 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; }
}