/* Hero ElegantShape animations — CSS port of the framer-motion setup
 * in next-frontend/components/ui/shape-landing-hero.tsx.
 *
 * Outer wrapper (.fbr-shape) runs the intro: fades in while translating from
 * y:-150 to y:0 and rotating from (target-15) to target.  The inner node
 * (.fbr-shape-inner) loops a gentle vertical float.
 */

.fbr-shape {
	opacity: 0;
	animation: fbr-shape-intro 2.4s cubic-bezier(0.23, 0.86, 0.39, 0.96) forwards;
	will-change: transform, opacity;
}

.fbr-shape-inner {
	animation: fbr-shape-float 12s ease-in-out infinite;
	will-change: transform;
}

@keyframes fbr-shape-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(15px); }
}

/* Per-shape intro variants — each combines its delay and final rotation. */

.fbr-shape-1 { animation-delay: 0.3s; --fbr-rotate-from: -3deg;  --fbr-rotate-to: 12deg; }
.fbr-shape-2 { animation-delay: 0.5s; --fbr-rotate-from: -30deg; --fbr-rotate-to: -15deg; }
.fbr-shape-3 { animation-delay: 0.4s; --fbr-rotate-from: -23deg; --fbr-rotate-to: -8deg; }
.fbr-shape-4 { animation-delay: 0.6s; --fbr-rotate-from: 5deg;   --fbr-rotate-to: 20deg; }
.fbr-shape-5 { animation-delay: 0.7s; --fbr-rotate-from: -40deg; --fbr-rotate-to: -25deg; }

@keyframes fbr-shape-intro {
	from {
		opacity: 0;
		transform: translateY(-150px) rotate(var(--fbr-rotate-from, 0deg));
	}
	to {
		opacity: 1;
		transform: translateY(0) rotate(var(--fbr-rotate-to, 0deg));
	}
}

/* The opacity portion of the original motion ran for 1.2s while the transform
 * ran for 2.4s.  CSS cannot easily split track durations, so we approximate by
 * completing opacity at the halfway mark of the keyframe timeline. */
@keyframes fbr-shape-intro {
	0% {
		opacity: 0;
		transform: translateY(-150px) rotate(var(--fbr-rotate-from, 0deg));
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotate(var(--fbr-rotate-to, 0deg));
	}
}

@media (prefers-reduced-motion: reduce) {
	.fbr-shape,
	.fbr-shape-inner {
		animation: none;
	}
	.fbr-shape {
		opacity: 1;
	}
	.fbr-shape-1 { transform: rotate(12deg); }
	.fbr-shape-2 { transform: rotate(-15deg); }
	.fbr-shape-3 { transform: rotate(-8deg); }
	.fbr-shape-4 { transform: rotate(20deg); }
	.fbr-shape-5 { transform: rotate(-25deg); }
}