:root {
  --ts-preloader-bg: #0a0e14;
  --ts-preloader-tile: #1e3a8a;
  --ts-preloader-tile-deep: #16295f;
  --ts-preloader-accent: #3b82f6;
  --ts-preloader-text: #f4f7fb;
  --ts-preloader-muted: #8a99ac;
  --ts-preloader-track: rgba(148, 163, 184, 0.12);
}

[data-theme='light'] {
  --ts-preloader-bg: #edf1f7;
  --ts-preloader-text: #0e1b2d;
  --ts-preloader-muted: #64748b;
  --ts-preloader-track: rgba(31, 58, 95, 0.12);
}

.ts-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  overflow: hidden;
  color: var(--ts-preloader-text);
  background:
    radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.08), transparent 34%),
    var(--ts-preloader-bg);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  opacity: 1;
  visibility: visible;
  transition: opacity 480ms cubic-bezier(0.2, 0, 0, 1), visibility 480ms linear;
}

[data-theme='light'] .ts-preloader {
  background:
    radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.1), transparent 34%),
    var(--ts-preloader-bg);
}

.ts-preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ts-preloader-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ts-preloader-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8fafc;
  background: linear-gradient(145deg, var(--ts-preloader-tile), var(--ts-preloader-tile-deep));
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35), 0 8px 24px rgba(30, 58, 138, 0.36);
  animation: tsPreloaderTileIn 600ms cubic-bezier(0.22, 1, 0.36, 1) both,
    tsPreloaderTilePulse 2.4s ease-in-out 800ms infinite;
}

.ts-preloader-trend {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: tsPreloaderDraw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 300ms infinite;
}

.ts-preloader-head {
  opacity: 0;
  animation: tsPreloaderHead 1.4s ease 300ms infinite;
}

.ts-preloader-wordmark {
  display: flex;
  color: var(--ts-preloader-text);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ts-preloader-wordmark span {
  opacity: 0;
  transform: translateY(8px);
  animation: tsPreloaderLetter 400ms ease forwards;
}

.ts-preloader-wordmark span:nth-child(1) { animation-delay: 350ms; }
.ts-preloader-wordmark span:nth-child(2) { animation-delay: 395ms; }
.ts-preloader-wordmark span:nth-child(3) { animation-delay: 440ms; }
.ts-preloader-wordmark span:nth-child(4) { animation-delay: 485ms; }
.ts-preloader-wordmark span:nth-child(5) { animation-delay: 530ms; }
.ts-preloader-wordmark span:nth-child(6) { animation-delay: 575ms; }
.ts-preloader-wordmark span:nth-child(7) { animation-delay: 620ms; }
.ts-preloader-wordmark span:nth-child(8) { animation-delay: 665ms; }
.ts-preloader-wordmark span:nth-child(9) { animation-delay: 710ms; }

.ts-preloader-progress {
  width: min(180px, calc(100vw - 64px));
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ts-preloader-track);
}

.ts-preloader-progress-fill {
  width: 4%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ts-preloader-tile), var(--ts-preloader-accent));
  transition: width 220ms ease-out;
}

.ts-preloader-status {
  min-height: 16px;
  color: var(--ts-preloader-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes tsPreloaderTileIn {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tsPreloaderTilePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.35), 0 8px 24px rgba(30, 58, 138, 0.36); }
  50% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0), 0 8px 24px rgba(30, 58, 138, 0.36); }
}

@keyframes tsPreloaderDraw {
  0% { stroke-dashoffset: 60; }
  55%, 80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes tsPreloaderHead {
  0%, 45% { opacity: 0; transform: translate(2px, -2px); }
  60%, 80% { opacity: 1; transform: translate(0); }
  100% { opacity: 0; }
}

@keyframes tsPreloaderLetter {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ts-preloader,
  .ts-preloader-progress-fill {
    transition-duration: 1ms;
  }

  .ts-preloader-logo,
  .ts-preloader-trend,
  .ts-preloader-head,
  .ts-preloader-wordmark span {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}