/**
 * Loading Animation Component Styles
 * Reusable bouncing dots loading animation with size variations
 */

/* Base loading animation styles */
.loading-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  font-family: 'Rockwell', serif;
  color: var(--colour-maroon, #8B0000);
  position: relative;
  flex-direction: column;
  gap: 24px;
}

.loading-animation__text {
  font-size: 18px;
  line-height: 1.4;
}

.loading-animation__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 14px;
  --animation-duration: 1.5s; /* CSS custom property for animation speed */
}

.loading-animation__dot {
  width: 14px;
  height: 14px;
  background: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-inactive-dark.svg') no-repeat center;
  background-size: contain;
  transition: all 0.3s ease;
}

.loading-animation__dot--1 {
  animation: loadingAnimationDot1 var(--animation-duration) infinite ease-in-out;
}

.loading-animation__dot--2 {
  animation: loadingAnimationDot2 var(--animation-duration) infinite ease-in-out;
}

.loading-animation__dot--3 {
  animation: loadingAnimationDot3 var(--animation-duration) infinite ease-in-out;
}

/* Size variations */

/* Small size */
.loading-animation--small {
  height: 200px;
  min-height: 200px;
  gap: 16px;
}

.loading-animation--small .loading-animation__text {
  font-size: 14px;
}

.loading-animation--small .loading-animation__dots {
  gap: 6px;
  height: 12px;
}

.loading-animation--small .loading-animation__dot {
  width: 12px;
  height: 12px;
}

/* Medium size (default) */
.loading-animation--medium {
  height: 440px;
  min-height: 440px;
  gap: 24px;
}

.loading-animation--medium .loading-animation__text {
  font-size: 18px;
}

/* Large size */
.loading-animation--large {
  height: 600px;
  min-height: 600px;
  gap: 32px;
}

.loading-animation--large .loading-animation__text {
  font-size: 24px;
}

.loading-animation--large .loading-animation__dots {
  gap: 12px;
  height: 18px;
}

.loading-animation--large .loading-animation__dot {
  width: 18px;
  height: 18px;
}

/* Animation keyframes */
@keyframes loadingAnimationDot1 {
  0%, 80%, 100% {
    transform: translateY(0);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-inactive-dark.svg');
  }
  
  10%, 20% {
    transform: translateY(-8px);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-active.svg');
  }
}

@keyframes loadingAnimationDot2 {
  0%, 20%, 80%, 100% {
    transform: translateY(0);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-inactive-dark.svg');
  }
  
  30%, 40% {
    transform: translateY(-8px);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-active.svg');
  }
}

@keyframes loadingAnimationDot3 {
  0%, 40%, 80%, 100% {
    transform: translateY(0);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-inactive-dark.svg');
  }
  
  50%, 60% {
    transform: translateY(-8px);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-active.svg');
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .loading-animation--medium {
    height: 400px;
    min-height: 400px;
  }

  .loading-animation--medium .loading-animation__text {
    font-size: 16px;
  }

  .loading-animation--large {
    height: 500px;
    min-height: 500px;
  }

  .loading-animation--large .loading-animation__text {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .loading-animation--medium {
    height: 400px;
    min-height: 400px;
    padding: 0 16px;
  }

  .loading-animation--medium .loading-animation__text {
    font-size: 14px;
  }

  .loading-animation--large {
    height: 450px;
    min-height: 450px;
    padding: 0 16px;
  }

  .loading-animation--large .loading-animation__text {
    font-size: 18px;
  }
}

@media (max-width: 320px) {
  .loading-animation--medium {
    height: 360px;
    min-height: 360px;
  }

  .loading-animation--medium .loading-animation__text {
    font-size: 13px;
  }

  .loading-animation--large {
    height: 400px;
    min-height: 400px;
  }

  .loading-animation--large .loading-animation__text {
    font-size: 16px;
  }
}

/* Theme variations */
.loading-animation--light {
  color: var(--colour-dark, #333);
}

.loading-animation--light .loading-animation__dot {
  background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-inactive-light.svg');
}

.loading-animation--light .loading-animation__dot--1 {
  animation: loadingAnimationDot1Light var(--animation-duration) infinite ease-in-out;
}

.loading-animation--light .loading-animation__dot--2 {
  animation: loadingAnimationDot2Light var(--animation-duration) infinite ease-in-out;
}

.loading-animation--light .loading-animation__dot--3 {
  animation: loadingAnimationDot3Light var(--animation-duration) infinite ease-in-out;
}

/* Light theme animations (if you have light indicators) */
@keyframes loadingAnimationDot1Light {
  0%, 80%, 100% {
    transform: translateY(0);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-inactive-light.svg');
  }
  
  10%, 20% {
    transform: translateY(-8px);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-active-light.svg');
  }
}

@keyframes loadingAnimationDot2Light {
  0%, 20%, 80%, 100% {
    transform: translateY(0);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-inactive-light.svg');
  }
  
  30%, 40% {
    transform: translateY(-8px);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-active-light.svg');
  }
}

@keyframes loadingAnimationDot3Light {
  0%, 40%, 80%, 100% {
    transform: translateY(0);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-inactive-light.svg');
  }
  
  50%, 60% {
    transform: translateY(-8px);
    background-image: url('https://assets-cdn.sums.su/NH/1web-assets/global-assets/media/indicator-active-light.svg');
  }
}