/* =========================================================
   Animations
   ========================================================= */

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseLogo{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
#loader .logo-anim{animation:pulseLogo 1.4s ease-in-out infinite}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes zoomIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes modalIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes toastIn{from{transform:translateX(-40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(30,136,229,.4)}50%{box-shadow:0 0 0 12px rgba(30,136,229,0)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes dotPulse{0%,80%,100%{transform:scale(0);opacity:.3}40%{transform:scale(1);opacity:1}}
@keyframes rotateY{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

.anim-fadeIn{animation:fadeIn .6s var(--ease) both}
.anim-fadeInUp{animation:fadeInUp .6s var(--ease) both}
.anim-fadeInDown{animation:fadeInDown .6s var(--ease) both}
.anim-slideInLeft{animation:slideInLeft .6s var(--ease) both}
.anim-slideInRight{animation:slideInRight .6s var(--ease) both}
.anim-zoomIn{animation:zoomIn .6s var(--ease) both}
.anim-bounce{animation:bounce 2s ease-in-out infinite}
.anim-glow{animation:glow 2s ease-in-out infinite}

.modal-back.open{animation:fadeIn .3s}
.modal-back.open .modal{animation:modalIn .3s var(--ease)}
.toast{animation:toastIn .3s var(--ease)}
.page.active{animation:pageIn .5s var(--ease)}

.skeleton{
  background:linear-gradient(90deg,var(--bg-2) 0%,rgba(255,255,255,.4) 50%,var(--bg-2) 100%);
  background-size:800px 100%;animation:shimmer 1.4s linear infinite;border-radius:8px;
}

/* Hero visual floating */
.hv-card,.hv-badge{animation:floatY 6s ease-in-out infinite}
.hv-mini{animation-delay:-2s}
.hv-badge{animation-delay:-1s}

/* Stagger delays */
.d-1{animation-delay:.1s}
.d-2{animation-delay:.2s}
.d-3{animation-delay:.3s}
.d-4{animation-delay:.4s}
.d-5{animation-delay:.5s}