/* ============================================
   SAZGER — animations
   Блобы, волна, reveal, подсказки
   ============================================ */

/* --- Блобы (цветные пятна в фоне) --- */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: float-slow 12s ease-in-out infinite;
  will-change: transform;
}

.blob:nth-child(2) {
  animation: float-drift 15s ease-in-out infinite;
}

.blob:nth-child(3) {
  animation: float-slow 18s ease-in-out infinite reverse;
}

.blob:nth-child(4) {
  animation: float-drift 20s ease-in-out infinite reverse;
}

/* --- Ключевые кадры для блобов --- */
@keyframes float-slow {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(60px, -40px) scale(1.1);
  }
  50% {
    transform: translate(-40px, 30px) scale(0.92);
  }
  75% {
    transform: translate(35px, 25px) scale(1.06);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes float-drift {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(-55px, -55px) scale(1.14) rotate(4deg);
  }
  66% {
    transform: translate(40px, 28px) scale(0.9) rotate(-2deg);
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

/* --- Плавающая анимация (логотип, иконки) --- */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* --- Волна (music-wave) --- */
@keyframes wave {
  0%, 100% {
    height: 18px;
  }
  50% {
    height: 72px;
  }
}

/* --- Вращение колёсика мыши (подсказка) --- */
@keyframes wheel {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
}

/* --- Свайп-подсказка (мобильные) --- */
@keyframes swipe {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-12px);
    opacity: 1;
  }
}

/* --- Reveal: появление элементов --- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Виньетка (затемнение по краям слайда) --- */
.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 52%,
    var(--color-vignette) 100%);
}

/* --- Шум (лёгкая текстура на фоне) --- */
.slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* --- Свечение акцента (для KPI, логотипа) --- */
.glow-accent {
  box-shadow: 0 25px 60px rgba(232, 176, 75, 0.18);
}

/* --- Частицы (canvas) --- */
.particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

.particle-canvas-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* --- Mouse spotlight (световое пятно за курсором) --- */
.mouse-spotlight {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 0.15s ease;
}

/* --- Анимация появления текста в заголовке --- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fade-up 0.6s ease forwards;
}

/* --- Пульсация акцента --- */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* --- Уважение к настройкам пользователя --- */
@media (prefers-reduced-motion: reduce) {
  .blob,
  .music-wave span,
  .scroll-hint__wheel,
  .swipe-hint__icon,
  .pulse {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Мобильные: облегчаем анимации --- */
@media (max-width: 640px) {
  .blob {
    filter: blur(70px);
    opacity: 0.4;
  }

  .particle-canvas,
  .particle-canvas-ambient {
    opacity: 0.5;
  }

  .music-wave {
    height: 56px;
    margin-top: 0.9rem;
  }

  .music-wave span {
    width: 8px;
  }

  @keyframes wave {
    0%, 100% { height: 14px; }
    50%      { height: 56px; }
  }
}

/* ============================================
   МОБИЛЬНЫЕ: убрать виньетку и шум
   ============================================ */
@media (max-width: 640px) {
  .slide::before,
  .slide::after {
    display: none !important;
  }
}