/* Consolidated Animation Styles */

/* Fade In Animation */
.rad-fade-in {
  will-change: opacity, transform;
  animation-name: rad-fade-in-fallback;
  animation-duration: 5s;
  animation-fill-mode: both;
}

@keyframes rad-fade-in-fallback {
  0% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fonts-loaded .rad-fade-in.rad-waiting {
  animation-name: none;
  opacity: 0;
}

.fonts-loaded .rad-fade-in.rad-animate {
  animation-name: rad-fade-in;
  animation-duration: 1.1s;
  animation-fill-mode: both;
}

@keyframes rad-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Fade In Long Animation */
.rad-fade-in-long {
  will-change: opacity, transform;
  animation-name: rad-fade-in-long-fallback;
  animation-duration: 8s;
  animation-fill-mode: both;
}

@keyframes rad-fade-in-long-fallback {
  0% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fonts-loaded .rad-fade-in-long.rad-waiting {
  animation-name: none;
  opacity: 0;
}

.fonts-loaded .rad-fade-in-long.rad-animate {
  animation-name: rad-fade-in-long;
  animation-duration: 2s;
  animation-fill-mode: both;
}

@keyframes rad-fade-in-long {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Fade Down Animation */
.rad-fade-down {
  will-change: opacity, transform;
  animation-name: rad-fade-down-fallback;
  animation-duration: 5s;
  animation-fill-mode: both;
  transform: translateY(-30px);
}

@keyframes rad-fade-down-fallback {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  75% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fonts-loaded .rad-fade-down.rad-waiting {
  animation-name: none;
  opacity: 0;
  transform: translateY(-30px);
}

.fonts-loaded .rad-fade-down.rad-animate {
  animation-name: rad-fade-down;
  animation-duration: 1.1s;
}

@keyframes rad-fade-down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale Down Animation */
.rad-scale-down {
  will-change: opacity, transform;
  animation-name: rad-scale-down-fallback;
  animation-duration: 5s;
  animation-fill-mode: both;
  transform-origin: 50% 0;
}

@keyframes rad-scale-down-fallback {
  0% {
    opacity: 0;
    transform: scaleY(0.95);
  }

  75% {
    opacity: 0;
    transform: scaleY(0.95);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.fonts-loaded .rad-scale-down.rad-waiting {
  animation-name: none;
  opacity: 0;
  transform: scaleY(0.95);
}

.fonts-loaded .rad-scale-down.rad-animate {
  animation-name: rad-scale-down;
  animation-duration: 1.1s;
  animation-fill-mode: both;
}

@keyframes rad-scale-down {
  0% {
    opacity: 0;
    transform: scaleY(0.95);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}