/* deXcon Motion 1.0.1 */

.dxm-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
}

.dxm-layer {
	position: absolute;
	inset: 0;
}

/* ---------- Wave ---------- */

.dxm-wave {
	transform-origin: 50% 100%;
	will-change: transform;
}

/* Einfließen: weiche Kante wandert von links nach rechts */
.dxm-wave.dxm-intro {
	-webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
	        mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
	-webkit-mask-size: 250% 100%;
	        mask-size: 250% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	        mask-position: 100% 0;
}

.dxm-wave.dxm-intro.dxm-in {
	animation: dxm-flow-in 2.6s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes dxm-flow-in {
	from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
	to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
}

/* Danach: ruhiges Atmen der Linien */
.dxm-wave.dxm-live {
	animation: dxm-breathe 9s ease-in-out infinite alternate;
}

@keyframes dxm-breathe {
	from { transform: scale(1.03) translate3d(0, 0, 0); }
	to   { transform: scale(1.03, 1.08) translate3d(-1.2%, 0, 0); }
}

/* Energie-Impuls, der entlang der Linien läuft (Wave dient als Maske) */
.dxm-glint {
	opacity: 0;
	background-image: linear-gradient(100deg, transparent 42%, var(--dxm-glint, rgba(0, 178, 235, .85)) 50%, transparent 58%);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

.dxm-glint.dxm-live {
	animation: dxm-glint 7s cubic-bezier(.45, 0, .25, 1) 1.2s infinite;
}

@keyframes dxm-glint {
	0%   { background-position: 100% 0; opacity: 0; }
	8%   { opacity: 1; }
	55%  { background-position: 0% 0;   opacity: 1; }
	62%, 100% { background-position: 0% 0; opacity: 0; }
}

/* ---------- Windrad ---------- */

.dxm-hub {
	position: absolute;
	width: 0;
	height: 0;
}

.dxm-squash {
	position: absolute;
	inset: 0;
	transform: scaleX(var(--dxm-squash, 1));
}

.dxm-rotor {
	position: absolute;
	max-width: none !important;
	transform: rotate(var(--dxm-start, 0deg));
	will-change: transform;
	animation:
		dxm-spinup var(--dxm-spinup, 4s) cubic-bezier(.55, .085, .68, .53) .6s 1 both,
		dxm-spin var(--dxm-period, 6s) linear calc(var(--dxm-spinup, 4s) + .6s) infinite;
}

@keyframes dxm-spinup {
	from { transform: rotate(var(--dxm-start, 0deg)); }
	to   { transform: rotate(calc(var(--dxm-start, 0deg) + 120deg)); }
}

/* 3 Blätter -> 120° sind optisch identisch, daher nahtloser Übergang */
@keyframes dxm-spin {
	from { transform: rotate(var(--dxm-start, 0deg)); }
	to   { transform: rotate(calc(var(--dxm-start, 0deg) + 360deg)); }
}

.dxm-spinner {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 34%, #fdfeff 0%, #eef1f5 45%, #d3d8e1 78%, #b8bfcc 100%);
	box-shadow: 0 0 1px rgba(80, 90, 110, .35);
}

/* Außerhalb des Viewports pausieren (spart Akku/CPU) */
.dxm-paused .dxm-rotor,
.dxm-paused .dxm-wave,
.dxm-paused .dxm-glint {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.dxm-stage * {
		animation: none !important;
	}
}