/*
 * WTV Modern — additive visual & scroll-reveal layer
 * -----------------------------------------------------------------------------
 * Phase 1: design-token scaffold + smooth-scroll/motion integration.
 * Phase 2: scoped dark-mode contrast, typography rhythm, glassmorphism UI and
 *          modern surface treatments for every template surface (homepage DB
 *          template, x-change marketplace, blog, shop, footer, overlays).
 * Phase 4: glassy empty-state treatments for core query-no-results, WooCommerce
 *          empty cart / store notices and the x-change marketplace grid.
 * Phase 7: neon-lime (#ccff00) GPU-accelerated surfaces for the dynamic
 *          01–04 homepage toolkit cards injected by inc/wtv-home-toolkit.php.
 *
 * Loading:
 *   - Enqueued in <head> (handle `wtv-modern`) so pages without in-body styles
 *     still get tokens immediately.
 *   - Re-printed in wp_footer (handle `wtv-modern-late-css`) so that on pages
 *     whose content emits inline <style> blocks (x-change page content,
 *     shortcodes) equal-specificity rules in this file still win the cascade.
 *     The DB homepage template emits `!important` on nearly every declaration;
 *     rules that must override those repeat `!important` (same weight, later
 *     position wins).
 *
 * Guardrails (see tests/dom-inventory.md):
 *   - All rules scoped under .wtv-* / #wtvBeatportApp / .wtv-beatport-wrapper /
 *     known block classes; bare .container/.btn/.filters are never styled.
 *   - Never apply filter/backdrop-filter to #wtvNeonContainer (its .flicker
 *     animation owns the `filter` property) — it is intentionally not listed.
 *   - No new overlay layers; existing z-index stack (player 9999 / modal 99999)
 *     and all state class contracts (.active, .playing, .flicker) are intact.
 *   - .bp-track-row 8-column/grid contract is never altered (surfaces only).
 *   - Dynamically re-rendered nodes (#marketplaceGrid, .grid-card,
 *     .bp-track-row) are only styled as surfaces/hover — never reveal targets.
 */

:root {
	/* Surfaces / elevation */
	--wtv-modern-surface-1: rgba(10, 12, 18, 0.72);
	--wtv-modern-surface-2: rgba(14, 17, 25, 0.84);
	--wtv-modern-surface-3: rgba(20, 24, 34, 0.92);

	/* Glassmorphism */
	--wtv-modern-glass-bg: rgba(10, 12, 18, 0.55);
	--wtv-modern-glass-bg-strong: rgba(8, 10, 16, 0.78);
	--wtv-modern-glass-border: rgba(255, 255, 255, 0.10);
	--wtv-modern-glass-highlight: rgba(255, 255, 255, 0.06);
	--wtv-modern-glass-blur: 14px;
	--wtv-modern-glass-blur-strong: 20px;
	--wtv-modern-glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
	--wtv-modern-glass-sheen: linear-gradient(
		155deg,
		rgba(255, 255, 255, 0.07) 0%,
		rgba(255, 255, 255, 0.02) 42%,
		rgba(255, 255, 255, 0) 100%
	);

	/* Brand accent (lime) + support */
	--wtv-modern-accent: #c1ff00;
	--wtv-modern-accent-soft: rgba(193, 255, 0, 0.35);
	--wtv-modern-accent-faint: rgba(193, 255, 0, 0.12);

	/* Contrast-safe text levels for dark surfaces (≥ 4.5:1 vs #020305) */
	--wtv-modern-text-strong: #f4f7fb;
	--wtv-modern-text-body: #dbe3ee;
	--wtv-modern-text-muted: #a7b2c4;
	--wtv-modern-text-faint: #7f8b9e;
	--wtv-modern-on-accent: #050703;

	/* Radius scale */
	--wtv-modern-radius-sm: 8px;
	--wtv-modern-radius-md: 12px;
	--wtv-modern-radius-lg: 18px;
	--wtv-modern-radius-xl: 26px;

	/* Shadow scale */
	--wtv-modern-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
	--wtv-modern-shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);
	--wtv-modern-shadow-3: 0 18px 60px rgba(0, 0, 0, 0.55);
	--wtv-modern-shadow-glow: 0 0 0 1px var(--wtv-modern-accent-soft),
		0 8px 32px rgba(193, 255, 0, 0.12);

	/* Motion */
	--wtv-modern-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--wtv-modern-dur-fast: 0.25s;
	--wtv-modern-dur-base: 0.45s;
	--wtv-modern-dur-slow: 0.8s;
}

/* -----------------------------------------------------------------------------
 * Lenis smooth scroll (v1 uses native window scroll, so position:sticky and
 * fixed elements such as the bottom audio player continue to work).
 * -------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* Anchor clearance under the fixed header (matches JS Lenis offset). */
html {
	scroll-padding-top: 96px;
}

/* -----------------------------------------------------------------------------
 * Scroll reveal — GPU-accelerated CSS/IntersectionObserver fade-in.
 *
 * Parallax (GSAP ScrollTrigger scrub positioning that modified inline
 * `transform` on hero/background layers every scroll frame) has been removed:
 * it fought the browser's own rendering and caused container flicker/stutter.
 * In its place, section wrappers are tagged `.fade-on-scroll` by JS and
 * revealed with `.is-revealed`; the compositor owns the opacity/transform
 * transition, so scrolling never triggers layout or paint.
 *
 * The hidden-from state is scoped to `html.wtv-anim-quotes`, a class stamped by
 * an inline <head> script *before first paint*. When that class is absent — JS
 * disabled, no IntersectionObserver, or prefers-reduced-motion — the :not()
 * rule below wins and the sections render fully visible with no transition, so
 * a script failure can never leave content stuck at opacity 0.
 * -------------------------------------------------------------------------- */
html:not(.wtv-anim-quotes) .fade-on-scroll {
	will-change: auto;
	transform: none;
	opacity: 1;
	transition: none;
}

