

/*MODAL ANIMATIONS*/
.modal {
    animation: fadeOut 0.3s;
}

.modal-container.show-modal .modal {
    animation: fadeIn 0.3s;
}

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

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

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

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

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

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
  }

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

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

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

@keyframes rotateOut {
  from {transform: rotate(0); opacity: 1;}
  to {transform: rotate(360deg); opacity: 0;}
}

/*INLAY ALERT ANIMATIONS*/
/* Slide in from the right */
@keyframes slide-in-right {
  from {
      transform: translateX(100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}
.slide-in-right {
  animation: slide-in-right 0.5s ease-out forwards;
}

/* Fade in */
@keyframes fade-in {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}
.fade-in {
  animation: fade-in 0.5s ease-in forwards;
}

/* fade-from-top */
@keyframes fade-from-top {
  from {transform: translateY(-100%); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-from-top {
  animation: fade-from-top 0.5s ease-out forwards;
}

/* fade-from-bottom */
@keyframes fade-from-bottom {
  from {transform: translateY(100%); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-from-bottom {
  animation: fade-from-bottom 0.5s ease-out forwards;
}

/* fade-from-left */
@keyframes fade-from-left {
  from {transform: translateX(-100%); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}
.fade-from-left {
  animation: fade-from-left 0.5s ease-out forwards;
}

/* fade-from-right */
@keyframes fade-from-right {
  from {transform: translateX(100%); opacity: 0;}
  to {transform: translateX(0); opacity: 1;}
}
.fade-from-right {
  animation: fade-from-right 0.5s ease-out forwards;
}

/* fade-zoom-in */
@keyframes fade-zoom-in {
  from {transform: scale(0); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}
.fade-zoom-in {
  animation: fade-zoom-in 0.5s ease-out forwards;
}

/* spin-in */
@keyframes spin-in {
  from {transform: rotate(-360deg); opacity: 0;}
  to {transform: rotate(0); opacity: 1;}
}
.spin-in {
  animation: spin-in 0.5s ease-out forwards;
}

/* fade-slide-up */
@keyframes fade-slide-up {
  from {transform: translateY(50px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-slide-up {
  animation: fade-slide-up 0.5s ease-out forwards;
}

/* fade-slide-down */
@keyframes fade-slide-down {
  from {transform: translateY(-50px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}
.fade-slide-down {
  animation: fade-slide-down 0.5s ease-out forwards;
}

/* blink-in */
@keyframes blink-in {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
  50% {opacity: 1;}
}
.blink-in {
  animation: blink-in 0.5s ease-out forwards;
}

/* expand-open */
@keyframes expand-open {
  from {transform: scaleY(0); opacity: 0;}
  to {transform: scaleY(1); opacity: 1;}
}
.expand-open {
  animation: expand-open 0.5s ease-out forwards;
}


/* Progress bar */
.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #FFA500;
  width: 0;
  transition: none;
  animation-name: fill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* Progress bar fill animation */
@keyframes fill {
  from { width: 0; }
  to { width: 100%; }
}

/* ============================================
   RSL Animate on Scroll Component
   ============================================ */

/* Card Reveal Animation - Custom animation designed specifically for cards on scroll
   Combines subtle upward movement, gentle scale, and a soft focus effect
   Perfect for card grids and feature sections */
@keyframes card-reveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.card-reveal {
  animation: card-reveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Base class for elements waiting to animate */
.rsl-animate-pending {
  opacity: 0;
}

/* Reduced motion support - skip animations */
@media (prefers-reduced-motion: reduce) {
  .rsl-animate-pending {
    opacity: 1 !important;
  }

  /* Disable all animations for accessibility */
  .fade-in,
  .fade-from-top,
  .fade-from-bottom,
  .fade-from-left,
  .fade-from-right,
  .fade-zoom-in,
  .slide-in-right,
  .fade-slide-up,
  .fade-slide-down,
  .spin-in,
  .expand-open,
  .blink-in,
  .card-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
