/* ===== BUDDYSTORE ENHANCED ANIMATIONS SYSTEM ===== */\n/* This file adds smooth transitions and micro-interactions while preserving your existing design */\n\n/* ===== GLOBAL ANIMATION VARIABLES ===== */\n:root {\n  /* Animation Timing */\n  --animation-fast: 0.15s;\n  --animation-normal: 0.3s;\n  --animation-slow: 0.5s;\n  --animation-extra-slow: 0.8s;\n  \n  /* Easing Functions */\n  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);\n  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);\n  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);\n  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n/* ===== PAGE TRANSITION SYSTEM ===== */\n\n/* Page fade-in animation */\n@keyframes pageEnter {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Apply page enter animation to body */\nbody {\n  animation: pageEnter var(--animation-slow) var(--ease-out-cubic);\n}\n\n/* Staggered content animation */\n@keyframes staggerIn {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Apply staggered animations to main content elements */\n.login-box,\n.profile-card,\n.package-card,\n.category-group,\n.card {\n  animation: staggerIn var(--animation-slow) var(--ease-out-cubic);\n}\n\n/* Delay animations for staggered effect */\n.package-card:nth-child(1) { animation-delay: 0.1s; }\n.package-card:nth-child(2) { animation-delay: 0.2s; }\n.package-card:nth-child(3) { animation-delay: 0.3s; }\n.package-card:nth-child(4) { animation-delay: 0.4s; }\n.package-card:nth-child(5) { animation-delay: 0.5s; }\n.package-card:nth-child(6) { animation-delay: 0.6s; }\n\n/* ===== ENHANCED BUTTON ANIMATIONS ===== */\n\n/* Button hover effects */\n.btn,\n.telegram-login,\nbutton,\ninput[type=\"submit\"],\ninput[type=\"button\"] {\n  position: relative;\n  overflow: hidden;\n  transition: all var(--animation-normal) var(--ease-out-cubic);\n  transform: translateZ(0); /* Enable hardware acceleration */\n}\n\n/* Enhanced hover states */\n.btn:hover {\n  transform: translateY(-2px) scale(1.02);\n  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\n}\n\n.btn:active {\n  transform: translateY(0) scale(0.98);\n  transition: all var(--animation-fast);\n}\n\n/* ===== CARD ANIMATIONS ===== */\n\n/* Enhanced card hover effects */\n.package-card,\n.card,\n.login-box {\n  transition: all var(--animation-normal) var(--ease-out-cubic);\n  transform: translateZ(0);\n}\n\n.package-card:hover,\n.card:hover {\n  transform: translateY(-8px) scale(1.02);\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n}\n\n.login-box:hover {\n  transform: translateY(-5px) scale(1.01);\n}\n\n/* ===== FORM ANIMATIONS ===== */\n\n/* Input focus animations */\n.form-input,\n.form-select,\n.form-textarea,\ninput,\nselect,\ntextarea {\n  transition: all var(--animation-normal) var(--ease-out-cubic);\n  position: relative;\n}\n\n.form-input:focus,\n.form-select:focus,\n.form-textarea:focus,\ninput:focus,\nselect:focus,\ntextarea:focus {\n  transform: scale(1.02);\n  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n/* ===== NAVIGATION ANIMATIONS ===== */\n\n/* Navigation link hover effects */\n.navbar-link,\na {\n  position: relative;\n  transition: all var(--animation-fast) var(--ease-out-cubic);\n}\n\n.navbar-link::after,\na::after {\n  content: '';\n  position: absolute;\n  bottom: -2px;\n  left: 0;\n  width: 0;\n  height: 2px;\n  background: linear-gradient(90deg, #007aff, #00c6ff);\n  transition: width var(--animation-normal) var(--ease-out-cubic);\n}\n\n.navbar-link:hover::after,\na:hover::after {\n  width: 100%;\n}\n\n/* ===== PROFILE ANIMATIONS ===== */\n\n/* Profile avatar animations */\n.profile-avatar,\n.avatar {\n  transition: all var(--animation-normal) var(--ease-out-cubic);\n  position: relative;\n  overflow: hidden;\n}\n\n.profile-avatar:hover,\n.avatar:hover {\n  transform: scale(1.1) rotate(5deg);\n  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n}\n\n/* ===== MICRO-INTERACTIONS ===== */\n\n/* Icon hover animations */\n.feature-icon,\n.icon,\ni {\n  transition: all var(--animation-fast) var(--ease-out-cubic);\n}\n\n.feature-icon:hover,\n.icon:hover,\ni:hover {\n  transform: scale(1.2) rotate(10deg);\n}\n\n/* Text hover effects */\n.feature-item:hover {\n  transform: translateX(10px);\n  background: rgba(0, 122, 255, 0.05);\n  border-radius: 12px;\n  padding: 8px;\n  transition: all var(--animation-normal) var(--ease-out-cubic);\n}\n\n/* ===== LOADING ANIMATIONS ===== */\n\n/* Enhanced loading spinner */\n@keyframes spinEnhanced {\n  0% {\n    transform: rotate(0deg) scale(1);\n  }\n  50% {\n    transform: rotate(180deg) scale(1.1);\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n}\n\n.loading-spinner {\n  animation: spinEnhanced 1s var(--ease-in-out-cubic) infinite;\n}\n\n/* ===== UTILITY ANIMATION CLASSES ===== */\n\n/* Bounce animation */\n@keyframes bounce {\n  0%, 20%, 53%, 80%, 100% {\n    transform: translate3d(0, 0, 0);\n  }\n  40%, 43% {\n    transform: translate3d(0, -30px, 0);\n  }\n  70% {\n    transform: translate3d(0, -15px, 0);\n  }\n  90% {\n    transform: translate3d(0, -4px, 0);\n  }\n}\n\n.animate-bounce {\n  animation: bounce 1s var(--ease-out-cubic);\n}\n\n/* Fade animations */\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(50px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate-fade-in {\n  animation: fadeInUp var(--animation-slow) var(--ease-out-cubic);\n}\n\n/* ===== RESPONSIVE ANIMATION ADJUSTMENTS ===== */\n\n/* Reduce animations on mobile for better performance */\n@media (max-width: 768px) {\n  .package-card:hover,\n  .card:hover,\n  .login-box:hover {\n    transform: translateY(-4px) scale(1.01);\n  }\n  \n  .btn:hover {\n    transform: translateY(-1px) scale(1.01);\n  }\n  \n  .profile-avatar:hover,\n  .avatar:hover {\n    transform: scale(1.05) rotate(2deg);\n  }\n}\n\n/* Respect user's motion preferences */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n  \n  .particle {\n    display: none;\n  }\n}\n\n/* ===== PERFORMANCE OPTIMIZATIONS ===== */\n\n/* Enable hardware acceleration for animated elements */\n.package-card,\n.card,\n.btn,\n.login-box,\n.profile-card,\n.particle,\n.feature-icon {\n  will-change: transform;\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n"