html.wtv-anim-quotes .fade-on-scroll {
	will-change: opacity, transform;
	opacity: 0;
	transform: translate3d(0, 35px, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	perspective: 1000px;
	transition:
		opacity 0.7s ease-out,
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

html.wtv-anim-quotes .fade-on-scroll.is-revealed {
	will-change: auto;
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Header condense state (class toggled by JS; visual treatment in Phase 2). */
#wtv-main-header.wtv-header-scrolled {
	box-shadow: var(--wtv-modern-shadow-2);
}

/* =============================================================================
 * PHASE 2 — BASE CANVAS, DARK-MODE CONTRAST & FOCUS
 * ========================================================================== */

/* Deepest canvas keeps video/parallax letterboxing invisible. */
body {
	background-color: #020305;
	color: var(--wtv-modern-text-strong);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Selection + focus affordances (global, additive, accessibility wins). */
::selection {
	background: rgba(193, 255, 0, 0.85);
	color: #050703;
}

:focus-visible {
	outline: 2px solid var(--wtv-modern-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Slim, dark scrollbars that match the glass chrome. */
* {
	scrollbar-width: thin;
	scrollbar-color: rgba(193, 255, 0, 0.35) rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.03);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(
		180deg,
		rgba(193, 255, 0, 0.45),
		rgba(193, 255, 0, 0.18)
	);
	border-radius: 999px;
	border: 2px solid rgba(2, 3, 5, 0.9);
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(193, 255, 0, 0.65);
}

/* =============================================================================
 * PHASE 2 — TYPOGRAPHY & SPACING RHYTHM
 * ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
	text-wrap: balance;
	letter-spacing: -0.01em;
}

p {
	text-wrap: pretty;
}

a {
	text-underline-offset: 3px;
}

/* Fluid body copy breathing room on dark canvases. */
.wp-block-post-content p,
.wp-block-post-excerpt,
.entry-content p {
	line-height: 1.7;
}

/* =============================================================================
 * PHASE 2 — GLASS SURFACE RECIPE (shared declarations documented here)
 * ---------------------------------------------------------------------------
 * .wtv-modern-glass-surface { background: var(--wtv-modern-glass-sheen),
 *   var(--wtv-modern-glass-bg); backdrop-filter: blur(14px) saturate(140%);
 *   -webkit-backdrop-filter: blur(14px) saturate(140%);
 *   border: 1px solid var(--wtv-modern-glass-border);
 *   box-shadow: var(--wtv-modern-glass-shadow),
 *     inset 0 1px 0 var(--wtv-modern-glass-highlight); }
 * Applied per-component below (no utility classes injected into markup).
 * ========================================================================== */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	/* --- Header lockbox: translucent glass bar (beats DB inline !important) -- */
	.wtv-header-lockbox {
		background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.05),
				rgba(255, 255, 255, 0)
			),
			rgba(4, 6, 10, 0.62) !important;
		-webkit-backdrop-filter: blur(var(--wtv-modern-glass-blur-strong))
			saturate(150%) !important;
		backdrop-filter: blur(var(--wtv-modern-glass-blur-strong)) saturate(150%) !important;
		border-bottom: 1px solid var(--wtv-modern-accent-soft) !important;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55),
			inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
	}

	#wtv-main-header.wtv-header-scrolled .wtv-header-lockbox {
		background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.06),
				rgba(255, 255, 255, 0)
			),
			rgba(3, 4, 8, 0.78) !important;
		box-shadow: 0 14px 44px rgba(0, 0, 0, 0.65),
			inset 0 -1px 0 rgba(255, 255, 255, 0.07) !important;
	}

	/* Nav chips: frosted pills over the hero video. */
	.wtv-nav-item-header {
		background: rgba(255, 255, 255, 0.05) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		backdrop-filter: blur(10px) !important;
		border-color: rgba(193, 255, 0, 0.22) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
	}

	.wtv-nav-item-header:hover {
		background: rgba(193, 255, 0, 0.10) !important;
	}

	/* Hero CTA secondary: glass over video. */
	.wtv-btn-secondary {
		background: rgba(255, 255, 255, 0.05) !important;
		-webkit-backdrop-filter: blur(12px) saturate(140%) !important;
		backdrop-filter: blur(12px) saturate(140%) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	}

	/* Step cards: frosted navy panels (keeps lime top rail from inline CSS). */
	.wtv-step-card {
		background: linear-gradient(
				160deg,
				rgba(28, 44, 74, 0.66),
				rgba(12, 20, 36, 0.74)
			) !important;
		-webkit-backdrop-filter: blur(16px) saturate(135%) !important;
		backdrop-filter: blur(16px) saturate(135%) !important;
		box-shadow: 0 25px 50px rgba(0, 0, 0, 0.55),
			inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	}

	.wtv-zoom-card:hover {
		box-shadow: 0 35px 70px rgba(0, 0, 0, 0.7),
			inset 0 1px 0 rgba(255, 255, 255, 0.12),
			0 0 0 1px rgba(193, 255, 0, 0.35),
			0 0 32px rgba(193, 255, 0, 0.15) !important;
	}

	/* Pricing cards: dark glass sitting on the lime section. */
	.wtv-pricing-card {
		background: linear-gradient(
				170deg,
				rgba(16, 22, 34, 0.82),
				rgba(6, 9, 16, 0.88)
			) !important;
		-webkit-backdrop-filter: blur(18px) saturate(140%) !important;
		backdrop-filter: blur(18px) saturate(140%) !important;
		box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5),
			inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
	}

	.wtv-pricing-featured {
		background: linear-gradient(
				170deg,
				rgba(20, 30, 48, 0.86),
				rgba(8, 12, 22, 0.92)
			) !important;
		box-shadow: 0 35px 70px rgba(0, 0, 0, 0.55),
			inset 0 1px 0 rgba(255, 255, 255, 0.12),
			0 0 0 1px rgba(0, 0, 0, 0.6) !important;
	}

	/* Cookie box: frosted panel. */
	.wtv-isolated-cookie-box {
		background: linear-gradient(
				160deg,
				rgba(255, 255, 255, 0.05),
				rgba(255, 255, 255, 0)
			),
			rgba(8, 11, 18, 0.78) !important;
		-webkit-backdrop-filter: blur(var(--wtv-modern-glass-blur-strong))
			saturate(150%) !important;
		backdrop-filter: blur(var(--wtv-modern-glass-blur-strong)) saturate(150%) !important;
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7),
			inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	}

	/* Footer slim bar: subtle frosted separation. */
	.wtv-footer-slim {
		background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.03),
				rgba(255, 255, 255, 0)
			),
			rgba(2, 3, 5, 0.85);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	/* ---- X-change marketplace (scoped to the app shell) -------------------- */

	#wtvBeatportApp .wtv-platform-nav {
		background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.04),
				rgba(255, 255, 255, 0)
			),
			rgba(2, 3, 6, 0.72);
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		backdrop-filter: blur(14px) saturate(140%);
	}

	#wtvBeatportApp .wtv-nav-tab {
		background: rgba(255, 255, 255, 0.05);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	#wtvBeatportApp .wtv-nav-tab.active {
		background: rgba(193, 255, 0, 0.92);
		box-shadow: 0 0 18px rgba(204, 255, 0, 0.45),
			inset 0 1px 0 rgba(255, 255, 255, 0.35);
	}

	#wtvBeatportApp .filters {
		background: rgba(12, 14, 22, 0.66);
		-webkit-backdrop-filter: blur(14px) saturate(140%);
		backdrop-filter: blur(14px) saturate(140%);
	}

	#wtvBeatportApp .search-box-wrapper {
		background: rgba(255, 255, 255, 0.04);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	#wtvBeatportApp .wtv-card-item {
		background: linear-gradient(
				165deg,
				rgba(24, 28, 40, 0.85),
				rgba(12, 14, 22, 0.92)
			);
		-webkit-backdrop-filter: blur(14px) saturate(135%);
		backdrop-filter: blur(14px) saturate(135%);
	}

	#wtvBeatportApp .bp-track-row {
		background-color: rgba(18, 20, 28, 0.82);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	#wtvBeatportApp .bp-track-row.playing {
		background: rgba(193, 255, 0, 0.06);
	}

	#wtvBeatportApp .wtv-card-footer {
		background: rgba(255, 255, 255, 0.03);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	#wtvBeatportApp .stripe-checkout-box {
		background: rgba(4, 6, 10, 0.7);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	/* Persistent player: frosted dock (z-index and layout untouched). */
	#wtvBeatportApp .bp-persistent-player {
		background: linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.04),
				rgba(255, 255, 255, 0)
			),
			rgba(8, 9, 14, 0.82);
		-webkit-backdrop-filter: blur(var(--wtv-modern-glass-blur-strong))
			saturate(140%);
		backdrop-filter: blur(var(--wtv-modern-glass-blur-strong)) saturate(140%);
		border-top: 1px solid rgba(193, 255, 0, 0.22);
		box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.7),
			inset 0 1px 0 rgba(255, 255, 255, 0.06);
	}

	#wtvBeatportApp .bp-ctrl-btn {
		background: rgba(255, 255, 255, 0.07);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	#wtvBeatportApp .bp-ctrl-btn:hover {
		background: var(--wtv-modern-accent);
		color: var(--wtv-modern-on-accent);
		box-shadow: 0 0 16px rgba(193, 255, 0, 0.4);
	}

	#wtvBeatportApp .wtv-modal-overlay {
		background: rgba(2, 3, 6, 0.72);
		-webkit-backdrop-filter: blur(10px) saturate(120%);
		backdrop-filter: blur(10px) saturate(120%);
	}

	#wtvBeatportApp .wtv-modal-content {
		background: linear-gradient(
				165deg,
				rgba(26, 30, 42, 0.94),
				rgba(10, 12, 20, 0.96)
			);
		-webkit-backdrop-filter: blur(var(--wtv-modern-glass-blur-strong))
			saturate(140%);
		backdrop-filter: blur(var(--wtv-modern-glass-blur-strong)) saturate(140%);
		border-radius: var(--wtv-modern-radius-lg);
		box-shadow: 0 40px 90px rgba(0, 0, 0, 0.75),
			inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}

	/* Blog / shop glass surfaces. */
	.products-block-post-template li {
		background: linear-gradient(
				165deg,
				rgba(22, 26, 38, 0.85),
				rgba(10, 12, 20, 0.92)
			);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	.wp-block-search__input,
	.orderby,
	.wp-block-post-comments-form input:not([type="submit"]),
	.wp-block-post-comments-form textarea {
		background: rgba(255, 255, 255, 0.04) !important;
		-webkit-backdrop-filter: blur(8px) !important;
		backdrop-filter: blur(8px) !important;
	}
}

