/* Footer scene measured from vh-dev.com.
   VH root is 62.5% (1rem = 10px). Values below are the computed pixels / cqw, not their rem. */

.wx-footer {
	position: relative;
	overflow: hidden;
	min-height: 0;
	padding: 72px 0 0;
	background: var(--wx-bg);
	border-top: 1px solid var(--wx-line);
}

.wx-footer__sky,
.wx-footer__haze {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.wx-footer__sky { z-index: 0; }
.wx-footer__haze { z-index: 2; }

.wx-footer__cloud {
	position: absolute;
	bottom: 0;
	line-height: 0;
	will-change: transform;
}

.wx-footer__cloud img {
	width: 122%;
	max-width: none;
	height: auto;
	display: block;
	margin-left: -11%;
	opacity: 0.72;
	transform-origin: 50% 100%;
	image-rendering: auto;
	filter: blur(0.35px);
	/* Soft dissolve — no hard crop reveal */
	-webkit-mask-image: linear-gradient(to top, #000 22%, rgba(0, 0, 0, 0.72) 52%, rgba(0, 0, 0, 0.22) 78%, transparent 100%);
	mask-image: linear-gradient(to top, #000 22%, rgba(0, 0, 0, 0.72) 52%, rgba(0, 0, 0, 0.22) 78%, transparent 100%);
}
html[data-theme="dark"] .wx-footer__cloud img {
	mix-blend-mode: screen;
	opacity: 0.85;
	filter: blur(0.4px) saturate(1.15);
}
/* Fog plates are already cool blue (RGB ~120/175/255) — do not hue-rotate. */
html[data-theme="light"] .wx-footer__cloud img {
	mix-blend-mode: multiply;
	filter: brightness(0.92) contrast(1.06) saturate(1.45) blur(0.35px);
	opacity: 0.52;
}

.wx-footer__cloud--a { left: -6%; width: 108%; bottom: -4%; }
.wx-footer__cloud--b { right: -8%; width: 48%; bottom: -2%; }
.wx-footer__cloud--c { left: -8%; width: 72%; bottom: -6%; }
html[data-theme="dark"] .wx-footer__cloud--c img {
	opacity: 0.55;
}

/* Idle drift — gentle, no hard edge reveal */
@keyframes wx-fog-drift-a {
	from { transform: translate3d(-1.8%, 0, 0) scale(1.06); }
	to { transform: translate3d(1.8%, 0, 0) scale(1.06); }
}
@keyframes wx-fog-drift-b {
	from { transform: translate3d(2%, 0, 0) scale(1.1); }
	to { transform: translate3d(-2.5%, 0, 0) scale(1.1); }
}
@keyframes wx-fog-drift-c {
	from { transform: translate3d(-1.2%, 0, 0) scale(1.08); }
	to { transform: translate3d(2%, 0, 0) scale(1.08); }
}
.wx-footer__cloud--a img { animation: wx-fog-drift-a 26s ease-in-out infinite alternate; }
.wx-footer__cloud--b img { animation: wx-fog-drift-b 18s ease-in-out infinite alternate; }
.wx-footer__cloud--c img { animation: wx-fog-drift-c 22s ease-in-out infinite alternate; }


.wx-footer__grid,
.wx-footer__toprow,
.wx-footer__base {
	position: relative;
	z-index: 3;
}

.wx-footer__grid {
	display: grid;
	gap: 2rem;
	align-items: start;
}

.wx-footer__brand {
	margin: 0 0 1.1rem;
	font-size: 3.5rem;
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 0.85;
}

.wx-footer__slogan {
	max-width: 28rem;
	margin: 0 0 1.4rem;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.25;
}

.wx-footer .wx-footer__cta {
	display: inline-flex;
	width: auto;
	align-items: center;
	padding: 0.75rem 1.05rem;
	background: var(--wx-accent);
	color: #fff;
	font-family: var(--wx-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wx-footer__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 2rem;
}

.wx-footer__nav a,
.wx-footer__aside a {
	padding: 0.28rem 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
}

.wx-footer__aside p {
	margin: 0.15rem 0;
}

.wx-footer__aside .wx-kicker,
.wx-footer__nav .wx-kicker {
	margin: 0 0 0.7rem;
}

.wx-footer__toprow {
	display: flex;
	justify-content: flex-end;
	margin-top: 4.5rem;
}

.wx-footer .wx-footer__toprow button {
	display: inline-flex;
	width: auto;
	align-items: center;
	gap: 0.45rem;
	padding: 0;
	font-family: var(--wx-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wx-footer__stage {
	position: relative;
	z-index: 1;
	container-type: inline-size;
	margin-top: 0.4rem;
}

.wx-footer__wordbox {
	position: relative;
	z-index: 3;
	overflow: hidden;
}

.wx-footer .wx-footer__word {
	display: block;
	margin: 0;
	padding: 0;
	font-family: var(--wx-mono);
	font-weight: 500;
	font-size: 26.5cqw;
	line-height: 0.8;
	letter-spacing: -0.045em;
	text-align: center;
	text-decoration: none;
	color: var(--wx-text);
	white-space: nowrap;
}

.wx-footer__orb {
	position: absolute;
	pointer-events: none;
}

.wx-footer__orb img {
	width: 100%;
	height: auto;
	display: block;
}

/* Marble: sit behind the Webion word. Red: float above, higher on mobile. */
.wx-footer__orb--1 {
	z-index: 1;
	width: 11.2cqw;
	max-width: 214px;
	top: -33%;
	right: clamp(10px, 14.2cqw, 280px);
}

.wx-footer__orb--2 {
	z-index: 4;
	width: 4.85cqw;
	max-width: 93px;
	top: 8%;
	right: clamp(10px, 38cqw, 700px);
}

.wx-footer__orb--1 img { animation: wx-footer-float 2s ease-in-out infinite alternate; }
.wx-footer__orb--2 img { animation: wx-footer-float 1.2s ease-in-out infinite alternate; }

@keyframes wx-footer-float {
	from { transform: translateY(-10px); }
	to { transform: translateY(10px); }
}

.wx-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-top: 0;
	padding: 1.6rem 0 2.2rem;
	border-top: 0;
}

.wx-footer__legal {
	margin: 0;
	font-family: var(--wx-mono);
	font-size: 0.68rem;
	letter-spacing: 0.04em;
	opacity: 0.72;
}

.wx-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	justify-content: flex-end;
}

.wx-footer__base a {
	font-family: var(--wx-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.wx-footer { padding-top: 160px; }
	.wx-footer__grid { grid-template-columns: 1fr 1.8fr 0.8fr; gap: 2rem 3rem; }
	.wx-footer__nav { grid-template-columns: 1fr 1fr 1fr; }
	.wx-footer__toprow { margin-top: 140px; }
	.wx-footer__cloud--a { left: -1%; width: 72%; }
}

@media (max-width: 1023px) {
	.wx-footer__brand { font-size: 2.4rem; }
	.wx-footer__orb--1 { width: 72px; top: -22%; right: 2%; z-index: 1; }
	.wx-footer__orb--2 { width: 42px; top: -12%; right: 28%; z-index: 4; }
	.wx-footer__toprow { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.wx-footer__orb img { animation: none; }
	.wx-footer__cloud--a img,
	.wx-footer__cloud--b img,
	.wx-footer__cloud--c img { animation: none; }
}