/**
 * CSS mirrors Motion/framer animations from the React app (AnimatedBackground + Hero accents).
 */

@keyframes designtab-ab-float-1 {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(50px, -40px) scale(1.1);
	}
	66% {
		transform: translate(-30px, 30px) scale(0.95);
	}
}

@keyframes designtab-ab-float-2 {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(-40px, 50px) scale(0.9);
	}
	66% {
		transform: translate(60px, -30px) scale(1.15);
	}
}

@keyframes designtab-ab-float-3 {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	40% {
		transform: translate(40px, -30px) scale(1.2);
	}
	70% {
		transform: translate(-50px, 40px) scale(0.9);
	}
}

@keyframes designtab-ab-float-4 {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	35% {
		transform: translate(-50px, 40px) scale(0.95);
	}
	65% {
		transform: translate(40px, -50px) scale(1.1);
	}
}

@keyframes designtab-ab-float-5 {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	40% {
		transform: translate(60px, -50px) scale(1.05);
	}
	75% {
		transform: translate(-40px, 30px) scale(0.98);
	}
}

@keyframes designtab-dot-y {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.3;
	}
	50% {
		transform: translateY(-30px);
		opacity: 0.6;
	}
}

@keyframes designtab-dot-spin {
	0% {
		transform: rotate(0deg) scale(1);
		opacity: 0.3;
	}
	50% {
		transform: rotate(180deg) scale(1.2);
		opacity: 0.6;
	}
	100% {
		transform: rotate(360deg) scale(1);
		opacity: 0.3;
	}
}

@keyframes designtab-line-pulse {
	0%,
	100% {
		opacity: 0.1;
	}
	50% {
		opacity: 0.4;
	}
}

@keyframes designtab-center-pulse {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.15;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.1);
		opacity: 0.25;
	}
}

@keyframes designtab-hero-shape-1 {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-20px) rotate(5deg);
	}
}

@keyframes designtab-hero-shape-2 {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(15px) rotate(-10deg);
	}
}

@keyframes designtab-hero-shape-3 {
	0%,
	100% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(10px, -25px);
	}
}

@keyframes designtab-hero-shape-4 {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(20px) rotate(15deg);
	}
}

@keyframes designtab-hero-shape-5 {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-15px) scale(1.1);
	}
}

@keyframes designtab-hero-card-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

@keyframes designtab-scroll-mouse {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(10px);
	}
}

@keyframes designtab-scroll-dot {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(12px);
	}
}

.designtab-ab-orb-1 {
	animation: designtab-ab-float-1 20s ease-in-out infinite;
}

.designtab-ab-orb-2 {
	animation: designtab-ab-float-2 25s ease-in-out infinite;
}

.designtab-ab-orb-3 {
	animation: designtab-ab-float-3 22s ease-in-out infinite;
}

.designtab-ab-orb-4 {
	animation: designtab-ab-float-4 28s ease-in-out infinite;
}

.designtab-ab-orb-5 {
	animation: designtab-ab-float-5 24s ease-in-out infinite;
}

.designtab-ab-dot-a {
	animation: designtab-dot-y 4s ease-in-out infinite;
}

.designtab-ab-dot-b {
	animation: designtab-dot-y 5s ease-in-out infinite 1s;
}

.designtab-ab-dot-c {
	animation: designtab-dot-spin 6s ease-in-out infinite;
}

.designtab-ab-dot-d {
	animation: designtab-dot-y 5.5s ease-in-out infinite 0.5s;
}

.designtab-ab-dot-e {
	animation: designtab-dot-y 3s ease-in-out infinite 2s;
}

.designtab-ab-line-1 {
	animation: designtab-line-pulse 4s ease-in-out infinite;
}

.designtab-ab-line-2 {
	animation: designtab-line-pulse 5s ease-in-out infinite 1s;
}

.designtab-ab-center-glow {
	animation: designtab-center-pulse 8s ease-in-out infinite;
}

.designtab-hero-shape-1 {
	animation: designtab-hero-shape-1 4s ease-in-out infinite;
}

.designtab-hero-shape-2 {
	animation: designtab-hero-shape-2 5s ease-in-out infinite 0.5s;
}

.designtab-hero-shape-3 {
	animation: designtab-hero-shape-3 6s ease-in-out infinite 1s;
}

.designtab-hero-shape-4 {
	animation: designtab-hero-shape-4 5.5s ease-in-out infinite 1.5s;
}

.designtab-hero-shape-5 {
	animation: designtab-hero-shape-5 4.5s ease-in-out infinite 2s;
}

.designtab-hero-card {
	animation: designtab-hero-card-float 6s ease-in-out infinite;
}

.designtab-scroll-wrap {
	animation: designtab-scroll-mouse 2s ease-in-out infinite;
}

.designtab-scroll-dot {
	animation: designtab-scroll-dot 2s ease-in-out infinite;
}

.designtab-ab-particle-a {
	animation: designtab-dot-y 8s ease-in-out infinite;
}

.designtab-ab-particle-b {
	animation: designtab-dot-y 7s ease-in-out infinite 1.5s;
}

.designtab-ab-particle-c {
	animation: designtab-dot-y 6s ease-in-out infinite 3s;
}