/* ============================================
   ANIMATIONS.CSS
   ============================================ */

@keyframes kbFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kbSlideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes kbZoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes kbSealStamp {
  0% { opacity: 0; transform: scale(1.5) rotate(-12deg); }
  60% { opacity: 1; transform: scale(0.9) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}

@keyframes kbPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes kbShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.kb-anim-fade { animation: kbFadeIn 0.6s ease-out; }
.kb-anim-slide { animation: kbSlideRight 0.6s ease-out; }
.kb-anim-zoom { animation: kbZoomIn 0.5s ease-out; }
.kb-anim-stamp { animation: kbSealStamp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.kb-anim-pulse { animation: kbPulse 2s ease-in-out infinite; }

/* Delay utility */
.kb-delay-1 { animation-delay: 0.1s; animation-fill-mode: both; }
.kb-delay-2 { animation-delay: 0.2s; animation-fill-mode: both; }
.kb-delay-3 { animation-delay: 0.3s; animation-fill-mode: both; }
.kb-delay-4 { animation-delay: 0.4s; animation-fill-mode: both; }
.kb-delay-5 { animation-delay: 0.5s; animation-fill-mode: both; }

/* Reveal on scroll */
.kb-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.kb-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.kb-reveal-delay-1.in-view { transition-delay: 0.1s; }
.kb-reveal-delay-2.in-view { transition-delay: 0.2s; }
.kb-reveal-delay-3.in-view { transition-delay: 0.3s; }

/* Hover lift */
.kb-hover-lift { transition: transform 0.3s, box-shadow 0.3s; }
.kb-hover-lift:hover { transform: translateY(-4px); box-shadow: var(--kb-shadow-lg); }

/* Gold shimmer */
.kb-shimmer {
  background: linear-gradient(90deg, var(--kb-gold) 0%, var(--kb-gold-light) 50%, var(--kb-gold) 100%);
  background-size: 200% 100%;
  animation: kbShimmer 3s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