/* Fallback surfaces when backdrop-filter is unsupported: solid dark glass. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wtv-header-lockbox {
		background: rgba(4, 6, 10, 0.96) !important;
	}

	.wtv-step-card {
		background: linear-gradient(160deg, #16263f 0%, #0c1424 100%) !important;
	}

	.wtv-pricing-card {
		background: #0a0f1a !important;
	}

	.wtv-isolated-cookie-box {
		background: rgba(8, 11, 18, 0.97) !important;
	}
}

/* =============================================================================
 * PHASE 2 — HEADER, NAV & BUTTON MICRO-INTERACTIONS
 * ========================================================================== */

.wtv-register-btn-header {
	background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.35),
			rgba(255, 255, 255, 0)
		),
		#c1ff00 !important;
	background-size: 100% 100% !important;
	position: relative;
	overflow: hidden;
}

.wtv-register-btn-header:hover {
	background: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 0 26px rgba(255, 255, 255, 0.55),
		0 0 12px rgba(193, 255, 0, 0.4) !important;
}

/* Primary CTAs: top sheen + pressable depth (color owned by inline CSS). */
.wtv-btn-primary {
	background-image: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.32),
			rgba(255, 255, 255, 0) 55%
		) !important;
	position: relative;
	overflow: hidden;
}

.wtv-btn-primary:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 0 28px rgba(193, 255, 0, 0.45),
		0 10px 26px rgba(0, 0, 0, 0.45) !important;
}

.wtv-btn-secondary:hover {
	transform: translateY(-2px) !important;
}

.wtv-btn-primary:active,
.wtv-btn-secondary:active,
.wtv-register-btn-header:active {
	transform: translateY(0) scale(0.985) !important;
}

/* =============================================================================
 * PHASE 2 — HOMEPAGE TYPOGRAPHY, CONTRAST & SECTION DETAIL
 * ========================================================================== */

.wtv-hero-title {
	letter-spacing: -1.25px !important;
	text-wrap: balance;
}

.wtv-hero-desc {
	line-height: 1.65 !important;
	letter-spacing: 0.01em !important;
	color: #dce4f0 !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65) !important;
}

.wtv-dynamic-quote {
	letter-spacing: -1px !important;
	text-wrap: balance;
}

.wtv-dynamic-sub {
	line-height: 1.7 !important;
	color: #c3d0e4 !important;
}

.wtv-section-intro {
	margin-bottom: 56px !important;
}

.wtv-pill-tag {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.wtv-step-title {
	letter-spacing: -0.01em;
}

.wtv-step-text {
	line-height: 1.65 !important;
	color: #c2cee0 !important;
}

/* Muted plan text raised to contrast-safe levels. */
.wtv-plan-tag {
	color: var(--wtv-modern-accent) !important;
}

.wtv-price-tag span {
	color: #a8b8cc !important;
}

.wtv-plan-features li {
	color: #e2e9f4 !important;
	line-height: 1.5 !important;
}

.wtv-plan-badge {
	color: #aebdd2 !important;
	border-color: #5a6b80 !important;
	letter-spacing: 1.5px !important;
}

/* Dark-glass cookie copy contrast. */
.wtv-cookie-text-p {
	color: #b7c3d6 !important;
	line-height: 1.5 !important;
}

/* =============================================================================
 * PHASE 2 — FOOTER CONTRAST (inline footer CSS declares no !important)
 * ========================================================================== */

.wtv-footer-link-item-slim {
	color: #9aa7b8;
	transition: color 0.3s var(--wtv-modern-ease),
		text-shadow 0.3s var(--wtv-modern-ease);
}

.wtv-footer-link-item-slim:hover {
	color: var(--wtv-modern-accent);
	text-shadow: 0 0 12px rgba(193, 255, 0, 0.45);
}

.wtv-footer-bottom-slim {
	color: #75819a;
}

/* =============================================================================
 * PHASE 2 — X-CHANGE MARKETPLACE (scoped under the app shell only)
 * ========================================================================== */

/* Hero banner: deeper atmospheric overlay + glass price/actions row. */
#wtvBeatportApp .wtv-hero-banner-wrapper {
	box-shadow: inset 0 18px 40px rgba(193, 255, 0, 0.1),
		0 14px 40px rgba(0, 0, 0, 0.55);
}

#wtvBeatportApp .hero-banner-tag {
	background: rgba(6, 8, 12, 0.7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-color: var(--wtv-modern-accent-soft);
	letter-spacing: 3.5px !important;
}

#wtvBeatportApp .hero-banner-title {
	letter-spacing: -0.5px;
	text-wrap: balance;
}

#wtvBeatportApp .hero-banner-sub {
	letter-spacing: 0.04em;
	color: #e8eefb;
}

#wtvBeatportApp .hero-banner-action-btn {
	background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.35),
			rgba(255, 255, 255, 0) 55%
		),
		var(--wtv-modern-accent);
	box-shadow: 0 0 28px rgba(204, 255, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Section headers: lime label with tighter rhythm. */
#wtvBeatportApp .section-header h2 {
	letter-spacing: 2.5px;
	color: var(--wtv-modern-accent);
}

#wtvBeatportApp .section-subtitle {
	color: var(--wtv-modern-text-muted);
}

/* Filter chips: active state gains glow, inactive gains readable contrast. */
#wtvBeatportApp .filter-btn {
	border-radius: 6px;
	transition: color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

#wtvBeatportApp .filter-btn:hover {
	color: var(--wtv-modern-text-strong);
	border-color: rgba(193, 255, 0, 0.35);
}

#wtvBeatportApp .filter-btn.active {
	background: var(--wtv-modern-accent);
	color: var(--wtv-modern-on-accent);
	font-weight: bold;
	box-shadow: 0 0 14px rgba(193, 255, 0, 0.35);
}

/* Cards: rounded glass, contrast-safe copy, hover lift (surfaces only). */
#wtvBeatportApp .wtv-card-item {
	border-radius: var(--wtv-modern-radius-md);
	border-color: rgba(255, 255, 255, 0.08);
	overflow: hidden;
	transition: transform var(--wtv-modern-dur-base) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-base) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-base) var(--wtv-modern-ease);
}

@media (hover: hover) {
	#wtvBeatportApp .wtv-card-item:hover {
		transform: translateY(-4px);
		border-color: var(--wtv-modern-accent-soft);
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55),
			0 0 24px rgba(193, 255, 0, 0.12);
	}
}

#wtvBeatportApp .wtv-card-title {
	color: #fff;
}

#wtvBeatportApp .wtv-card-desc {
	color: var(--wtv-modern-text-muted);
	line-height: 1.55;
}

#wtvBeatportApp .wtv-card-price {
	color: var(--wtv-modern-accent);
}

/* Track rows: surface + radius only — grid/flex contract untouched. */
#wtvBeatportApp .bp-track-row {
	border-radius: var(--wtv-modern-radius-sm);
	transition: background-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

#wtvBeatportApp .bp-track-row:hover {
	border-color: rgba(193, 255, 0, 0.3);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

#wtvBeatportApp .bp-track-row.playing {
	border-color: var(--wtv-modern-accent);
	box-shadow: 0 0 0 1px rgba(193, 255, 0, 0.25),
		0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Row copy contrast bumps (muted → readable). */
#wtvBeatportApp .bp-row-label,
#wtvBeatportApp .bp-row-genre,
#wtvBeatportApp .bp-row-date {
	color: var(--wtv-modern-text-muted);
}

