/* ==================== ANIMATIONS ==================== */

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(240, 153, 123, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(240, 153, 123, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(240, 153, 123, 0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(240, 153, 123, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(240, 153, 123, 0.55);
  }
}

/* Animations Classes */
.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}

.animate-slide-up {
  animation: slideInUp 0.6s ease forwards;
}

/* Scroll Animation Utility Classes */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced Motion Settings */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0.1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .cert-card__inner {
    transition: none !important;
  }
  .cert-card:hover .cert-card__inner,
  .cert-card.flipped .cert-card__inner {
    transform: none !important;
  }
  .cert-card__back {
    display: none;
  }
  .cert-card:hover .cert-card__front,
  .cert-card.flipped .cert-card__front {
    opacity: 0;
  }
  .cert-card:hover .cert-card__back,
  .cert-card.flipped .cert-card__back {
    display: flex;
    transform: none !important;
    position: relative;
  }
  .name-intro__letters {
    animation: fadeIn 0.4s ease forwards !important;
  }
  .intro-cluster {
    opacity: 1 !important;
    transform: none !important;
  }
}