/* ===== Animation utilities ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes bounceOnce{0%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes typing{0%,20%{transform:translateY(0)}40%{transform:translateY(-4px)}60%,100%{transform:translateY(0)}}
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:none}}

/* utility classes */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.is-visible{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-40px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal-l.is-visible{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(40px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal-r.is-visible{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .5s,transform .5s}
.reveal-scale.is-visible{opacity:1;transform:none}
.fade-in-up{animation:fadeInUp .6s ease-out both}
.fade-in{animation:fadeIn .35s ease-out both}
.scale-in{animation:scaleIn .25s ease-out both}
.bounce-once{animation:bounceOnce .55s ease-out}
.dot-pulse{animation:dotPulse 1.6s ease-in-out infinite}
.shimmer-bg{background:linear-gradient(90deg,#eee 0,#f5f5f5 40px,#eee 80px);background-size:600px 100%;animation:shimmer 1.4s infinite linear}

.btn-press:active{transform:scale(.97)}
.hover-lift{transition:transform .25s ease,box-shadow .25s ease}
.hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover,0 8px 24px rgba(0,0,0,.1))}
.hover-zoom img{transition:transform .5s ease}
.hover-zoom:hover img{transform:scale(1.08)}

/* loading spinner */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
.spinner.dark{border-color:rgba(0,0,0,.15);border-top-color:var(--primary)}

/* typing dots */
.typing{display:inline-flex;gap:4px;align-items:center}
.typing span{width:6px;height:6px;background:#999;border-radius:50%;animation:typing 1.2s infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}

/* toast */
.toast-host{position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:rgba(40,40,40,.92);color:#fff;padding:10px 18px;border-radius:6px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.2);animation:fadeInUp .25s ease-out;max-width:80vw}
.toast.success{background:#16a34a}.toast.error{background:#dc2626}.toast.warn{background:#d97706}

/* drawer / modal helpers */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;animation:fadeIn .2s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:96vw;background:#fff;z-index:1001;animation:drawerSlideIn .3s ease-out;display:flex;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,.1)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:8px;z-index:1001;animation:scaleIn .25s ease-out;box-shadow:0 12px 48px rgba(0,0,0,.18)}

/* skeleton */
.sk-line{height:14px;border-radius:4px;background:#eee;background:linear-gradient(90deg,#eee 0,#f6f6f6 40px,#eee 80px);background-size:600px 100%;animation:shimmer 1.4s infinite linear}

/* tag chip */
.chip{display:inline-block;background:#f3f5f7;color:#555;font-size:12px;padding:2px 8px;border-radius:4px;margin-right:6px}
.chip-primary{background:var(--primary-light);color:var(--primary)}
.red-dot{display:inline-block;min-width:16px;height:16px;border-radius:8px;background:#FF4D4F;color:#fff;font-size:11px;font-weight:600;line-height:16px;text-align:center;padding:0 4px;animation:bounceOnce .5s ease-out}