#wtvBeatportApp .bp-row-artist,
#wtvBeatportApp .bp-row-bpm {
	color: var(--wtv-modern-accent);
}

#wtvBeatportApp .bp-buy-badge {
	background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.3),
			rgba(255, 255, 255, 0) 55%
		),
		var(--wtv-modern-accent);
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(193, 255, 0, 0.3);
}

#wtvBeatportApp .bp-buy-badge:hover {
	background: var(--wtv-modern-accent);
	filter: brightness(1.08);
}

/* Thumb overlay: lime tint on play affordance. */
#wtvBeatportApp .bp-row-thumb {
	border-radius: 6px;
}

#wtvBeatportApp .bp-row-thumb-overlay {
	background: rgba(2, 3, 6, 0.55);
}

/* Player meta contrast + waveform chrome (waveform bars stay JS-owned). */
#wtvBeatportApp .bp-player-title {
	color: #fff;
}

#wtvBeatportApp .bp-player-artist {
	color: var(--wtv-modern-accent);
}

#wtvBeatportApp .bp-player-details,
#wtvBeatportApp .bp-time {
	color: var(--wtv-modern-text-muted);
}

#wtvBeatportApp .bp-waveform-progress {
	border-radius: 6px;
	border-color: rgba(255, 255, 255, 0.08);
}

#wtvBeatportApp .bp-progress-fill-overlay {
	background: rgba(193, 255, 0, 0.18);
	border-right-color: var(--wtv-modern-accent);
}

#wtvBeatportApp .bp-player-left img {
	border-radius: 8px;
	border-color: rgba(193, 255, 0, 0.25);
}

#wtvBeatportApp .bp-player-volume-group {
	color: var(--wtv-modern-text-muted);
}

/* Modal details. */
#wtvBeatportApp .modal-close {
	color: var(--wtv-modern-text-muted);
	transition: color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
	border-radius: 6px;
}

#wtvBeatportApp .modal-close:hover {
	color: var(--wtv-modern-accent);
	transform: rotate(90deg);
}

#wtvBeatportApp .cart-item-row {
	border-color: rgba(255, 255, 255, 0.07);
}

#wtvBeatportApp .cart-item-price {
	color: var(--wtv-modern-accent);
}

#wtvBeatportApp .checkout-email-input {
	background: rgba(2, 3, 6, 0.6);
	border-radius: var(--wtv-modern-radius-sm);
	transition: border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

#wtvBeatportApp .checkout-email-input:focus {
	outline: none;
	border-color: var(--wtv-modern-accent-soft);
	box-shadow: 0 0 0 3px rgba(193, 255, 0, 0.12);
}

#wtvBeatportApp .stripe-btn {
	border-radius: var(--wtv-modern-radius-sm);
	transition: filter var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

#wtvBeatportApp .stripe-btn:hover {
	filter: brightness(1.1);
	box-shadow: 0 8px 24px rgba(99, 91, 255, 0.35);
}

/* =============================================================================
 * PHASE 2 — BLOG, SHOP & FORM SURFACES (theme block classes)
 * ========================================================================== */

/* Pagination chips: dark glass instead of flat primary blue. */
.page-numbers {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: var(--wtv-modern-text-body) !important;
	transition: background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		color var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.page-numbers.current,
.page-numbers:hover {
	background: rgba(193, 255, 0, 0.12) !important;
	border-color: var(--wtv-modern-accent-soft);
	color: var(--wtv-modern-accent) !important;
}

/* Tag / category chips: lime-tinted glass. */
.tag-cloud-link,
.taxonomy-post_tag a {
	background: rgba(193, 255, 0, 0.1) !important;
	border: 1px solid rgba(193, 255, 0, 0.28);
	color: #d8e6b8 !important;
	transition: background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.tag-cloud-link:hover,
.taxonomy-post_tag a:hover {
	background: rgba(193, 255, 0, 0.2) !important;
	border-color: var(--wtv-modern-accent);
	color: #f2ffcf !important;
}

/* Search + form fields: dark glass, lime focus ring. */
.wp-block-search__input,
.orderby,
.wp-block-post-comments-form input:not([type="submit"]),
.wp-block-post-comments-form textarea {
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: var(--wtv-modern-radius-sm) !important;
	color: var(--wtv-modern-text-strong) !important;
	transition: border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.wp-block-search__input:focus,
.orderby:focus,
.wp-block-post-comments-form input:not([type="submit"]):focus,
.wp-block-post-comments-form textarea:focus {
	outline: none !important;
	border-color: var(--wtv-modern-accent-soft) !important;
	box-shadow: 0 0 0 3px rgba(193, 255, 0, 0.12) !important;
}

.wp-block-search__input::placeholder,
.wp-block-post-comments-form input::placeholder,
.wp-block-post-comments-form textarea::placeholder {
	color: var(--wtv-modern-text-faint);
}

/* Shop product tiles: replace light gray drop shadow with dark elevation. */
.products-block-post-template li {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--wtv-modern-radius-md);
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
	transition: transform var(--wtv-modern-dur-base) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-base) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-base) var(--wtv-modern-ease);
}

@media (hover: hover) {
	.products-block-post-template li:hover {
		transform: translateY(-4px);
		border-color: var(--wtv-modern-accent-soft);
		box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55),
			0 0 24px rgba(193, 255, 0, 0.1);
	}
}

/* Scroll-to-top control: glass lozenge. */
.agencygrove-dark-scrool-top::before {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* =============================================================================
 * PHASE 4 — EMPTY STATES
 * ---------------------------------------------------------------------------
 * Glass panels with a lime glyph badge for core query-no-results, WooCommerce
 * empty cart / notices, and the x-change grid + cart modal empty messages
 * (the latter are bare inline-styled divs, matched by structure only).
 * ========================================================================== */

/* Shared panel recipe for every empty state. */
.wp-block-query-no-results,
.wc-block-cart__empty-cart,
.wp-block-woocommerce-empty-cart-block,
.woocommerce-cart .cart-empty,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner,
#wtvBeatportApp #marketplaceGrid > div:not([class]),
#wtvBeatportApp #modalBody > div:not([class]) > div:not([class]) {
	background: var(--wtv-modern-glass-sheen), var(--wtv-modern-glass-bg);
	border: 1px solid var(--wtv-modern-glass-border);
	border-radius: var(--wtv-modern-radius-lg);
	box-shadow: var(--wtv-modern-glass-shadow),
		inset 0 1px 0 var(--wtv-modern-glass-highlight);
	color: var(--wtv-modern-text-muted);
	-webkit-backdrop-filter: blur(var(--wtv-modern-glass-blur)) saturate(135%);
	backdrop-filter: blur(var(--wtv-modern-glass-blur)) saturate(135%);
}

/* Centered, balanced layout for the "no results / nothing here" panels. */
.wp-block-query-no-results,
.wc-block-cart__empty-cart,
.wp-block-woocommerce-empty-cart-block,
.woocommerce-cart .cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
	margin-block: clamp(1rem, 3vw, 2rem);
	border-style: dashed;
	border-color: rgba(193, 255, 0, 0.22);
}

/* Lime glyph badge above the message. */
.wp-block-query-no-results::before,
.wc-block-cart__empty-cart::before,
.wp-block-woocommerce-empty-cart-block::before,
.woocommerce-cart .cart-empty::before {
	content: '\f002';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--wtv-modern-accent);
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wtv-modern-accent-faint);
	border: 1px solid var(--wtv-modern-accent-soft);
	box-shadow: 0 0 26px rgba(193, 255, 0, 0.18);
}

/* Cart empty uses a basket glyph instead of the magnifier. */
.wc-block-cart__empty-cart::before,
.wp-block-woocommerce-empty-cart-block::before,
.woocommerce-cart .cart-empty::before {
	content: '\f291';
}

.wp-block-query-no-results p,
.wc-block-cart__empty-cart p,
.wp-block-woocommerce-empty-cart-block p,
.woocommerce-cart .cart-empty {
	margin: 0 !important;
	color: var(--wtv-modern-text-body);
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0.01em;
}

