/* ZaSite Motion — decorative layers only. Nothing here hides content. */
.zm-progress {
	position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 100000;
	background: linear-gradient(90deg, #12a594, #6e56e8 55%, #3457d5);
	transform-origin: 100% 50%; pointer-events: none;
}
[dir="ltr"] .zm-progress { transform-origin: 0 50%; }
.admin-bar .zm-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .zm-progress { top: 46px; } }

/* masked heading lines */
.zm-line { display: block; overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.zm-line__in { display: block; will-change: transform; }
.zw-hero h1 .zm-line { padding-bottom: .2em; margin-bottom: -.2em; }

/* hero orbs */
.zm-hero { position: relative; isolation: isolate; }
.zm-hero > .zw-wrap { position: relative; z-index: 1; }
.zm-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.zm-orb { position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.zm-orb--a { width: 460px; height: 460px; top: -120px; right: -80px; background: radial-gradient(circle at 40% 40%, #c9d4ff, transparent 68%); }
.zm-orb--b { width: 380px; height: 380px; top: 160px; left: -110px; background: radial-gradient(circle at 50% 50%, #ddd3ff, transparent 66%); }
.zm-orb--c { width: 300px; height: 300px; top: 40%; right: 30%; background: radial-gradient(circle at 50% 50%, #c4f0e8, transparent 66%); opacity: .45; }
.zm-grid-bg {
	position: absolute; inset: 0; display: block;
	background-image: linear-gradient(#3457d508 1px, transparent 1px), linear-gradient(90deg, #3457d508 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 75%);
}
@media (max-width: 767px) {
	.zm-orb--a { width: 300px; height: 300px; }
	.zm-orb--b { width: 260px; height: 260px; }
	.zm-orb--c { display: none; }
}

/* marquee */
.zw-logos.zm-marquee { display: block; overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.zm-marquee__track { display: flex; width: max-content; will-change: transform; }
.zm-marquee__set { display: flex; align-items: center; gap: 70px; padding-right: 70px; }
.zm-marquee__set > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 70px; }
.zm-marquee__set > span::after { content: '✦'; font-size: .55em; color: #c9c2f2; }
@media (max-width: 767px) {
	.zm-marquee__set, .zm-marquee__set > span { gap: 40px; }
	.zm-marquee__set { padding-right: 40px; }
}

/* stats: line draws in */
.zw-stats.zm-stats { position: relative; border-top-color: transparent; border-bottom-color: transparent; --zm-line: 1; }
.zw-stats.zm-stats::before, .zw-stats.zm-stats::after {
	content: ''; position: absolute; left: 0; right: 0; height: 1px;
	background: linear-gradient(90deg, transparent, var(--zw-line, #e6e9f2) 10%, var(--zw-line, #e6e9f2) 90%, transparent);
	transform: scaleX(var(--zm-line)); transform-origin: 50% 50%;
}
.zw-stats.zm-stats::before { top: 0; }
.zw-stats.zm-stats::after { bottom: 0; }

/* spotlight on cards */
.zm-spot { position: relative; }
.zm-spot::after {
	content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient(360px circle at var(--zm-x, 50%) var(--zm-y, 50%), #6e56e814, transparent 60%);
	opacity: 0; transition: opacity .35s;
}
.zm-spot:hover::after { opacity: 1; }
.zw-card.zm-busy, .zw-why > article.zm-busy, .zw-meeting-card.zm-busy, .zw-finder.zm-busy { transition-property: box-shadow, border-color !important; }

/* quote words */
.zm-word { display: inline; }

/* CTA: slow drift of the colour fields */
.zw-cta.zm-cta {
	--zm-shift: 0;
	background:
		radial-gradient(ellipse at calc(20% + var(--zm-shift) * 40%) calc(20% + var(--zm-shift) * 20%), #e9e3ffaa, transparent 60%),
		radial-gradient(ellipse at calc(85% - var(--zm-shift) * 40%) 80%, #daf3efbb, transparent 60%),
		#fafaff;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.zm-progress, .zm-orbs { display: none; }
}