/* Loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color2);
  z-index: 2001;
  opacity: 1;
  transition: opacity 300ms ease;
}

.loading-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('../assets/images/grid-module.png');
  background-repeat: repeat;
  background-position: top left;
  opacity: 0.07;
  pointer-events: none;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-logo {
  width: 100px;
  height: auto;
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(0.6);
  will-change: transform, opacity;
  animation: pop-in-logo 360ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.loader-lottie {
  width: 120px;
  height: 120px;
  opacity: 0;
  transform: rotate(var(--rot, 0deg)) scale(0.6);
  will-change: transform, opacity;
  animation: pop-in-logo 360ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Lottie CSS Overrides */
path.lottie-color2 {
  fill: var(--color2) !important;
}

path.lottie-color3 {
  fill: var(--color3) !important;
}

path.lottie-color4 {
  fill: var(--color4) !important;
}

@media (max-width: 480px) {
  .loader-lottie {
    width: 100px;
    height: 100px;
  }
}

.loading-text {
  font-size: var(--size-caption);
  color: var(--color1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  will-change: transform, opacity;
}

@keyframes pop-in-logo {
  from {
    opacity: 0;
    transform: rotate(var(--rot, 0deg)) scale(0.6);
  }

  to {
    opacity: 1;
    transform: rotate(var(--rot, 0deg)) scale(1);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Force Lottie inline RGB attributes to follow CSS variables */
.loader-lottie svg [fill*="238"][fill*="34"] {
  fill: var(--color3) !important;
}

.loader-lottie svg [stroke*="238"][stroke*="34"] {
  stroke: var(--color3) !important;
}

.loader-lottie svg [fill*="247"][fill*="85"] {
  fill: var(--color4) !important;
}

.loader-lottie svg [stroke*="247"][stroke*="85"] {
  stroke: var(--color4) !important;
}