/* ===== UNNOTI Animations ===== */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(37,99,235,.3)}50%{box-shadow:0 0 40px rgba(37,99,235,.6)}}
@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes slide-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide-down{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide-left{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slide-right{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes scale-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes rotate-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes bounce-in{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink-caret{from,to{border-color:transparent}50%{border-color:#2563EB}}
@keyframes morph{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}

.animate-float{animation:float 6s ease-in-out infinite}
.animate-float-delay-1{animation:float 6s ease-in-out 1s infinite}
.animate-float-delay-2{animation:float 6s ease-in-out 2s infinite}
.animate-pulse-glow{animation:pulse-glow 3s ease-in-out infinite}
.animate-gradient{background-size:200% 200%;animation:gradient-shift 4s ease infinite}
.animate-slide-up{animation:slide-up .8s ease forwards}
.animate-slide-down{animation:slide-down .8s ease forwards}
.animate-slide-left{animation:slide-left .8s ease forwards}
.animate-slide-right{animation:slide-right .8s ease forwards}
.animate-scale-in{animation:scale-in .6s ease forwards}
.animate-rotate-slow{animation:rotate-slow 20s linear infinite}
.animate-shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.animate-bounce-in{animation:bounce-in .6s ease forwards}
.animate-fade-in{animation:fade-in .8s ease forwards}
.animate-morph{animation:morph 8s ease-in-out infinite}

/* Stagger delays */
.delay-100{animation-delay:.1s}
.delay-200{animation-delay:.2s}
.delay-300{animation-delay:.3s}
.delay-400{animation-delay:.4s}
.delay-500{animation-delay:.5s}
.delay-600{animation-delay:.6s}
.delay-700{animation-delay:.7s}
.delay-800{animation-delay:.8s}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:all .8s ease}
.reveal.active{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-50px);transition:all .8s ease}
.reveal-left.active{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(50px);transition:all .8s ease}
.reveal-right.active{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.8);transition:all .8s ease}
.reveal-scale.active{opacity:1;transform:scale(1)}

/* Hover micro-interactions */
.hover-lift{transition:transform .3s ease,box-shadow .3s ease}
.hover-lift:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.1)}
.hover-glow{transition:box-shadow .3s ease}
.hover-glow:hover{box-shadow:0 0 30px rgba(37,99,235,.3)}
.hover-scale{transition:transform .3s ease}
.hover-scale:hover{transform:scale(1.05)}
.hover-rotate{transition:transform .3s ease}
.hover-rotate:hover{transform:rotate(5deg)}

/* Loading skeleton */
.skeleton{background:linear-gradient(90deg,#e2e8f0 25%,#cbd5e1 50%,#e2e8f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}
.skeleton-text{height:16px;margin-bottom:8px;width:80%}
.skeleton-title{height:24px;margin-bottom:12px;width:60%}
.skeleton-avatar{width:48px;height:48px;border-radius:50%}
.skeleton-card{height:200px;border-radius:16px}

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#2563EB,#0EA5E9,#14B8A6);z-index:10000;transition:width .1s linear}

/* Loading screen */
.loading-screen{position:fixed;inset:0;background:#0F172A;display:flex;align-items:center;justify-content:center;z-index:99999;transition:opacity .5s ease}
.loading-screen.hidden{opacity:0;pointer-events:none}
.loader-spinner{width:48px;height:48px;border:4px solid rgba(37,99,235,.2);border-top-color:#2563EB;border-radius:50%;animation:rotate-slow 1s linear infinite}