:root{
--ease-spring:cubic-bezier(.3,1.05,.35,1);
--ease-out:cubic-bezier(.2,.8,.2,1);
--duration-micro:150ms;--duration-fast:200ms;--duration-base:250ms;--duration-slow:300ms;
}
                                                    
@keyframes sr-check-pop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
@keyframes sr-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes sr-spin{to{transform:rotate(360deg)}}
@keyframes sr-step-in{0%{opacity:0;transform:translateX(16px)}100%{opacity:1;transform:none}}
@keyframes sr-fade-in{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes sr-toast-in{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes sr-toast-in-rtl{0%{opacity:0;transform:translateY(14px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes sr-sheet-up{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes sr-scale-in{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
@keyframes sr-backdrop-in{0%{opacity:0}100%{opacity:1}}
                                  
.sr-anim-fade{animation:sr-fade-in var(--duration-base) var(--ease-out) both}
.sr-anim-step{animation:sr-step-in var(--duration-base) var(--ease-out) both}
.sr-anim-scale{animation:sr-scale-in var(--duration-base) var(--ease-spring) both}
.sr-anim-toast{animation:sr-toast-in var(--duration-base) var(--ease-spring) both}
.sr-anim-sheet{animation:sr-sheet-up var(--duration-slow) var(--ease-out) both}
.sr-anim-backdrop{animation:sr-backdrop-in var(--duration-fast) var(--ease-out) both}
.sr-spin{animation:sr-spin .8s linear infinite}
                                                        
.sr-press{transition:transform var(--duration-fast) var(--ease-spring),box-shadow var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.sr-press:active{transform:scale(.97)}
                                                                               
.sr-skeleton{background:linear-gradient(100deg,var(--neutral-100) 30%,var(--neutral-200) 50%,var(--neutral-100) 70%);background-size:200% 100%;animation:sr-skeleton 1.1s ease-in-out infinite;border-radius:var(--radius-sm)}
                                                                                              
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.sr-press:active{transform:none}
.sr-anim-fade,.sr-anim-step,.sr-anim-scale,.sr-anim-toast{animation:sr-backdrop-in var(--duration-micro) linear both}
.sr-anim-sheet{animation:none}
}
                                                                                                                        
@keyframes sr-icon-in{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}}
@keyframes sr-illo-in{0%{opacity:0;transform:translateY(8px) scale(.985)}100%{opacity:1;transform:none}}
svg.lucide{animation:sr-icon-in var(--duration-base) var(--ease-spring) 1 both}
img[src*="illustrations/"],img[src*="emirati/"]{animation:sr-illo-in var(--duration-slow) var(--ease-out) 1 both}
@media (hover:hover){
.btn svg.lucide,.sr-btn svg.lucide,.pill2 svg.lucide,button svg.lucide,a svg.lucide{transition:transform var(--duration-micro) var(--ease-spring)}
.btn:hover svg.lucide,.sr-btn:hover svg.lucide,.pill2:hover svg.lucide,button:hover svg.lucide,a:hover svg.lucide{transform:translateY(-1px)}
.dnav svg.lucide{transition:transform var(--duration-fast) var(--ease-spring)}
.dnav:hover svg.lucide{transform:scale(1.1)}
}
@media (prefers-reduced-motion:reduce){
svg.lucide,img[src*="illustrations/"],img[src*="emirati/"]{animation:none!important}
.btn:hover svg.lucide,.sr-btn:hover svg.lucide,.pill2:hover svg.lucide,button:hover svg.lucide,a:hover svg.lucide,.dnav:hover svg.lucide{transform:none}
}