/* ============================================ KEYFRAME ANIMATIONS ============================================ */@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}@keyframes slideInUp{from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);}}@keyframes slideInDown{from{opacity:0;transform:translateY(-30px);} to{opacity:1;transform:translateY(0);}}@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px);} to{opacity:1;transform:translateX(0);}}@keyframes slideInRight{from{opacity:0;transform:translateX(30px);} to{opacity:1;transform:translateX(0);}}@keyframes float{0%, 100%{transform:translateY(0px);} 50%{transform:translateY(-20px);}}@keyframes pulse{0%, 100%{opacity:1;transform:scale(1);} 50%{opacity:0.8;transform:scale(1.05);}}@keyframes bounce{0%, 100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}@keyframes rotateIn{from{opacity:0;transform:rotate(-10deg) scale(0.9);} to{opacity:1;transform:rotate(0) scale(1);}}@keyframes scaleIn{from{opacity:0;transform:scale(0.8);} to{opacity:1;transform:scale(1);}}@keyframes shimmer{0%{background-position:-200% 0;} 100%{background-position:200% 0;}}@keyframes gradient{0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;}}/* ============================================ ANIMATION UTILITY CLASSES ============================================ */.animate-fade-in{animation:fadeIn 0.6s ease-out forwards;}.animate-slide-up{animation:slideInUp 0.6s ease-out forwards;}.animate-slide-down{animation:slideInDown 0.6s ease-out forwards;}.animate-slide-left{animation:slideInLeft 0.6s ease-out forwards;}.animate-slide-right{animation:slideInRight 0.6s ease-out forwards;}.animate-float{animation:float 3s ease-in-out infinite;}.animate-pulse{animation:pulse 2s ease-in-out infinite;}.animate-bounce{animation:bounce 1s ease-in-out infinite;}.animate-scale-in{animation:scaleIn 0.4s ease-out forwards;}/* ============================================ SCROLL-TRIGGERED ANIMATIONS ============================================ */[data-animate]{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease-out, transform 0.6s ease-out;}[data-animate].animate-in{opacity:1;transform:translateY(0);}[data-animate="fade"]{transform:none;}[data-animate="slide-left"]{transform:translateX(-30px);}[data-animate="slide-left"].animate-in{transform:translateX(0);}[data-animate="slide-right"]{transform:translateX(30px);}[data-animate="slide-right"].animate-in{transform:translateX(0);}[data-animate="scale"]{transform:scale(0.9);}[data-animate="scale"].animate-in{transform:scale(1);}/* ============================================ STAGGER ANIMATIONS ============================================ */.animate-stagger>*{opacity:0;animation:slideInUp 0.6s ease-out forwards;}.animate-stagger>*:nth-child(1){animation-delay:0s;}.animate-stagger>*:nth-child(2){animation-delay:0.1s;}.animate-stagger>*:nth-child(3){animation-delay:0.2s;}.animate-stagger>*:nth-child(4){animation-delay:0.3s;}.animate-stagger>*:nth-child(5){animation-delay:0.4s;}.animate-stagger>*:nth-child(6){animation-delay:0.5s;}.animate-stagger>*:nth-child(7){animation-delay:0.6s;}.animate-stagger>*:nth-child(8){animation-delay:0.7s;}.animate-stagger>*:nth-child(9){animation-delay:0.8s;}/* ============================================ HOVER ANIMATIONS ============================================ */.hover-lift{transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);}.hover-lift:hover{transform:translateY(-8px);}.hover-scale{transition:transform 0.3s ease;}.hover-scale:hover{transform:scale(1.05);}.hover-rotate{transition:transform 0.3s ease;}.hover-rotate:hover{transform:rotate(3deg);}.hover-glow{transition:box-shadow 0.3s ease;}.hover-glow:hover{box-shadow:0 0 30px rgba(255, 107, 157, 0.4);}/* ============================================ TRANSITION UTILITIES ============================================ */.transition-fast{transition:all 200ms ease;}.transition-normal{transition:all 300ms ease;}.transition-slow{transition:all 500ms ease;}/* ============================================ LOADING ANIMATIONS ============================================ */.loading-skeleton{background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}.loading-spinner{width:40px;height:40px;border:3px solid var(--gray-light);border-top-color:var(--primary-pink);border-radius:50%;animation:spin 0.8s linear infinite;}@keyframes spin{to{transform:rotate(360deg);}}/* ============================================ REDUCED MOTION ============================================ */@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;} [data-animate]{opacity:1;transform:none;} .animate-float, .animate-pulse, .animate-bounce{animation:none;}}