/* ========================================
   ANIMATIONS CSS - Arise Band_KE
   Keyframe animations and transitions
   ======================================== */

/* === Heartbeat Animation === */
@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.08); }
  28%  { transform: scale(0.98); }
  42%  { transform: scale(1.06); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* === Glow Fade Animation === */
@keyframes glowFade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1); filter: blur(8px); }
  20%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.25); filter: blur(10px); }
  45%  { opacity: 0.6; transform: translate(-50%, -50%) scale(1.5); filter: blur(12px); }
  70%  { opacity: 0.2; transform: translate(-50%, -50%) scale(1.9); filter: blur(14px); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); filter: blur(16px); }
}

/* === Inner Sheen Animation === */
@keyframes innerSheen {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  25%  { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  45%  { opacity: 0.35; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}

/* === Float Y Animation (for member photos) === */
@keyframes floatY {
  0% { transform: translateY(0); }
  100% { transform: translateY(-18px); }
}

/* === Fade In Up Animation === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Gallery/Hero Carousel Slide Animations === */
@keyframes zoomIn {
  from {
    transform: scale(1.3);
    opacity: 0.8;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeInScale {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    transform: rotate(-180deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}

/* === Accessibility - Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  #vmHeading,
  #vmHeading.blend {
    transition: none !important;
  }
}