@keyframes yps-gradient-shift {
	0%, 100% { background-position: 0% center; }
	50% { background-position: 100% center; }
}

@keyframes yps-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-18px) scale(1.03); }
}

@keyframes yps-float-slow {
	0%, 100% { transform: translate(0, 0); }
	33% { transform: translate(12px, -20px); }
	66% { transform: translate(-8px, 10px); }
}

@keyframes yps-pulse-glow {
	0%, 100% { opacity: 0.45; transform: scale(1); }
	50% { opacity: 0.85; transform: scale(1.08); }
}

@keyframes yps-mesh-drift {
	0% { transform: translate(0, 0); }
	100% { transform: translate(40px, 40px); }
}

@keyframes yps-shimmer {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}

@keyframes yps-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes yps-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

@keyframes yps-scale-in {
	from { opacity: 0; transform: scale(0.92) translateY(20px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes yps-border-spin {
	to { --yps-angle: 360deg; }
}

@keyframes yps-how-dot {
	0% { left: 0; opacity: 0; transform: scale(0.6); }
	12% { opacity: 1; transform: scale(1); }
	88% { opacity: 1; transform: scale(1); }
	100% { left: calc(100% - 10px); opacity: 0; transform: scale(0.6); }
}

@keyframes yps-how-shimmer {
	0% { background-position: 200% center; }
	100% { background-position: -200% center; }
}

@keyframes yps-how-line-in {
	from { opacity: 0; transform: translateX(-6px); }
	to { opacity: 1; transform: none; }
}

@keyframes yps-arch-pulse {
	0%, 100% { opacity: 0.45; transform: translateX(0); }
	50% { opacity: 1; transform: translateX(3px); }
}

@property --yps-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}