/* The basics: property + duration + timing function */.button{background:#3b82f6;color:white;padding:12px24px;border:none;border-radius:8px;/* Transition multiple properties */transition:background0.3sease,transform0.2sease,box-shadow0.3sease;}/* Hover state — the transition animates TO these values */.button:hover{background:#2563eb;/* Color change */transform:translateY(-2px);/* Lift effect */box-shadow:08px20pxrgba(59,130,246,0.35);/* Shadow grows */}/* Timing functions explained:
linear → Constant speed (robotic)
ease → Slow start, fast middle, slow end (default, natural)
ease-in → Slow start (good for entering)
ease-out → Slow end (good for leaving)
ease-in-out → Both (good for full cycles)
cubic-bezier() → Custom curve for precise control
*//* Custom easing for a snappy feel */.snappy{transition:transform0.15scubic-bezier(0.34,1.56,0.64,1);/* Overshoots slightly then settles — feels "alive" */}/* Transition all vs specific properties */.card{transition:all0.3sease;}//Convenientbutlessperformant.card{transition:opacity0.3s,transform0.3s;}//Better:specify/* Delay for staggered effects */.menu:hover.menu-item:nth-child(1){transition-delay:0ms;}.menu:hover.menu-item:nth-child(2){transition-delay:50ms;}.menu:hover.menu-item:nth-child(3){transition-delay:100ms;}.menu:hover.menu-item{opacity:1;transform:translateX(0);}

/* Define keyframes first */@keyframesfadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}@keyframespulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}@keyframesspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframesslideInFromLeft{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframesgradientShift{0%{background-position:0%50%;}50%{background-position:100%50%;}100%{background-position:0%50%;}}@keyframesshimmer{0%{background-position:-200%0;}100%{background-position:200%0;}}@keyframestypewriter{from{width:0;}to{width:100%;}}@keyframesblink{50%{border-color:transparent;}}/* Apply animations with animation shorthand */.hero-title{animation:fadeInUp0.8sease-outforwards;}.loading-spinner{width:40px;height:40px;border:4pxsolid#e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin1slinearinfinite;}.notification-badge{animation:pulse2sease-in-outinfinite;}.gradient-text{background:linear-gradient(90deg,#3b82f6,#8b5cf6,#ec4899);background-size:300%100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift3seaseinfinite;}.typewriter-effect{display:inline-block;overflow:hidden;white-space:nowrap;border-right:3pxsolid#3b82f6;animation:typewriter3ssteps(40)1sforwards,blink0.75sstep-endinfinite;}

/* Loading skeleton (content placeholder while data loads) */.skeleton{background:linear-gradient(90deg,#f0f0f025%,#e0e0e050%,#f0f0f075%);background-size:200%100%;animation:shimmer1.5sease-in-outinfinite;border-radius:4px;}.skeleton-text{height:16px;margin-bottom:8px;}.skeleton-title{height:24px;width:60%;margin-bottom:16px;}/* Hover card effect */.hover-card{position:relative;transition:transform0.3sease,box-shadow0.3sease;}.hover-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(59,130,246,0.08),rgba(139,92,246,0.08));opacity:0;transition:opacity0.3sease;z-index:-1;}.hover-card:hover{transform:translateY(-8px);box-shadow:020px40pxrgba(0,0,0,0.12);}.hover-card:hover::before{opacity:1;}/* Accordion/Collapse animation */.accordion-content{max-height:0;overflow:hidden;transition:max-height0.4sease,padding0.4sease;}.accordion.open.accordion-content{max-height:500px;padding:16px0;}/* Progress bar animation */.progress-bar{width:0%;height:8px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:4px;transition:width1scubic-bezier(0.4,0,0.2,1);}.progress-bar.indeterminate{animation:progressIndeterminate1.5sease-in-outinfinite;}@keyframesprogressIndeterminate{0%{width:0%;margin-left:0%;}50%{width:60%;margin-left:20%;}100%{width:100%;margin-left:100%;}}/* Ripple click effect */.ripple-btn{position:relative;overflow:hidden;}.ripple-btn::after{content:'';position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%)scale(0);border-radius:50%;background:rgba(255,255,255,0.3);opacity:0;}.ripple-btn:active::after{animation:rippleEffect0.6sease-out;}@keyframesrippleEffect{0%{transform:translate(-50%,-50%)scale(0);opacity:1;}100%{transform:translate(-50%,-50%)scale(4);opacity:0;}}/* Notification badge pop */.badge-pop{animation:badgePopIn0.3scubic-bezier(0.175,0.885,0.32,1.275);}@keyframesbadgePopIn{0%{transform:scale(0);opacity:0;}60%{transform:scale(1.2);}100%{transform:scale(1);opacity:1;}}

/* Only animate GPU-accelerated properties for 60fps:
✅ transform (translate, rotate, scale)
✅ opacity
❌ width, height, top, left, margin, padding (trigger layout recalculation)
❌ color, background-color (trigger paint)
*/.gpu-accelerated{will-change:transform,opacity;}/* Hint to browser *//* But don't overuse! Too many layers = too much memory *//* Reduce motion for accessibility (IMPORTANT!) */@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}}/* Users who set this preference get zero animations — respect it! *//* Containment hint (helps browser optimize repaint areas) */.animated-element{contain:layoutstylepaint;/* Browser knows this element's changes don't affect siblings */}