@keyframes float {0%, 100% {transform: translateY(0px) rotate(0deg)} 50% {transform: translateY(-15px) rotate(180deg)} } .particle {position: absolute;pointer-events: none;animation: float 8s ease-in-out infinite}  @keyframes hoverGlow {0% {box-shadow: 0 0 5px currentColor} 100% {box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor} } @keyframes hoverScale {0% {transform: scale(1)} 100% {transform: scale(1.05)} } @keyframes hoverRotate {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } .hover-glow:hover {animation: hoverGlow 0.3s ease-in-out forwards} .hover-scale:hover {animation: hoverScale 0.3s ease-in-out forwards} .hover-rotate:hover {animation: hoverRotate 0.6s ease-in-out}   @keyframes scanLines {0% {transform: translateY(-100%)} 100% {transform: translateY(100vh)} } .scan-lines-animated {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.1) 2px, rgba(0, 255, 255, 0.1) 4px );animation: scanLines 3s linear infinite;pointer-events: none}    @keyframes buttonPress {0%, 100% {transform: scale(1)} 50% {transform: scale(0.98)} } .btn:active {animation: buttonPress 0.15s ease-in-out}  @keyframes loadingSpin {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } .loading-spinner {animation: loadingSpin 1.2s linear infinite}  @keyframes fadeInUp {0% {opacity: 0;transform: translateY(20px)} 100% {opacity: 1;transform: translateY(0)} } .fade-in-up {animation: fadeInUp 0.5s ease-out}  @keyframes mouseTrail {0% {opacity: 0.8;transform: scale(1)} 100% {opacity: 0;transform: scale(0.5)} } .mouse-trail-particle {position: fixed;pointer-events: none;border-radius: 50%;background: var(--cyan);box-shadow: 0 0 6px var(--cyan);animation: mouseTrail 0.4s ease-out forwards;z-index: 9999}  @media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important} }  .gpu-accelerated {transform: translateZ(0);will-change: transform}  .animate-on-scroll {opacity: 0;transform: translateY(30px);transition: all 0.6s ease-out} .animate-on-scroll.visible {opacity: 1;transform: translateY(0)} .parallax-bg {transform: translateZ(0);will-change: transform}  .interactive-element {cursor: pointer;transition: all 0.3s ease} .interactive-element:hover {transform: translateY(-2px);filter: brightness(1.2)}   @keyframes shimmer {0% {transform: translateX(-100%)} 100% {transform: translateX(100%)} } @keyframes markerPulse {0% {transform: translate(-50%, -50%) scale(0.9);opacity: 0.8} 100% {transform: translate(-50%, -50%) scale(1.5);opacity: 0} }