/**
 * Comprehensive Animation Library
 * Provides entrance, loading, interaction, and data visualization animations
 */

/* ===== UTILITY CLASSES ===== */

.cyber-glow {
	box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
}

/* ===== ENTRANCE ANIMATIONS ===== */

@keyframes cyber-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes cyber-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes cyber-zoom-in {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes cyber-zoom-out {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(0.8);
	}
}

@keyframes cyber-slide-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes cyber-slide-down {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes cyber-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes cyber-slide-in-right {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes cyber-bounce-in {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		transform: scale(1);
	}
}

/* ===== LOADING ANIMATIONS ===== */

@keyframes cyber-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes cyber-pulse {
	0% { transform: scale(1); opacity: 0.6; }
	50% { transform: scale(1.05); opacity: 1; }
	100% { transform: scale(1); opacity: 0.6; }
}

@keyframes cyber-pulse-ring {
	0% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 var(--cyber-accent-primary);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
	}
	100% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
	}
}

@keyframes cyber-dots {
	0%, 20% {
		opacity: 0.2;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.2;
	}
}

@keyframes cyber-shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

/* ===== INTERACTION ANIMATIONS ===== */

@keyframes cyber-shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-10px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(10px);
	}
}

@keyframes cyber-wiggle {
	0%, 100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-5deg);
	}
	75% {
		transform: rotate(5deg);
	}
}

@keyframes cyber-glow-pulse {
	0%, 100% {
		box-shadow: 0 0 5px var(--cyber-accent-primary),
		            0 0 10px var(--cyber-accent-primary);
	}
	50% {
		box-shadow: 0 0 20px var(--cyber-accent-primary),
		            0 0 30px var(--cyber-accent-primary),
		            0 0 40px var(--cyber-accent-primary);
	}
}

@keyframes cyber-click {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.95);
	}
}

/* ===== DATA VISUALIZATION ANIMATIONS ===== */

@keyframes cyber-bar-fill {
	from {
		width: 0%;
	}
	to {
		width: var(--target-width, 100%);
	}
}

@keyframes cyber-counter-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cyber-progress-fill {
	from {
		transform: scaleX(0);
		transform-origin: left;
	}
	to {
		transform: scaleX(1);
		transform-origin: left;
	}
}

/* ===== BACKGROUND EFFECTS ===== */

@keyframes cyber-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes cyber-grid-scan {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 100%;
	}
}

@keyframes cyber-wave {
	0% {
		transform: translateX(0) translateY(0);
	}
	100% {
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes cyber-particles {
	0% {
		opacity: 0;
		transform: translateY(0) scale(1);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(-100px) scale(0.5);
	}
}

/* ===== SKELETON LOADING ===== */

.cyber-skeleton {
	background: linear-gradient(
		90deg,
		var(--cyber-bg-secondary) 25%,
		var(--cyber-bg-tertiary) 50%,
		var(--cyber-bg-secondary) 75%
	);
	background-size: 200% 100%;
	animation: cyber-shimmer 1.5s infinite;
	border-radius: var(--cyber-radius-sm);
}

/* ===== BUTTON ANIMATIONS ===== */

.cyber-btn:active {
	animation: cyber-click 0.1s ease-out;
}

.cyber-btn-hover-glow:hover {
	animation: cyber-glow-pulse 2s infinite;
}

/* ===== CARD ANIMATIONS ===== */

.cyber-card-hover:hover {
	animation: cyber-glow-pulse 2s infinite;
}

/* ===== SUCCESS/ERROR FEEDBACK ===== */

.cyber-success-animation {
	animation: cyber-bounce-in 0.5s ease-out;
}

.cyber-error-animation {
	animation: cyber-shake 0.5s ease-out;
}

/* ===== NOTIFICATION ANIMATIONS ===== */

.cyber-notification-enter {
	animation: cyber-slide-in-right 0.3s ease-out;
}

.cyber-notification-exit {
	animation: cyber-slide-out-right 0.3s ease-out;
}

@keyframes cyber-slide-out-right {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(20px);
	}
}

/* ===== LOADING SPINNER ===== */

.cyber-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--cyber-bg-tertiary);
	border-top-color: var(--cyber-accent-primary);
	border-radius: 50%;
	animation: cyber-spin 0.8s linear infinite;
}

/* ===== PULSING DOT ===== */

.cyber-dot-pulse {
	animation: cyber-pulse-ring 1.5s infinite;
}

/* ===== TEXT EFFECTS ===== */

@keyframes cyber-text-flicker {
	0%, 100% {
		opacity: 1;
	}
	41%, 43% {
		opacity: 0.8;
	}
	45%, 47% {
		opacity: 1;
	}
	49% {
		opacity: 0.9;
	}
}