/* WooCommerce action links inside empty states. */
.wc-block-cart__empty-cart .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	color: var(--wtv-modern-text-strong);
	font-weight: 700;
}

.woocommerce-cart .return-to-shop,
.wp-block-woocommerce-empty-cart-block .wp-block-button {
	margin-top: 0.5rem;
}

.woocommerce-cart .return-to-shop a.button,
.wc-block-cart__empty-cart a.wc-block-components-button,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link {
	background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.3),
			rgba(255, 255, 255, 0) 55%
		),
		var(--wtv-modern-accent) !important;
	color: var(--wtv-modern-on-accent) !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.7rem 1.6rem !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 0 20px rgba(193, 255, 0, 0.3);
	transition: transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.woocommerce-cart .return-to-shop a.button:hover,
.wc-block-cart__empty-cart a.wc-block-components-button:hover,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 28px rgba(193, 255, 0, 0.45);
}

/* Store notices: accent rail + readable copy (info / message / error). */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	padding: 0.9rem 1.15rem 0.9rem 1.35rem;
	border-left: 3px solid var(--wtv-modern-accent);
	font-size: 0.95rem;
	line-height: 1.55;
	position: relative;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
	color: var(--wtv-modern-accent);
}

.woocommerce-message {
	border-left-color: #7ee787;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: #ff6b6b;
	background: var(--wtv-modern-glass-sheen), rgba(40, 12, 18, 0.6);
}

.woocommerce-error::before,
.wc-block-components-notice-banner.is-error::before {
	color: #ff6b6b;
}

.wc-block-components-notice-banner.is-success {
	border-left-color: #7ee787;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner > div {
	color: var(--wtv-modern-text-body) !important;
}

.wc-block-components-notice-banner a,
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
	color: var(--wtv-modern-accent) !important;
}

/* x-change marketplace grid + cart-modal empty messages (bare divs). */
#wtvBeatportApp #marketplaceGrid > div:not([class]) {
	grid-column: 1 / -1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: clamp(2.5rem, 6vw, 4rem) 1.5rem !important;
	margin-block: 0.5rem;
	color: var(--wtv-modern-text-muted) !important;
	text-align: center;
	border-style: dashed;
	border-color: rgba(193, 255, 0, 0.22);
}

#wtvBeatportApp #marketplaceGrid > div:not([class])::before,
#wtvBeatportApp #modalBody > div:not([class]) > div:not([class])::before {
	content: '\f002';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--wtv-modern-accent);
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wtv-modern-accent-faint);
	border: 1px solid var(--wtv-modern-accent-soft);
}

#wtvBeatportApp #modalBody > div:not([class]) > div:not([class]) {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	padding: 2rem 1.25rem !important;
	margin-bottom: 0.5rem;
	color: var(--wtv-modern-text-muted) !important;
}

/* Graceful blank grid while the marketplace app is still hydrating. */
#wtvBeatportApp #marketplaceGrid:empty {
	min-height: 200px;
	border-radius: var(--wtv-modern-radius-lg);
	background: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.02) 0 120px,
		rgba(255, 255, 255, 0) 120px 240px
	);
}

/* =============================================================================
 * PHASE 2 — RESPONSIVE REFINEMENTS
 * ========================================================================== */

@media (max-width: 768px) {
	.wtv-header-lockbox {
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
	}

	.wtv-hero-title {
		letter-spacing: -0.75px !important;
	}

	.wtv-section-intro {
		margin-bottom: 36px !important;
	}

	.wtv-footer-links-slim {
		flex-wrap: wrap;
		gap: 14px 22px;
	}

	.wtv-footer-link-item-slim {
		font-size: 0.68rem;
	}

	.wtv-footer-bottom-slim {
		color: #6d7890;
	}

	#wtvBeatportApp .wtv-modal-content {
		padding: 22px;
		border-radius: var(--wtv-modern-radius-md);
	}

	#wtvBeatportApp .bp-persistent-player {
		/* Blur is costly on mobile chrome; keep the tint, drop the glass. */
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(10, 11, 16, 0.96);
	}

	#wtvBeatportApp .wtv-platform-nav,
	#wtvBeatportApp .filters,
	#wtvBeatportApp .wtv-card-item,
	#wtvBeatportApp .bp-track-row {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Empty states: tighter padding + smaller glyph badges. */
	.wp-block-query-no-results,
	.wc-block-cart__empty-cart,
	.wp-block-woocommerce-empty-cart-block,
	.woocommerce-cart .cart-empty {
		padding: 2rem 1.25rem;
	}

	.wp-block-query-no-results::before,
	.wc-block-cart__empty-cart::before,
	.wp-block-woocommerce-empty-cart-block::before,
	.woocommerce-cart .cart-empty::before {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.15rem;
	}

	#wtvBeatportApp #marketplaceGrid > div:not([class]),
	#wtvBeatportApp #modalBody > div:not([class]) > div:not([class]) {
		padding: 2rem 1.25rem !important;
	}
}

@media (max-width: 600px) {
	.agencygrove-dark-scrool-top::before {
		border: none;
		background: rgba(30, 115, 180, 0.85);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
}

/* -----------------------------------------------------------------------------
 * Reduced motion: hard kill-switch for everything this layer adds. JS also
 * skips Lenis and the scroll-reveal observers in this mode.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html.wtv-anim-quotes .fade-on-scroll {
		will-change: auto;
		transform: none;
		opacity: 1;
		transition: none;
	}

	.wtv-card-item,
	.products-block-post-template li,
	.bp-track-row,
	.wtv-btn-primary,
	.wtv-btn-secondary,
	.wtv-register-btn-header,
	.modal-close {
		transition-duration: 0.01ms !important;
	}

	@media (hover: hover) {
		#wtvBeatportApp .wtv-card-item:hover,
		.products-block-post-template li:hover {
			transform: none;
		}
	}
}


/* =============================================================================
 * PHASE 5/6 — HOMEPAGE QUOTE REVEAL & STANDALONE STATS ROW
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * GPU-accelerated staggered phrase reveal.
 *
 * Each headline phrase is wrapped server-side in a `.clip-wrapper` mask
 * (overflow:hidden) containing a `.word-group`. The group starts translated
 * fully below its mask and slides up, one phrase at a time, when the enclosing
 * `.wtv-home-quote` receives `.is-visible` from the IntersectionObserver.
 *
 * The hidden-from state is scoped to `html.wtv-anim-quotes`, a class stamped by
 * an inline <head> script *before first paint*. When that class is absent — JS
 * disabled, no IntersectionObserver, or prefers-reduced-motion — the :not()
 * rule below wins and the words render fully visible with no transition, so a
 * script failure can never leave the headline stuck hidden.
 * -------------------------------------------------------------------------- */
html:not(.wtv-anim-quotes) .stagger-quote .word-group {
	transform: none;
	transition: none;
}

.stagger-quote .clip-wrapper {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding: 0.08em 0 0.22em;
	margin: -0.08em 0 -0.22em;
}

.stagger-quote .word-group {
	display: inline-block;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	/* Slow, cinematic glide — the mask + delay make the reveal read as a
	 * deliberate phrase-by-phrase slide rather than a snap. */
	transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, 1) * 0.12s);
}

html.wtv-anim-quotes .stagger-quote .word-group {
	transform: translate3d(0, 150%, 0);
}

html.wtv-anim-quotes .wtv-home-quote.is-visible .stagger-quote .word-group {
	transform: translate3d(0, 0, 0);
}

/* The homepage template colours `.wtv-hero-title span` lime. The stagger
 * wrappers are spans too, so neutralise them and let only the original inner
 * `<span>` fragment keep the accent colour. */
.wtv-hero-title .clip-wrapper,
.wtv-hero-title .word-group {
	color: inherit !important;
	text-shadow: none !important;
}

