/* Light theme; purple accent — optional .dark keeps prior escape hatch */
:root {
  --preloader-bg: #ffffff;
  --preloader-track: #ede9fe;
  --preloader-track-edge: #ddd6fe;
  --preloader-purple: #7c3aed;
  --preloader-purple-shine: #a78bfa;
  --preloader-title: #1e1b4b;
  --preloader-sub: #64748b;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family:
    'SFProText',
    apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica',
    sans-serif !important;
  font-display: swap;
  visibility: hidden;
  background: var(--preloader-bg);
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.preloader.dark {
  --preloader-bg: #161616;
  --preloader-track: #2e1064;
  --preloader-track-edge: #4c1d95;
  --preloader-title: #f5f3ff;
  --preloader-sub: #a78bfa;
}

.preloader.hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}

.preloader.shown {
  visibility: visible;
  opacity: 1;
}

.preloader__hidden {
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Stack: title, line, subtitle — texts collapsed until reveal */
.preloader__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 432px;
  max-width: min(432px, 80vw);
}

.preloader__top {
  width: 100%;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 21px !important;
  color: var(--preloader-title);
  text-align: center;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(6px);
}

.preloader__bottom {
  width: 100%;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  color: var(--preloader-sub);
  text-align: center;
  letter-spacing: -0.15px !important;
  opacity: 0;
  transform: translateY(6px);
}

/* Line grows left → right first */
.preloader__line-block {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.preloader.shown .preloader__line-block {
  animation: preloader-line-grow 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.preloader__loader {
  position: relative;
  width: 100%;
  height: 4px;
  margin-bottom: 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--preloader-track-edge) 0%,
    var(--preloader-track) 100%
  );
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6);
}

@keyframes preloader-line-grow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes preloader-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(432px);
  }
}

.preloader__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 112px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--preloader-purple) 0%,
    var(--preloader-purple-shine) 45%,
    var(--preloader-purple) 100%
  );
  transform: translateX(-100%);
  opacity: 0;
}

/* Shimmer starts after the bar has grown */
.preloader.shown .preloader__inner {
  animation:
    preloader-inner-fade 0.35s ease 0.45s forwards,
    preloader-shimmer 1.45s ease-in-out 0.75s infinite;
}

@keyframes preloader-inner-fade {
  to {
    opacity: 1;
  }
}

/* Title + subtitle together after the line */
.preloader.shown .preloader__top {
  animation: preloader-text-in-top 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
}

.preloader.shown .preloader__bottom {
  animation: preloader-text-in-bottom 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
}

@keyframes preloader-text-in-top {
  to {
    max-height: 48px;
    margin-bottom: 16px;
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes preloader-text-in-bottom {
  to {
    max-height: 48px;
    margin-top: 16px;
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .preloader.shown .preloader__line-block {
    animation: none;
    transform: scaleX(1);
  }

  .preloader.shown .preloader__inner {
    animation: none;
    opacity: 1;
    transform: translateX(0);
  }

  .preloader.shown .preloader__top {
    animation: preloader-text-in-top-reduced 0.3s ease 0.1s forwards;
  }

  .preloader.shown .preloader__bottom {
    animation: preloader-text-in-bottom-reduced 0.3s ease 0.1s forwards;
  }

  @keyframes preloader-text-in-top-reduced {
    to {
      max-height: 48px;
      margin-bottom: 16px;
      opacity: 1;
      transform: none;
    }
  }

  @keyframes preloader-text-in-bottom-reduced {
    to {
      max-height: 48px;
      margin-top: 16px;
      opacity: 1;
      transform: none;
    }
  }
}