.cyber-text-flicker {
	animation: cyber-text-flicker 3s infinite;
}

/* ===== TRANSITION UTILITIES ===== */

.cyber-transition-fast {
	transition: all 0.15s ease-out;
}

.cyber-transition-base {
	transition: all 0.3s ease-out;
}

.cyber-transition-slow {
	transition: all 0.5s ease-out;
}

/* ===== ADVANCED ENTRANCE ANIMATIONS ===== */

@keyframes cyber-rotate-in {
	from {
		opacity: 0;
		transform: rotate(-180deg) scale(0.8);
	}
	to {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
}

@keyframes cyber-flip-in-x {
	from {
		opacity: 0;
		transform: perspective(400px) rotateX(-90deg);
	}
	to {
		opacity: 1;
		transform: perspective(400px) rotateX(0deg);
	}
}

@keyframes cyber-flip-in-y {
	from {
		opacity: 0;
		transform: perspective(400px) rotateY(-90deg);
	}
	to {
		opacity: 1;
		transform: perspective(400px) rotateY(0deg);
	}
}

@keyframes cyber-roll-in {
	from {
		opacity: 0;
		transform: translateX(-100%) rotate(-120deg);
	}
	to {
		opacity: 1;
		transform: translateX(0) rotate(0deg);
	}
}

/* ===== ATTENTION SEEKERS ===== */

@keyframes cyber-flash {
	0%, 50%, 100% {
		opacity: 1;
	}
	25%, 75% {
		opacity: 0;
	}
}

@keyframes cyber-heartbeat {
	0%, 100% {
		transform: scale(1);
	}
	14% {
		transform: scale(1.1);
	}
	28% {
		transform: scale(1);
	}
	42% {
		transform: scale(1.1);
	}
	70% {
		transform: scale(1);
	}
}

@keyframes cyber-rubber-band {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scaleX(1.25) scaleY(0.75);
	}
	40% {
		transform: scaleX(0.75) scaleY(1.25);
	}
	50% {
		transform: scaleX(1.15) scaleY(0.85);
	}
	65% {
		transform: scaleX(0.95) scaleY(1.05);
	}
	75% {
		transform: scaleX(1.05) scaleY(0.95);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes cyber-jello {
	0%, 100% {
		transform: skewX(0deg) skewY(0deg);
	}
	30% {
		transform: skewX(-12.5deg) skewY(-12.5deg);
	}
	40% {
		transform: skewX(6.25deg) skewY(6.25deg);
	}
	50% {
		transform: skewX(-3.125deg) skewY(-3.125deg);
	}
	65% {
		transform: skewX(1.5625deg) skewY(1.5625deg);
	}
	75% {
		transform: skewX(-0.78125deg) skewY(-0.78125deg);
	}
}

@keyframes cyber-swing {
	20% {
		transform: rotate(15deg);
	}
	40% {
		transform: rotate(-10deg);
	}
	60% {
		transform: rotate(5deg);
	}
	80% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@keyframes cyber-tada {
	0% {
		transform: scale(1) rotate(0deg);
	}
	10%, 20% {
		transform: scale(0.9) rotate(-3deg);
	}
	30%, 50%, 70%, 90% {
		transform: scale(1.1) rotate(3deg);
	}
	40%, 60%, 80% {
		transform: scale(1.1) rotate(-3deg);
	}
	100% {
		transform: scale(1) rotate(0deg);
	}
}

@keyframes cyber-wobble {
	0% {
		transform: translateX(0);
	}
	15% {
		transform: translateX(-25px) rotate(-5deg);
	}
	30% {
		transform: translateX(20px) rotate(3deg);
	}
	45% {
		transform: translateX(-15px) rotate(-3deg);
	}
	60% {
		transform: translateX(10px) rotate(2deg);
	}
	75% {
		transform: translateX(-5px) rotate(-1deg);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes cyber-headshake {
	0%, 50% {
		transform: translateX(0);
	}
	6.5% {
		transform: translateX(-6px) rotateY(-9deg);
	}
	18.5% {
		transform: translateX(5px) rotateY(7deg);
	}
	31.5% {
		transform: translateX(-3px) rotateY(-5deg);
	}
	43.5% {
		transform: translateX(2px) rotateY(3deg);
	}
}

/* ===== CONTINUOUS ANIMATIONS ===== */

@keyframes cyber-bounce-continuous {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-15px);
	}
	60% {
		transform: translateY(-7px);
	}
}

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

/* ===== FORM INPUT ANIMATIONS ===== */

@keyframes cyber-input-focus {
	from {
		box-shadow: 0 0 0 0 var(--cyber-accent-primary);
	}
	to {
		box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
	}
}

@keyframes cyber-input-error {
	0%, 100% {
		border-color: var(--cyber-danger);
	}
	50% {
		border-color: rgba(239, 68, 68, 0.5);
	}
}

.cyber-input:focus {
	animation: cyber-input-focus 0.2s ease-out forwards;
}

.cyber-input-error {
	animation: cyber-input-error 0.5s ease-in-out 3;
}

/* ===== MODAL ANIMATIONS ===== */

@keyframes cyber-modal-overlay-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes cyber-modal-overlay-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes cyber-modal-content-in {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes cyber-modal-content-out {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	to {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}
}

.cyber-modal-overlay-enter {
	animation: cyber-modal-overlay-in 0.2s ease-out;
}

.cyber-modal-overlay-exit {
	animation: cyber-modal-overlay-out 0.2s ease-out;
}

.cyber-modal-content-enter {
	animation: cyber-modal-content-in 0.3s ease-out;
}

.cyber-modal-content-exit {
	animation: cyber-modal-content-out 0.3s ease-out;
}

/* ===== TOOLTIP ANIMATIONS ===== */

@keyframes cyber-tooltip-in {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.cyber-tooltip-enter {
	animation: cyber-tooltip-in 0.15s ease-out;
}

/* ===== BADGE ANIMATIONS ===== */

@keyframes cyber-badge-pop {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.cyber-badge-new {
	animation: cyber-badge-pop 0.4s ease-out;
}

/* ===== PROGRESS BAR ANIMATIONS ===== */

@keyframes cyber-progress-indeterminate {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(400%);
	}
}

.cyber-progress-indeterminate::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 25%;
	background: var(--cyber-accent-primary);
	animation: cyber-progress-indeterminate 1.5s ease-in-out infinite;
}

/* ===== LIST STAGGER ANIMATIONS ===== */

.cyber-list-stagger > *:nth-child(1) {
	animation: cyber-slide-in-left 0.3s ease-out 0.05s backwards;
}

.cyber-list-stagger > *:nth-child(2) {
	animation: cyber-slide-in-left 0.3s ease-out 0.1s backwards;
}

.cyber-list-stagger > *:nth-child(3) {
	animation: cyber-slide-in-left 0.3s ease-out 0.15s backwards;
}

.cyber-list-stagger > *:nth-child(4) {
	animation: cyber-slide-in-left 0.3s ease-out 0.2s backwards;
}

.cyber-list-stagger > *:nth-child(5) {
	animation: cyber-slide-in-left 0.3s ease-out 0.25s backwards;
}

.cyber-list-stagger > *:nth-child(n+6) {
	animation: cyber-slide-in-left 0.3s ease-out 0.3s backwards;
}

/* ===== PAGE TRANSITION ANIMATIONS ===== */

@keyframes cyber-page-enter {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cyber-page-exit {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-20px);
	}
}

.cyber-page-transition-enter {
	animation: cyber-page-enter 0.4s ease-out;
}

.cyber-page-transition-exit {
	animation: cyber-page-exit 0.3s ease-out;
}

/* ===== HOVER MICRO-INTERACTIONS ===== */

.cyber-hover-lift {
	transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.cyber-hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cyber-hover-grow {
	transition: transform 0.2s ease-out;
}

.cyber-hover-grow:hover {
	transform: scale(1.05);
}

.cyber-hover-shrink {
	transition: transform 0.2s ease-out;
}

.cyber-hover-shrink:hover {
	transform: scale(0.95);
}

.cyber-hover-rotate {
	transition: transform 0.3s ease-out;
}

.cyber-hover-rotate:hover {
	transform: rotate(5deg);
}

.cyber-hover-glow-accent:hover {
	box-shadow: 0 0 15px rgba(102, 126, 234, 0.5);
	transition: box-shadow 0.3s ease-out;
}

/* ===== UTILITY ANIMATION CLASSES ===== */

.cyber-animate-fade-in {
	animation: cyber-fade-in 0.3s ease-out;
}

.cyber-animate-zoom-in {
	animation: cyber-zoom-in 0.3s ease-out;
}

.cyber-animate-bounce-in {
	animation: cyber-bounce-in 0.5s ease-out;
}

.cyber-animate-slide-in-left {
	animation: cyber-slide-in-left 0.3s ease-out;
}

.cyber-animate-slide-in-right {
	animation: cyber-slide-in-right 0.3s ease-out;
}

.cyber-animate-rotate-in {
	animation: cyber-rotate-in 0.5s ease-out;
}

.cyber-animate-heartbeat {
	animation: cyber-heartbeat 1.5s ease-in-out infinite;
}

.cyber-animate-float {
	animation: cyber-float 3s ease-in-out infinite;
}

.cyber-animate-bounce-continuous {
	animation: cyber-bounce-continuous 2s infinite;
}