/* -----------------------------------------------------------------------------
 * Standalone full-width stats row — sits below the hero CTA buttons, outside
 * the 100vh / overflow-clipped hero box.
 *
 * The row itself is the GPU-promoted layer: `translate3d(0,0,0)` pins it to its
 * own compositor layer so the scroll never repaints it, and each card only
 * animates opacity/transform (never layout) when it reveals.
 * -------------------------------------------------------------------------- */
.wtv-stats-row-container {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 5vw 64px;
	box-sizing: border-box;
}

html:not(.wtv-anim-quotes) .wtv-stats-row-container {
	will-change: auto;
	transform: none;
	opacity: 1;
	transition: none;
}

html.wtv-anim-quotes .wtv-stats-row-container {
	will-change: transform, opacity;
	transform: translate3d(0, 0, 0);
	opacity: 0;
	transition:
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.9s ease;
}

html.wtv-anim-quotes .wtv-stats-row-container.is-visible {
	opacity: 1;
}

.wtv-stats-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	max-width: 1350px;
	margin: 0 auto;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

/* --- Stat card: dark glass, hairline border, neon-green numerals ---------- */
.wtv-stat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 26px 18px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	background: linear-gradient(160deg, rgba(14, 22, 38, 0.72), rgba(6, 9, 16, 0.62));
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	transform: translate3d(0, 0, 0);
	will-change: transform;
	transition:
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.wtv-anim-quotes .wtv-stat-card {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

html.wtv-anim-quotes .wtv-stats-row-container.is-visible .wtv-stat-card {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Left-to-right cascade as the row reveals. */
html.wtv-anim-quotes .wtv-stats-row-container.is-visible .wtv-stat-card:nth-child(1) { transition-delay: 0ms, 0ms, 0ms, 0ms; }
html.wtv-anim-quotes .wtv-stats-row-container.is-visible .wtv-stat-card:nth-child(2) { transition-delay: 80ms, 80ms, 0ms, 0ms; }
html.wtv-anim-quotes .wtv-stats-row-container.is-visible .wtv-stat-card:nth-child(3) { transition-delay: 160ms, 160ms, 0ms, 0ms; }
html.wtv-anim-quotes .wtv-stats-row-container.is-visible .wtv-stat-card:nth-child(4) { transition-delay: 240ms, 240ms, 0ms, 0ms; }
html.wtv-anim-quotes .wtv-stats-row-container.is-visible .wtv-stat-card:nth-child(5) { transition-delay: 320ms, 320ms, 0ms, 0ms; }

.wtv-stat-card:hover {
	border-color: rgba(204, 255, 0, 0.38);
	box-shadow:
		0 22px 50px rgba(0, 0, 0, 0.55),
		0 0 26px rgba(204, 255, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	transform: translate3d(0, -4px, 0);
}

/* --- Animated SVG icon ---------------------------------------------------- */
.wtv-stat-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(204, 255, 0, 0.3);
	border-radius: 12px;
	background: rgba(204, 255, 0, 0.08);
	color: #ccff00;
	animation: wtv-stat-icon-pulse 3.2s ease-in-out infinite;
}

.wtv-stat-card__icon svg {
	width: 22px;
	height: 22px;
	display: block;
	filter: drop-shadow(0 0 6px rgba(204, 255, 0, 0.55));
}

/* Stagger the pulse so the five icons never blink in lockstep. */
.wtv-stat-card:nth-child(2) .wtv-stat-card__icon { animation-delay: 0.4s; }
.wtv-stat-card:nth-child(3) .wtv-stat-card__icon { animation-delay: 0.8s; }
.wtv-stat-card:nth-child(4) .wtv-stat-card__icon { animation-delay: 1.2s; }
.wtv-stat-card:nth-child(5) .wtv-stat-card__icon { animation-delay: 1.6s; }

@keyframes wtv-stat-icon-pulse {
	0%, 100% {
		border-color: rgba(204, 255, 0, 0.3);
		box-shadow: 0 0 0 rgba(204, 255, 0, 0);
	}
	50% {
		border-color: rgba(204, 255, 0, 0.65);
		box-shadow: 0 0 18px rgba(204, 255, 0, 0.28);
	}
}

/* --- Numerals & caption --------------------------------------------------- */
.wtv-stat-card__value {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	line-height: 1;
}

.wtv-stat-card__num {
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: clamp(1.7rem, 2.6vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -1px;
	color: #ccff00;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 20px rgba(204, 255, 0, 0.35);
}

.wtv-stat-card__suffix {
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 1.1rem;
	font-weight: 700;
	color: rgba(204, 255, 0, 0.6);
}

.wtv-stat-card__label {
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: #9fb2cc;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
	.wtv-stats-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 700px) {
	.wtv-stats-row-container {
		padding: 0 5vw 48px;
	}
	.wtv-stats-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.wtv-stat-card {
		padding: 20px 12px;
		border-radius: 14px;
	}
	.wtv-stat-card__label {
		font-size: 9px;
		letter-spacing: 1.6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.wtv-anim-quotes .wtv-home-quote,
	html.wtv-anim-quotes .stagger-quote .word-group,
	html.wtv-anim-quotes .wtv-stats-row-container,
	html.wtv-anim-quotes .wtv-stat-card {
		will-change: auto;
		transform: none;
		opacity: 1;
		transition: none;
	}
	.wtv-stat-card__icon {
		animation: none;
	}
	.wtv-stat-card:hover {
		transform: none;
	}
}

/* =============================================================================
 * PHASE 7 — HOMEPAGE TOOLKIT CARDS (dynamic 01–04 protocol cards)
 * ---------------------------------------------------------------------------
 * The four static protocol cards (Artists EPK, X-Change Marketplace,
 * Group/Collective, Rooms) get a live preview panel injected by
 * inc/wtv-home-toolkit.php. The panel is markup-only; every surface, rail,
 * row and status pill is styled here, in neon lime (#ccff00), scoped to
 * `.wtv-toolkit-card` so no other `.wtv-step-card` is affected.
 *
 * Motion contract (tests/dom-inventory.md):
 *   - every hover/entrance animates `transform`/`opacity` only (compositor
 *     owned — no layout properties are ever transitioned);
 *   - cards opt into their own layer with `transform: translate3d(0,0,0)` +
 *     `will-change: transform`, so the `translate3d(0,-8px,0)` hover lift
 *     stays on the GPU (it also beats the template's `!important` hover rule
 *     by specificity + late print order);
 *   - the artist rail scrolls natively (scroll-snap + one `scrollLeft` write
 *     per click) rather than animating width/left — no forced reflow.
 * ========================================================================== */

.wtv-toolkit-card {
	--wtv-toolkit-accent: #ccff00;
	--wtv-toolkit-accent-rgb: 204, 255, 0;

	position: relative;
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 22px !important;
	border-top-color: var(--wtv-toolkit-accent) !important;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

/* Card index: a ghosted lime numeral pinned behind the header copy. */
.wtv-toolkit-card .wtv-step-number {
	position: absolute;
	top: 4px;
	right: 14px;
	margin: 0 !important;
	font-size: 9rem !important;
	line-height: 0.82 !important;
	letter-spacing: -8px;
	color: rgba(var(--wtv-toolkit-accent-rgb), 0.13) !important;
	text-shadow: none !important;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	transition:
		color var(--wtv-modern-dur-base) var(--wtv-modern-ease),
		transform var(--wtv-modern-dur-base) var(--wtv-modern-ease);
}

.wtv-toolkit-card:hover .wtv-step-number {
	color: rgba(var(--wtv-toolkit-accent-rgb), 0.26) !important;
	transform: translate3d(0, -6px, 0);
}

/* Header copy sits above the watermark, clear of the numeral's left edge. */
.wtv-toolkit-card .wtv-step-content {
	position: relative;
	z-index: 1;
	padding-right: clamp(3rem, 9%, 6rem);
}

/* --- Panel shell ---------------------------------------------------------- */
.wtv-toolkit-panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wtv-toolkit-list,
.wtv-toolkit-stack {
	display: grid;
	gap: 8px;
}

/* --- Shared "open this path" CTA ------------------------------------------ */
.wtv-toolkit-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding: 12px 16px;
	border: 1px solid rgba(var(--wtv-toolkit-accent-rgb), 0.4);
	border-radius: 999px;
	background: rgba(var(--wtv-toolkit-accent-rgb), 0.07);
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wtv-toolkit-accent);
	transform: translate3d(0, 0, 0);
	will-change: transform;
	transition:
		background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		color var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.wtv-toolkit-cta svg {
	width: 15px;
	height: 15px;
	flex: none;
}

/* --- Icon sizing (shared by rail buttons, slides, rows, pills) ------------ */
.wtv-tk-icon {
	width: 16px;
	height: 16px;
	display: block;
	flex: none;
}

/* --- Card 01: large artist EPK swipe carousel ------------------------------ */
/* Exactly two 9:16 portrait cards per view on desktop: flex children lock to
 * calc(50% - 12px) so two slides + the 24px gap fill the rail precisely.
 * Scroll position advances one card at a time (6 profiles, 5 snap stops). */
.wtv-toolkit-rail {
	display: flex;
	gap: 24px;
	margin: 0;
	/* Vertical room only: horizontal padding would offset the snap maths, and
	 * the padding box doubles as the focus-outline clip region. */
	padding: 6px 0 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Horizontal swipes own the rail; vertical gestures still scroll the page
	 * — never `touch-action: none`, which would trap the finger. */
	touch-action: pan-x pan-y;
	cursor: grab;
}

.wtv-toolkit-rail.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
	-webkit-user-select: none;
}

.wtv-toolkit-rail::-webkit-scrollbar {
	display: none;
}

.wtv-toolkit-rail > * {
	flex: 0 0 calc(50% - 12px); /* Exactly 2 cards in a row */
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.wtv-artist-slide {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16; /* True 9:16 vertical portrait ratio */
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: #0b1220;
	text-decoration: none;
	color: inherit;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	backface-visibility: hidden;
	transition:
		transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.wtv-artist-slide__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	background: #0b1220;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.wtv-artist-slide__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transform: translate3d(0, 0, 0) scale(1);
	will-change: transform;
	backface-visibility: hidden;
	transition: transform var(--wtv-modern-dur-base) var(--wtv-modern-ease);
}

/* Bottom-up scrim so the white name and glass badges always clear AA. */
.wtv-artist-slide__scrim {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(
		180deg,
		rgba(4, 8, 16, 0.35) 0%,
		rgba(4, 8, 16, 0) 34%,
		rgba(4, 8, 16, 0.55) 68%,
		rgba(4, 8, 16, 0.9) 100%
	);
	pointer-events: none;
}

/* Top glass badge — [ Location / Genre ]. */
.wtv-artist-slide__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 2;
	display: block;
	max-width: calc(100% - 24px);
	overflow: hidden;
	padding: 7px 11px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(8, 12, 20, 0.55);
	backdrop-filter: blur(10px) saturate(130%);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.4px;
	line-height: 1.3;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

.wtv-artist-slide__sep {
	color: rgba(var(--wtv-toolkit-accent-rgb), 0.75);
}

/* Bottom overlay body — name + stats bar. */
.wtv-artist-slide__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	padding: 16px 16px 14px;
	pointer-events: none;
}

.wtv-artist-slide__name {
	display: block;
	overflow: hidden;
	font-size: clamp(1.35rem, 2.6vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: translate3d(0, 0, 0);
	transition: color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		text-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

/* Glassmorphic stats bar — [ ♪ 12 Tracks • 👁 1.2K Views ]. */
.wtv-artist-slide__stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	padding: 7px 11px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	background: rgba(8, 12, 20, 0.55);
	backdrop-filter: blur(10px) saturate(130%);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
	width: fit-content;
	max-width: 100%;
}

.wtv-artist-slide__stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.wtv-artist-slide__stat .wtv-tk-icon {
	width: 12px;
	height: 12px;
	color: rgba(var(--wtv-toolkit-accent-rgb), 0.85);
}

.wtv-artist-slide__dot {
	color: rgba(var(--wtv-toolkit-accent-rgb), 0.65);
}

.wtv-artist-slide__go {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	background: rgba(8, 12, 20, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: rgba(var(--wtv-toolkit-accent-rgb), 0.85);
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	transition:
		color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

/* Rail chrome: dots + prev/next. Hidden until JS flags it `.is-ready`, so a
 * script failure never leaves non-functional arrow buttons on the card. */
.wtv-toolkit-rail__ui {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	min-height: 30px;
}

.wtv-toolkit-rail__dots {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wtv-toolkit-rail__dots:empty {
	display: none;
}

/* Author display beats the UA [hidden] rule, so re-state it here: JS hides
 * the rail chrome when a card only has one record to show. */
.wtv-toolkit-rail__ui.is-ready {
	display: flex;
}

.wtv-toolkit-rail__ui[hidden] {
	display: none;
}

.wtv-toolkit-rail__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.26);
	cursor: pointer;
	transform: translate3d(0, 0, 0);
	transition:
		background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.wtv-toolkit-rail__dot[aria-current='true'] {
	background: var(--wtv-toolkit-accent);
	box-shadow: 0 0 10px rgba(var(--wtv-toolkit-accent-rgb), 0.7);
}

.wtv-toolkit-rail__btns {
	display: inline-flex;
	gap: 6px;
}

.wtv-toolkit-rail__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	color: var(--wtv-modern-text-body);
	cursor: pointer;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	transition:
		transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		opacity var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.wtv-toolkit-rail__btn svg {
	width: 14px;
	height: 14px;
}

.wtv-toolkit-rail__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

/* --- Card 02: release rows ------------------------------------------------ */
.wtv-release-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 64px 26px;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.035);
	text-decoration: none;
	color: inherit;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	transition:
		transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.wtv-release-row__art {
	display: block;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border-radius: 9px;
	background: #0b1220;
}

.wtv-release-row__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wtv-release-row__body {
	display: block;
	min-width: 0;
}

.wtv-release-row__title {
	display: block;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--wtv-modern-text-strong);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wtv-release-row__meta {
	display: block;
	overflow: hidden;
	margin-top: 4px;
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wtv-modern-text-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wtv-release-row__wave {
	display: inline-flex;
	justify-content: flex-end;
	color: rgba(var(--wtv-toolkit-accent-rgb), 0.6);
}

.wtv-tk-wave {
	width: 64px;
	height: 20px;
	fill: currentColor;
}

.wtv-release-row__play {
	display: inline-flex;
	color: rgba(var(--wtv-toolkit-accent-rgb), 0.8);
}

.wtv-release-row__play svg {
	width: 24px;
	height: 24px;
}

/* --- Card 03: collective cards -------------------------------------------- */
.wtv-collective-card {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: 6px 14px;
	padding: 13px 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	text-decoration: none;
	color: inherit;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	transition:
		transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.wtv-collective-card__crest {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	grid-row: 1;
	overflow: hidden;
	border-radius: 14px;
	background: #0b1220;
}

.wtv-collective-card__crest img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wtv-collective-card__crest--initials {
	background: linear-gradient(150deg, #16233a, #0b1220);
}

.wtv-toolkit-initials {
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--wtv-toolkit-accent);
	text-shadow: 0 0 14px rgba(var(--wtv-toolkit-accent-rgb), 0.5);
}

.wtv-collective-card__body {
	display: block;
	min-width: 0;
}

.wtv-collective-card__label {
	display: block;
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wtv-toolkit-accent);
}

.wtv-collective-card__name {
	display: block;
	overflow: hidden;
	margin-top: 5px;
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wtv-modern-text-strong);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wtv-collective-card__crew {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 8px;
}

.wtv-crew-stack {
	display: inline-flex;
}

.wtv-crew-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	margin-left: -8px;
	overflow: hidden;
	border: 2px solid #0e1728;
	border-radius: 50%;
	background: #16233a;
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 9px;
	font-weight: 700;
	color: var(--wtv-toolkit-accent);
}

.wtv-crew-stack .wtv-crew-avatar:first-child {
	margin-left: 0;
}

.wtv-crew-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wtv-collective-card__count {
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--wtv-modern-text-muted);
}

.wtv-collective-card__cta {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
	padding-top: 11px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--wtv-toolkit-accent);
}

.wtv-collective-card__cta svg {
	transition: transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

/* --- Card 04: room tags --------------------------------------------------- */
.wtv-room-tag {
	position: relative;
	display: grid;
	gap: 7px;
	padding: 12px 14px 12px 17px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.04);
	text-decoration: none;
	color: inherit;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	transition:
		transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		border-color var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		background var(--wtv-modern-dur-fast) var(--wtv-modern-ease),
		box-shadow var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

.wtv-room-tag::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: rgba(var(--wtv-toolkit-accent-rgb), 0.35);
}

.wtv-room-tag--live::before {
	background: var(--wtv-toolkit-accent);
	box-shadow: 0 0 16px rgba(var(--wtv-toolkit-accent-rgb), 0.85);
}

.wtv-room-tag__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.wtv-room-tag__status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.7px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wtv-toolkit-accent);
}

.wtv-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 10px currentColor;
	animation: wtv-toolkit-dot-pulse 2.4s ease-in-out infinite;
}

