/* MODZGPX 3D hero (bike stage). The hero is always dark: it takes the theme's dark palette in both modes. */
.kreativa-hero:has(.mgh3d) {
	color-scheme: dark;
	--wp--preset--color--base: var(--wp--preset--color--dark-base);
	--wp--preset--color--surface: var(--wp--preset--color--dark-surface);
	--wp--preset--color--contrast: var(--wp--preset--color--dark-contrast);
	--wp--preset--color--muted: var(--wp--preset--color--dark-muted);
	--wp--preset--color--border: var(--wp--preset--color--dark-border);
	--wp--preset--color--primary: var(--wp--preset--color--dark-primary);
	--wp--preset--color--primary-dark: var(--wp--preset--color--dark-primary-dark);
	--wp--preset--color--primary-soft: var(--wp--preset--color--dark-primary-soft);
	--wp--preset--color--accent: var(--wp--preset--color--dark-accent);
	--wp--preset--color--accent-soft: var(--wp--preset--color--dark-accent-soft);
	background: #07060d !important;
	color: var(--wp--preset--color--contrast);
	position: relative;
	overflow: hidden;
}

.mgh3d { position: relative; width: 100%; aspect-ratio: 1 / 0.9; }
.mgh3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.mgh3d > img { position: absolute; inset: 6% 4%; width: 92%; height: 88%; object-fit: cover; border-radius: 24px; }
.mgh3d.is-3d > img { display: none; }
.kreativa-hero-art:has(.mgh3d) .kreativa-float { z-index: 2; }

/* Desktop: hero3d.js moves the stage to fill the hero; the text sits on top. */
.kreativa-hero.has-bike3d { min-height: min(86vh, 760px); display: flex; flex-direction: column; justify-content: center; isolation: isolate; }
.kreativa-hero.has-bike3d > .mgh3d { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; max-width: none !important; margin: 0 !important; } /* stage, then the fade, then the text */
.kreativa-hero.has-bike3d > :not(.mgh3d) { position: relative; z-index: 1; }
.kreativa-hero.has-bike3d .kreativa-hero-art { position: relative; min-height: 420px; pointer-events: none; }
.kreativa-hero.has-bike3d .kreativa-hero-art > * { pointer-events: auto; }
/* a soft fade behind the headline keeps it readable over the type bands */
.kreativa-hero.has-bike3d::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient(90deg, rgb(7 6 13 / 0.92) 0%, rgb(7 6 13 / 0.7) 32%, rgb(7 6 13 / 0) 58%); }
/* while the bike model downloads: a small neon spinner where the bike will stand */
.mgh3d.is-3d:not(.is-loaded)::after { content: ""; position: absolute; left: 50%; top: 52%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
	border: 2px solid rgb(160 143 255 / 0.25); border-top-color: #a08fff; animation: mgh3d-spin 0.9s linear infinite; z-index: 1; }
.kreativa-hero.has-bike3d > .mgh3d.is-3d:not(.is-loaded)::after { left: 68%; }
@keyframes mgh3d-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .mgh3d.is-3d:not(.is-loaded)::after { animation-duration: 3s; } }