@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 8px hsl(12 76% 48% / 0.3); } 50% { box-shadow: 0 0 24px hsl(12 76% 48% / 0.6); } } @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Utility classes for animations */ .animate-fade-in { animation: fade-in 0.5s var(--ease-out-expo) both; } .animate-fade-in-up { animation: fade-in-up 0.6s var(--ease-out-expo) both; } .animate-fade-in-down { animation: fade-in-down 0.6s var(--ease-out-expo) both; } .animate-slide-in-left { animation: slide-in-left 0.5s var(--ease-out-expo) both; } .animate-slide-in-right { animation: slide-in-right 0.5s var(--ease-out-expo) both; } .animate-scale-in { animation: scale-in 0.4s var(--ease-out-expo) both; } .animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; } /* Staggered animation delays */ .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } .stagger-5 { animation-delay: 0.5s; } /* Scroll reveal base state */ .scroll-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); } .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Book Player 3D animations */ @keyframes fade-scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes book-open { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } } @keyframes page-turn { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-180deg); } } .animate-fade-scale-in { animation: fade-scale-in 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) both; }