splash.css

/* Импорт шрифта Roobert */
@import url('https://fonts.googleapis.com/css2?family=Roobert:wght@300;400;500;600;700&display=swap');

/* Tailwind Violet палитра */
:root {
  --violet-50: #faf5ff;
  --violet-100: #f3e8ff;
  --violet-200: #e9d5ff;
  --violet-300: #d8b4fe;
  --violet-400: #c084fc;
  --violet-500: #a855f7;
  --violet-600: #9333ea;
  --violet-700: #7e22ce;
  --violet-800: #6b21a8;
  --violet-900: #581c87;
  --violet-950: #3b0764;

  /* Дополнительные цвета */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roobert', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, var(--gray-950) 0%, #0a0a0f 50%, #0d0a14 100%);
  color: var(--violet-100);
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.splash-container {
  text-align: center;
  animation: fadeIn 0.5s ease-out;
  padding: 2rem;
}

/* Анимация появления */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Логотип */
.logo-container {
  margin-bottom: 3rem;
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.logo {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.3), 0 0 80px rgba(168, 85, 247, 0.15);
  background: rgba(168, 85, 247, 0.1);
  padding: 8px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

/* Контейнер статуса */
.status-container {
  margin-bottom: 2rem;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-text {
  font-size: 18px;
  font-weight: 500;
  color: var(--violet-200);
  opacity: 1;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
  letter-spacing: 0.01em;
}

.status-text.fade-out {
  opacity: 0;
  transform: scale(0.98);
}

/* Прогресс контейнер */
.progress-container {
  width: 320px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.progress-container.hidden {
  display: none;
}

.progress-container.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Прогресс бар */
.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(168, 85, 247, 0.1);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--violet-500), var(--violet-400));
  border-radius: 999px;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5), 0 0 20px rgba(168, 85, 247, 0.3);
  position: relative;
  overflow: hidden;
}

/* Анимация свечения для прогресс бара */
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

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

/* Текст прогресса */
.progress-text {
  margin-top: 0.75rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--violet-300);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

/* Точки загрузки */
.status-text::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
  position: absolute;
  margin-left: 2px;
}

@keyframes dots {
  0%,
  20% {
    content: '';
  }
  40% {
    content: '.';
  }
  60% {
    content: '..';
  }
  80%,
  100% {
    content: '...';
  }
}