/* ============================================================
   MEDIA.LEAD — Preloader: Cascade Wave + Glow
   ============================================================ */

/* ── Переменные ─────────────────────────────────────────────── */
:root {
  --preloader-bg: #08080D;
  --preloader-accent-1: #ff3a3a;
  --preloader-accent-2: #7d72fe;
  --preloader-text: #fff;
  --preloader-muted: #5C5C70;

  --preloader-logo-delay: 0.3s;
  --preloader-letters-start: 0.9s;
  --preloader-letter-stagger: 0.06s;
  --preloader-dots-delay: 1.7s;
}

/* ── Контейнер ──────────────────────────────────────────────── */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--preloader-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ── Фоновое свечение ───────────────────────────────────────── */
.preloader__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(255, 58, 58, 0.12) 0%,
    rgba(125, 114, 254, 0.06) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: preloaderGlowPulse 2s ease-in-out infinite;
  pointer-events: none;
}

/* ── Логотип ────────────────────────────────────────────────── */
.preloader__logo {
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: preloaderLogoReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--preloader-logo-delay) forwards;
}

.preloader__logo svg {
  display: block;
  width: 48px;
  height: 48px;
  animation: preloaderLogoSpin 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--preloader-logo-delay) both;
}

/* ── Буквы ──────────────────────────────────────────────────── */
.preloader__letters {
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.preloader__char {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--preloader-text);
  opacity: 0;
  transform: translateY(20px) scale(0.7);
  animation: preloaderWave 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Точка — градиентная */
.preloader__char--dot {
  background: linear-gradient(130deg, var(--preloader-accent-1), var(--preloader-accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Каскадная задержка (10 букв: M-E-D-I-A-.-L-E-A-D) */
.preloader__char:nth-child(1)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 0); }
.preloader__char:nth-child(2)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 1); }
.preloader__char:nth-child(3)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 2); }
.preloader__char:nth-child(4)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 3); }
.preloader__char:nth-child(5)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 4); }
.preloader__char:nth-child(6)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 5.5); }
.preloader__char:nth-child(7)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 6.5); }
.preloader__char:nth-child(8)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 7.5); }
.preloader__char:nth-child(9)  { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 8.5); }
.preloader__char:nth-child(10) { animation-delay: calc(var(--preloader-letters-start) + var(--preloader-letter-stagger) * 9.5); }

/* ── Точки загрузки ─────────────────────────────────────────── */
.preloader__dots {
  display: flex;
  gap: 6px;
  opacity: 0;
  animation: preloaderFadeIn 0.4s ease var(--preloader-dots-delay) forwards;
}

.preloader__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--preloader-muted);
  animation: preloaderDotPulse 1.2s ease-in-out infinite;
}

.preloader__dot:nth-child(1) { animation-delay: 0s; }
.preloader__dot:nth-child(2) { animation-delay: 0.2s; }
.preloader__dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes preloaderGlowPulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%      { transform: scale(1.3); opacity: 1; }
}

@keyframes preloaderLogoReveal {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes preloaderLogoSpin {
  from { transform: rotate(-180deg); }
  to   { transform: rotate(0deg); }
}

@keyframes preloaderWave {
  from { opacity: 0; transform: translateY(20px) scale(0.7); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes preloaderFadeIn {
  to { opacity: 1; }
}

@keyframes preloaderDotPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.5); }
}