﻿/* ============================================================
   animations.css — Git Cards v3.2
   ============================================================ */

@keyframes fadeInUp    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft  { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
@keyframes scaleInBounce { 0%{opacity:0;transform:scale(0.85)} 70%{transform:scale(1.04)} 100%{opacity:1;transform:scale(1)} }
@keyframes slideInUp   { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes shake       { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(3px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
@keyframes shimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes ripple      { from{transform:scale(0);opacity:0.45} to{transform:scale(2.8);opacity:0} }
@keyframes glowPulse   { 0%,100%{box-shadow:0 0 0 0 rgba(0,106,69,.25)} 50%{box-shadow:0 0 0 8px rgba(0,106,69,0)} }
@keyframes navPop      { 0%{transform:scale(1)} 40%{transform:scale(.88)} 70%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes pageEnter   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes sidebarEnter{ from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes logoGlow    { 0%{transform:scale(1);opacity:.6} 50%{transform:scale(1.06);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes countUp     { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Utility classes */
.anim-fade-in-up    { animation:fadeInUp      .35s cubic-bezier(.16,1,.3,1) both }
.anim-fade-in-down  { animation:fadeInDown    .3s  cubic-bezier(.16,1,.3,1) both }
.anim-fade-in-left  { animation:fadeInLeft    .35s cubic-bezier(.16,1,.3,1) both }
.anim-fade-in-right { animation:fadeInRight   .35s cubic-bezier(.16,1,.3,1) both }
.anim-scale-in      { animation:scaleIn       .25s cubic-bezier(.16,1,.3,1) both }
.anim-scale-bounce  { animation:scaleInBounce .4s  cubic-bezier(.16,1,.3,1) both }
.anim-slide-in-up   { animation:slideInUp     .4s  cubic-bezier(.16,1,.3,1) both }
.anim-shake         { animation:shake         .35s ease }
.anim-glow-pulse    { animation:glowPulse     1.5s ease-in-out 1 }
.anim-logo-glow     { animation:logoGlow      .6s  ease-in-out both }
.page-enter         { animation:pageEnter     .28s cubic-bezier(.16,1,.3,1) both }
.sidebar-enter      { animation:sidebarEnter  .3s  cubic-bezier(.16,1,.3,1) both }
.nav-pop            { animation:navPop        .35s cubic-bezier(.16,1,.3,1) both }
.anim-count-up      { animation:countUp       .3s  cubic-bezier(.16,1,.3,1) both }

/* Stagger children */
.stagger-children > * { opacity:0; animation:fadeInUp .35s cubic-bezier(.16,1,.3,1) both }
.stagger-children > *:nth-child(1)    { animation-delay:0ms }
.stagger-children > *:nth-child(2)    { animation-delay:60ms }
.stagger-children > *:nth-child(3)    { animation-delay:120ms }
.stagger-children > *:nth-child(4)    { animation-delay:180ms }
.stagger-children > *:nth-child(5)    { animation-delay:240ms }
.stagger-children > *:nth-child(6)    { animation-delay:300ms }
.stagger-children > *:nth-child(7)    { animation-delay:360ms }
.stagger-children > *:nth-child(8)    { animation-delay:420ms }
.stagger-children > *:nth-child(9)    { animation-delay:480ms }
.stagger-children > *:nth-child(10)   { animation-delay:540ms }
.stagger-children > *:nth-child(n+11) { animation-delay:600ms }

/* Table row stagger */
.stagger-rows tr { opacity:0; animation:fadeInLeft .3s cubic-bezier(.16,1,.3,1) both }
.stagger-rows tr:nth-child(1)   { animation-delay:0ms }
.stagger-rows tr:nth-child(2)   { animation-delay:40ms }
.stagger-rows tr:nth-child(3)   { animation-delay:80ms }
.stagger-rows tr:nth-child(4)   { animation-delay:120ms }
.stagger-rows tr:nth-child(5)   { animation-delay:160ms }
.stagger-rows tr:nth-child(6)   { animation-delay:200ms }
.stagger-rows tr:nth-child(7)   { animation-delay:240ms }
.stagger-rows tr:nth-child(8)   { animation-delay:280ms }
.stagger-rows tr:nth-child(n+9) { animation-delay:320ms }

/* Skeleton shimmer */
.skeleton-shimmer {
  background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.06) 75%);
  background-size:200% 100%; animation:shimmer 1.5s ease-in-out infinite; border-radius:8px;
}
.dark .skeleton-shimmer {
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.06) 75%);
  background-size:200% 100%;
}

/* Ripple */
.btn-ripple { position:relative; overflow:hidden }
.btn-ripple .ripple-dot { position:absolute; border-radius:50%; background:rgba(255,255,255,.38); pointer-events:none; animation:ripple .55s ease-out forwards }

/* Delay helpers */
.delay-100 { animation-delay:100ms!important }
.delay-200 { animation-delay:200ms!important }
.delay-300 { animation-delay:300ms!important }
.delay-400 { animation-delay:400ms!important }
.delay-500 { animation-delay:500ms!important }
