/* Block: Hero Animation
 * Layout + animation loop (CSS-only) for figure, shadow and sparkles.
 */

.hero-animation-block {
	width: 100%;
	overflow: hidden;
}

.hero-animation-container {
	position: relative;
    width: 100%;
    max-width: 740px;
    aspect-ratio: 10 / 11;
    margin: 0 auto;
}

.hero-animation__shadow {
	position: absolute;
	left: 50%;
	bottom: -15px;
	transform: translateX(-50%);
	width: min(340px, 45vw);
	height: auto;
	z-index: 1;
	animation: heroShadowPulse 4s ease-in-out infinite;
	will-change: transform, opacity;
}

.hero-animation__figure {
	position: absolute;
	left: 50%;
	top: 5%;
	transform: translateX(-50%);
	width: min(635px, 72vw);
	height: auto;
	z-index: 2;
	animation: heroFigureFloat 4s ease-in-out infinite;
	will-change: transform;
}

.hero-animation__sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.hero-animation__sparkle {
	position: absolute;
	left: var(--sparkle-x);
	top: var(--sparkle-y);
	width: var(--sparkle-size);
	height: var(--sparkle-size);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	opacity: 0;
	animation: sparkleEfervescence var(--sparkle-duration) ease-out infinite;
	animation-delay: var(--sparkle-delay);
	will-change: transform, opacity;
}

.hero-animation__sparkle--sm {
	--sparkle-size: 22px;
}

.hero-animation__sparkle--md {
	--sparkle-size: 32px;
}

.hero-animation__sparkle--lg {
	--sparkle-size: 45px;
}
@keyframes heroFigureFloat {
	0% {
		transform: translateX(-50%) translateY(0);
	}

	50% {
		transform: translateX(-50%) translateY(-10px);
	}

	100% {
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes heroShadowPulse {
	0% {
		transform: translateX(-50%) scale(1.02);
		opacity: 0.46;
	}

	50% {
		transform: translateX(-50%) scale(0.78);
		opacity: 0.22;
	}

	100% {
		transform: translateX(-50%) scale(1.02);
		opacity: 0.46;
	}
}

@keyframes sparkleEfervescence {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.9);
	}

	12% {
		opacity: 1;
	}

	70% {
		opacity: 0;
		transform: translateY(-38px) scale(1.05);
	}

	100% {
		opacity: 0;
		transform: translateY(-38px) scale(1.05);
	}
}

.hero-animation--reduced-motion .hero-animation__shadow,
.hero-animation--reduced-motion .hero-animation__figure,
.hero-animation--reduced-motion .hero-animation__sparkle {
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.hero-animation-block,
	.hero-animation__shadow,
	.hero-animation__figure,
	.hero-animation__sparkle {
		animation: none !important;
	}
}