.wtv-room-tag--live .wtv-status-dot {
	animation-duration: 1.6s;
}

.wtv-room-tag__topic {
	overflow: hidden;
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.4px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wtv-modern-text-faint);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wtv-room-tag__title {
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wtv-modern-text-strong);
}

.wtv-room-tag__desc {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.83rem;
	line-height: 1.5;
	color: var(--wtv-modern-text-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.wtv-room-tag__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 3px;
}

.wtv-room-tag__meta {
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--wtv-modern-text-faint);
}

.wtv-room-tag__enter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: 'Courier New', ui-monospace, SFMono-Regular, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wtv-toolkit-accent);
}

.wtv-room-tag__enter svg {
	transition: transform var(--wtv-modern-dur-fast) var(--wtv-modern-ease);
}

@keyframes wtv-toolkit-dot-pulse {
	0%,
	100% {
		opacity: 0.35;
		transform: translate3d(0, 0, 0) scale(0.8);
	}
	50% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1.15);
	}
}

/* --- Hover lifts (pointer devices only) ----------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.wtv-toolkit-card:hover {
		transform: translate3d(0, -8px, 0) !important;
	}

	.wtv-toolkit-cta:hover {
		background: var(--wtv-toolkit-accent);
		border-color: var(--wtv-toolkit-accent);
		color: var(--wtv-modern-on-accent);
		transform: translate3d(0, -3px, 0);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45),
			0 0 26px rgba(var(--wtv-toolkit-accent-rgb), 0.45);
	}

	.wtv-artist-slide:hover,
	.wtv-collective-card:hover,
	.wtv-room-tag:hover,
	.wtv-release-row:hover {
		transform: translate3d(0, -6px, 0);
		border-color: rgba(var(--wtv-toolkit-accent-rgb), 0.5);
		box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5),
			0 0 28px rgba(var(--wtv-toolkit-accent-rgb), 0.16);
	}

	.wtv-artist-slide:hover .wtv-artist-slide__name {
		color: var(--wtv-toolkit-accent);
		text-shadow: 0 0 18px rgba(var(--wtv-toolkit-accent-rgb), 0.55);
	}

	.wtv-artist-slide:hover .wtv-artist-slide__media img {
		transform: translate3d(0, 0, 0) scale(1.05);
	}

	.wtv-artist-slide:hover .wtv-artist-slide__go,
	.wtv-collective-card:hover .wtv-collective-card__cta svg,
	.wtv-room-tag:hover .wtv-room-tag__enter svg {
		color: var(--wtv-toolkit-accent);
		transform: translate3d(4px, 0, 0);
	}

	.wtv-toolkit-rail__btn:hover {
		border-color: var(--wtv-toolkit-accent);
		background: rgba(var(--wtv-toolkit-accent-rgb), 0.12);
		color: var(--wtv-toolkit-accent);
		transform: translate3d(0, -2px, 0);
	}
}

/* --- Focus visibility ----------------------------------------------------- */
.wtv-toolkit-card a:focus-visible,
.wtv-toolkit-card button:focus-visible,
.wtv-toolkit-rail:focus-visible {
	outline: 2px solid var(--wtv-toolkit-accent);
	outline-offset: 3px;
}

