/**
 * Creditfixrr marketing landing loader — simple, dark, brand-first.
 * Only used by landing_page.blade.php (not the app/PWA shells).
 */

html.cf-landing-loader-active,
html.cf-landing-loader-active body {
  margin: 0;
  background: #05070c;
  color-scheme: dark;
}

#cf-landing-loader {
  --cf-ll-accent: var(--cf-ll-accent-route, #0d9488);
  --cf-ll-diy: #3b6cf0;
  --cf-ll-biz: #0d9488;
  --cf-ll-partners: #c59a2e;
  --cf-ll-gpt: #e07a2f;

  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, color-mix(in srgb, var(--cf-ll-accent) 14%, transparent), transparent 70%),
    #05070c;
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.5s linear;
}

#cf-landing-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cf-ll__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 1.5rem;
  text-align: center;
}

.cf-ll__logo {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: cf-ll-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}

.cf-ll__logo img {
  display: block;
  width: min(56vw, 200px);
  height: auto;
}

.cf-ll__rail {
  position: relative;
  width: min(52vw, 148px);
  height: 2px;
  margin-top: 0.2rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  animation: cf-ll-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.cf-ll__rail-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -45%;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cf-ll-accent),
    color-mix(in srgb, var(--cf-ll-accent) 55%, #fff),
    transparent
  );
  animation: cf-ll-sweep 1.2s ease-in-out infinite;
}

.cf-ll__dots {
  display: flex;
  gap: 6px;
  margin-top: 0.15rem;
  opacity: 0;
  animation: cf-ll-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

.cf-ll__dot {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  opacity: 0.35;
  animation: cf-ll-pulse 1.4s ease-in-out infinite;
}

.cf-ll__dot--diy {
  background: var(--cf-ll-diy);
  animation-delay: 0s;
}

.cf-ll__dot--biz {
  background: var(--cf-ll-biz);
  animation-delay: 0.12s;
}

.cf-ll__dot--partners {
  background: var(--cf-ll-partners);
  animation-delay: 0.24s;
}

.cf-ll__dot--gpt {
  background: var(--cf-ll-gpt);
  animation-delay: 0.36s;
}

@keyframes cf-ll-rise {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes cf-ll-sweep {
  0% {
    inset-inline-start: -45%;
  }

  100% {
    inset-inline-start: 110%;
  }
}

@keyframes cf-ll-pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-ll__logo,
  .cf-ll__rail,
  .cf-ll__dots {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .cf-ll__rail-bar,
  .cf-ll__dot {
    animation: none !important;
  }

  .cf-ll__rail-bar {
    inset-inline-start: 0;
    width: 55%;
  }

  .cf-ll__dot {
    opacity: 0.85;
  }
}