/**
 * onmethod-2027 — wow-footer.css: the finish line, 10000x.
 *
 * Dark finale: volt marquee ticker, giant wordmark, volt CTA.
 * Copy untouched — CSS only. Respects prefers-reduced-motion + wow-off.
 */

/* ============ 1. Dark stage ============ */

.site-footer {
	background: #0a0a0c;
	color: #f4f4f2;
	border-top: 0;
	padding: 0 0 2rem;
	overflow: hidden;
}

.site-footer .wrap { position: relative; z-index: 1; }

/* ============ 2. Marquee ticker ============ */

.footer-marquee {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 0.9rem 0;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
	overflow: hidden;
	white-space: nowrap;
}

.footer-marquee__track {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
	animation: footer-scroll 28s linear infinite;
}

.footer-marquee__track span {
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(244, 244, 242, 0.55);
}

.footer-marquee__track i {
	font-style: normal;
	color: var(--volt);
	font-size: 0.9rem;
}

@keyframes footer-scroll {
	to { transform: translateX(-50%); }
}

/* ============ 3. Giant wordmark + brand ============ */

.site-footer .wordmark--giant {
	display: block;
	font-size: clamp(3rem, 11vw, 7.5rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 0.95;
	color: #f4f4f2;
	text-decoration: none;
	margin-bottom: 1.25rem;
}

.site-footer .wordmark--giant:hover { color: var(--volt); }

.footer-brand p {
	color: rgba(244, 244, 242, 0.62);
	max-width: 34ch;
	line-height: 1.65;
	margin: 0 0 1.75rem;
}

.footer-brand .btn { margin-bottom: 0.5rem; }

/* Footer CTA: locked dark text + periodic shine sweep. */
.site-footer .footer-brand .btn--volt {
	color: #111;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 10px 36px rgba(217, 255, 0, 0.35);
}

.site-footer .footer-brand .btn--volt::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	width: 55%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	transform: translateX(-160%) skewX(-20deg);
	z-index: 1;
	animation: footer-btn-shine 3.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes footer-btn-shine {
	0%, 55% { transform: translateX(-160%) skewX(-20deg); }
	100% { transform: translateX(320%) skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce) {
	.footer-marquee__track { animation: none; }
}

/* ============ 4. Link columns on dark ============ */

.site-footer .footer-grid h4 {
	color: rgba(244, 244, 242, 0.42);
}

.site-footer .footer-grid ul { list-style: none; margin: 0; padding: 0; }

.site-footer .footer-grid li { margin-bottom: 0.7rem; }

.site-footer .footer-grid a {
	color: #f4f4f2;
	text-decoration: none;
	font-size: 1.08rem;
	font-weight: 600;
}

.site-footer .footer-grid a:hover { color: var(--volt); }

/* ============ 5. Fine print ============ */

.site-footer .footer-copy {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-top: 1.75rem;
	color: rgba(244, 244, 242, 0.45);
}

.site-footer .footer-copy span { display: block; }

/* ============ 6. Reduced motion + kill switch ============ */

@media (prefers-reduced-motion: reduce) {
	.footer-marquee__track,
	.site-footer .footer-brand .btn--volt::after { animation: none; }
}

html.wow-off .footer-marquee__track,
html.wow-off .site-footer .footer-brand .btn--volt::after { animation: none; }
html.wow-off .site-footer .wordmark--giant:hover { color: #f4f4f2; }