/*
 * Gemeinsame Dekorationen für medizinische und kosmetische Bereiche.
 *
 * Position und Geometrie sind für beide Bereiche identisch. Nur das jeweilige
 * Bild wird vom Inhaltsblock geliefert. Die permanente Grundbewegung läuft als
 * CSS-Animation auf dem Bild; decor-motion.js ergänzt nur die Pointer-Reaktion.
 */
.hm-decor-host {
	position: relative;
	isolation: isolate;
}

.hm-decor {
	position: absolute;
	z-index: -1;
	pointer-events: none;
	user-select: none;
	will-change: transform;
	transition: transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.hm-decor__image {
	display: block;
	width: 100%;
	height: auto;
	animation: hm-decor-float var(--hm-decor-duration, 20s) linear infinite;
	animation-delay: var(--hm-decor-delay, 0s);
	will-change: transform;
}

.hm-decor--services {
	--hm-decor-float-x: 8px;
	--hm-decor-float-y: 10px;
	--hm-decor-duration: 18s;
	--hm-decor-delay: -3s;
	right: 0;
	bottom: 2rem;
	width: clamp(8.5rem, 12vw, 12.5rem);
}

.hm-decor--success {
	--hm-decor-float-x: 8px;
	--hm-decor-float-y: 8px;
	--hm-decor-duration: 20s;
	--hm-decor-delay: -8s;
	bottom: 0;
	left: 12%;
	width: clamp(12.5rem, 16vw, 16.875rem);
}

.hm-decor--team {
	--hm-decor-float-x: 7px;
	--hm-decor-float-y: 9px;
	--hm-decor-duration: 20s;
	--hm-decor-delay: -12s;
	bottom: 0;
	left: 0;
	width: clamp(8rem, 11vw, 11.75rem);
}

.hm-decor--about {
	--hm-decor-float-x: 6px;
	--hm-decor-float-y: 7px;
	--hm-decor-duration: 22s;
	--hm-decor-delay: -5s;
	right: 0;
	bottom: -4rem;
	width: clamp(5.5rem, 7.5vw, 7rem);
}

.hm-decor--appointment {
	--hm-decor-float-x: 8px;
	--hm-decor-float-y: 6px;
	--hm-decor-duration: 19s;
	--hm-decor-delay: -10s;
	top: 0;
	left: clamp(1rem, 5vw, 5.5rem);
	width: clamp(7.5rem, 10vw, 11rem);
}

.hm-decor--page-hero {
	--hm-decor-float-x: 6px;
	--hm-decor-float-y: 7px;
	--hm-decor-duration: 21s;
	--hm-decor-delay: -14s;
	right: var(--hm-layout-gutter);
	bottom: clamp(1rem, 2vw, 2rem);
	width: clamp(8rem, 11vw, 12rem);
}

@keyframes hm-decor-float {
	0%,
	100% {
		transform: translate3d(calc(0px - var(--hm-decor-float-x, 6px)), 0, 0) rotate(-0.3deg);
	}

	25% {
		transform: translate3d(0, calc(0px - var(--hm-decor-float-y, 6px)), 0) rotate(0.2deg);
	}

	50% {
		transform: translate3d(var(--hm-decor-float-x, 6px), 0, 0) rotate(0.3deg);
	}

	75% {
		transform: translate3d(0, var(--hm-decor-float-y, 6px), 0) rotate(-0.2deg);
	}
}

@media (max-width: 56rem) {
	.hm-decor--services,
	.hm-decor--team {
		width: clamp(6.5rem, 20vw, 9rem);
	}

	.hm-decor--success {
		left: 0;
		width: clamp(9rem, 32vw, 12.5rem);
	}

	.hm-decor--about {
		right: 0;
		bottom: -3.5rem;
		width: clamp(5rem, 16vw, 6.5rem);
	}

	.hm-decor--appointment {
		left: 1rem;
		width: clamp(6.5rem, 20vw, 8rem);
	}

	.hm-decor--page-hero {
		right: var(--hm-layout-gutter);
		bottom: 1rem;
		width: clamp(6.5rem, 20vw, 8.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hm-decor {
		transform: none !important;
		transition: none;
		will-change: auto;
	}

	.hm-decor__image {
		animation: none;
		will-change: auto;
	}
}