/* --- Deep-link landing highlight (x-change / rooms bridges) --------------- */
.wtv-deeplink-focus {
	outline: 2px solid var(--wtv-toolkit-accent) !important;
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(var(--wtv-toolkit-accent-rgb), 0.16),
		0 0 34px rgba(var(--wtv-toolkit-accent-rgb), 0.4) !important;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
	.wtv-toolkit-card .wtv-step-number {
		top: 0;
		right: 8px;
		font-size: 7rem !important;
		letter-spacing: -6px;
	}
	.wtv-toolkit-card .wtv-step-content {
		padding-right: clamp(2.5rem, 14%, 5rem);
	}
	/* Still two cards per view — just a tighter gutter so each portrait
	 * gets more of the narrower rail. */
	.wtv-toolkit-rail {
		gap: 16px;
	}
	.wtv-toolkit-rail > * {
		flex-basis: calc(50% - 8px);
	}
}

@media (max-width: 600px) {
	.wtv-toolkit-card {
		gap: 18px !important;
	}
	.wtv-toolkit-card .wtv-step-number {
		font-size: 5.5rem !important;
	}
	/* No height override here: the slide's box is owned by
	 * `aspect-ratio: 9/16` + the flex basis; a pinned height would win over
	 * the ratio and squash the portrait. */
	.wtv-toolkit-rail {
		gap: 12px;
	}
	.wtv-toolkit-rail > * {
		flex-basis: calc(50% - 6px);
	}
	.wtv-artist-slide {
		border-radius: 12px;
	}
	.wtv-artist-slide__badge {
		font-size: 9px;
		letter-spacing: 1px;
	}
	.wtv-artist-slide__body {
		padding: 14px 12px 12px;
	}
	.wtv-artist-slide__stats {
		font-size: 9px;
		gap: 6px;
		padding: 6px 9px;
	}
	.wtv-release-row {
		grid-template-columns: 40px minmax(0, 1fr) 26px;
		gap: 10px;
	}
	.wtv-release-row__art {
		width: 40px;
		height: 40px;
	}
	.wtv-release-row__wave {
		display: none;
	}
	.wtv-toolkit-rail__btn {
		width: 34px;
		height: 34px;
	}
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wtv-toolkit-card,
	.wtv-toolkit-cta,
	.wtv-artist-slide,
	.wtv-artist-slide__media img,
	.wtv-artist-slide__name,
	.wtv-release-row,
	.wtv-collective-card,
	.wtv-room-tag,
	.wtv-toolkit-rail,
	.wtv-toolkit-rail__btn,
	.wtv-toolkit-rail__dot,
	.wtv-toolkit-card .wtv-step-number,
	.wtv-artist-slide__go,
	.wtv-collective-card__cta svg,
	.wtv-room-tag__enter svg {
		transition-duration: 0.01ms !important;
		transition-property: opacity, color, background, border-color !important;
	}

	.wtv-toolkit-card:hover,
	.wtv-artist-slide:hover,
	.wtv-artist-slide:hover .wtv-artist-slide__media img,
	.wtv-release-row:hover,
	.wtv-collective-card:hover,
	.wtv-room-tag:hover,
	.wtv-toolkit-cta:hover,
	.wtv-toolkit-rail__btn:hover,
	.wtv-toolkit-card:hover .wtv-step-number,
	.wtv-artist-slide:hover .wtv-artist-slide__go,
	.wtv-collective-card:hover .wtv-collective-card__cta svg,
	.wtv-room-tag:hover .wtv-room-tag__enter svg {
		transform: translate3d(0, 0, 0) !important;
	}

	.wtv-toolkit-rail {
		scroll-behavior: auto;
	}
	.wtv-status-dot {
		animation: none;
		opacity: 1;
	}
}