/* === PREMIUM UTILITY CLASSES === */ .animate-float { animation: float 3s ease-in-out infinite; } .animate-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; } .animate-slide-in-right { animation: slide-in-right 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .animate-slide-in-left { animation: slide-in-left 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .animate-scale-in { animation: scale-in 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .animate-rotate-in { animation: rotate-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Hover Effects */ .hover-lift-subtle { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift-subtle:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } .hover-glow { transition: box-shadow 0.3s ease; } .hover-glow:hover { box-shadow: 0 0 20px rgba(var(--kodo-cyan), 0.4), 0 0 40px rgba(var(--kodo-cyan), 0.2); } .hover-scale-105 { transition: transform 0.2s ease; } .hover-scale-105:hover { transform: scale(1.05); } /* Enhanced Glassmorphism */ .glass-premium { background: rgba(var(--kodo-void), 0.6); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .light .glass-premium { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); } /* Gradient Text */ .text-gradient-premium { background: linear-gradient( 135deg, rgb(var(--kodo-cyan)), rgb(var(--kodo-magenta)) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Smooth Scroll */ html { scroll-behavior: smooth; } /* Custom Scrollbar */ /* FIX: Scrollbar styles moved to global-effects.css to avoid conflicts */ /* These styles are now defined in global-effects.css with reduced visibility */ /* Selection */ ::selection { background: rgba(var(--kodo-cyan), 0.3); color: rgb(var(--kodo-text-main)); } /* Page Transitions */ .page-enter { opacity: 0; transform: translateY(20px); } .page-enter-active { opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; } /* Focus Styles */ *:focus-visible { outline: 2px solid rgb(var(--kodo-cyan)); outline-offset: 2px; border-radius: 4px; } /* Light Mode Glass Adjustments */ .light .glass-hud { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); } .light .glass-hud-active { background: rgba(var(--kodo-cyan), 0.08); border-color: rgba(var(--kodo-cyan), 0.3); }