/* ============================================
   АНИМАЦИИ — KEYFRAMES
   ============================================ */

/* Появление снизу */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(28px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Простое появление */
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

/* Плавное движение фоновых элементов */
@keyframes drift{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(40px,-30px);}
}

@keyframes drift2{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-30px,40px);}
}

@keyframes drift3{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(20px,30px) scale(1.08);}
}

/* Медленное вращение */
@keyframes spinSlow{
  to{transform:rotate(360deg);}
}

/* Вращение в обратную сторону */
@keyframes spinRev{
  to{transform:rotate(-360deg);}
}

/* Парящее движение */
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

/* Расширяющийся пульсирующий круг */
@keyframes pulseRing{
  0%{
    transform:scale(0.85);
    opacity:0.7;
  }
  100%{
    transform:scale(1.6);
    opacity:0;
  }
}

/* Движение геометрических фигур */
@keyframes shapeFloat{
  0%,100%{transform:translate(0,0) rotate(0);}
  33%{transform:translate(10px,-12px) rotate(4deg);}
  66%{transform:translate(-12px,8px) rotate(-3deg);}
}

/* Анимация мерцающей линии */
@keyframes shimmerLine{
  0%{background-position:-200% 50%;}
  100%{background-position:200% 50%;}
}

/* ============================================
   АНИМАЦИИ ФОНОВЫХ БЛОБОВ
   ============================================ */

@keyframes blobDrift1{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
  25%{transform:translate3d(-6%,4%,0) scale(1.08) rotate(4deg);}
  50%{transform:translate3d(-2%,-4%,0) scale(1.04) rotate(6deg);}
  75%{transform:translate3d(-7%,2%,0) scale(1.1) rotate(-2deg);}
}

@keyframes blobDrift2{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
  25%{transform:translate3d(6%,-3%,0) scale(1.1) rotate(-4deg);}
  50%{transform:translate3d(3%,4%,0) scale(1.06) rotate(-6deg);}
  75%{transform:translate3d(7%,-4%,0) scale(1.12) rotate(3deg);}
}

@keyframes blobDrift3{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
  25%{transform:translate3d(-5%,-6%,0) scale(0.94) rotate(3deg);}
  50%{transform:translate3d(4%,-2%,0) scale(1.08) rotate(-4deg);}
  75%{transform:translate3d(-2%,5%,0) scale(0.96) rotate(5deg);}
}

@keyframes blobDrift4{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
  25%{transform:translate3d(4%,6%,0) scale(1.08) rotate(-2deg);}
  50%{transform:translate3d(-4%,3%,0) scale(0.96) rotate(4deg);}
  75%{transform:translate3d(6%,-3%,0) scale(1.1) rotate(-5deg);}
}

@keyframes circlePulse{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(12px,-20px,0) scale(1.18);}
}

@keyframes whiteFloat{
  0%,100%{
    transform:translate3d(0,0,0) scale(1);
  }
  50%{
    transform:translate3d(-6%,4%,0) scale(1.12);
  }
}

/* Применение к классам блобов */
.bg-blob{
  transform-origin:center;
  transform-box:fill-box;
  filter:drop-shadow(0 10px 18px rgba(10,21,48,0.28));
}
.blob-1{animation:blobDrift1 16s ease-in-out infinite;}
.blob-2{animation:blobDrift2 18s ease-in-out infinite;}
.blob-3{animation:blobDrift3 14s ease-in-out infinite;}
.blob-4{animation:blobDrift4 17s ease-in-out infinite;}
.blob-5{animation:blobDrift1 20s ease-in-out infinite;animation-delay:-4s;}
.blob-6{animation:blobDrift2 13s ease-in-out infinite;animation-delay:-2s;}

.bg-dot{
  animation:circlePulse 7s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}

.bg-dot.d2{animation-duration:9s;animation-delay:-2s;}
.bg-dot.d3{animation-duration:11s;animation-delay:-5s;}

/* Мягкие (белые/светлые) формы */
.bg-soft{
  animation:whiteFloat 15s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
  filter:drop-shadow(0 4px 14px rgba(10,21,48,0.10));
}
.bg-soft:nth-of-type(even){animation-duration:19s;animation-delay:-6s;}
.bg-soft:nth-of-type(3n){animation-duration:13s;animation-delay:-3s;}

/* Совместимость со старым классом (если остался в каких-то файлах) */
.bg-white-blob{
  animation:whiteFloat 15s ease-in-out infinite;
  transform-origin:center;
}

.bg-white-blob.w2{animation-duration:19s;animation-delay:-6s;}
.bg-white-blob.w3{animation-duration:13s;animation-delay:-3s;}
.bg-white-blob.w4{animation-duration:17s;animation-delay:-8s;}

/* ============================================
   ПОЯВЛЕНИЕ ЭЛЕМЕНТОВ ПРИ СКРОЛЛЕ
   ============================================ */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}

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

/* ============================================
   КОЛЬЦА В HERO — пульсация с разными ритмами
   ============================================ */

@keyframes ringPulseA{
  0%,100%{transform:scale(1);opacity:0.65;}
  50%{transform:scale(1.05);opacity:1;}
}
@keyframes ringPulseB{
  0%,100%{transform:scale(1);opacity:0.55;}
  50%{transform:scale(1.07);opacity:0.95;}
}
@keyframes ringPulseC{
  0%,100%{transform:scale(1);opacity:0.45;}
  50%{transform:scale(1.04);opacity:0.85;}
}
@keyframes ringSpin{
  to{transform:rotate(360deg);}
}

/* Синее внешнее — спокойное */
.ring-1{animation:ringPulseA 5.5s ease-in-out infinite;}

/* Оранжевое пунктирное — медленное вращение */
.ring-2{animation:ringSpin 38s linear infinite,ringPulseB 6.5s ease-in-out infinite;}

/* Белое — быстрее, в противофазе */
.ring-3{animation:ringPulseA 4.5s ease-in-out infinite;animation-delay:-1.5s;}

/* Синее внутреннее жирное — быстрый пульс */
.ring-4{animation:ringPulseC 3.8s ease-in-out infinite;animation-delay:-0.8s;}

/* На телефонах прячем только КРАЙНИЕ фигуры (помечены .m-edge
   в background.html). При разъезде они и так уезжают за край, а центральные
   фигуры всех цветов остаются — поэтому при разъезде виден микс,
   а не только синие. */
@media (max-width: 820px){
  .m-edge{ display:none; }
}

/* На телефонах отключаем бесконечное «плавание» фигур (idle-анимацию).
   Это главная причина подёргивания: каждая фигура пересчитывается
   покадрово (а с тенью — особенно). Разъезд при скролле НЕ трогаем —
   он работает через отдельный сдвиг слоёв. Тени остаются, но становятся
   «статичными» и почти ничего не стоят. */
@media (max-width: 820px){
  .bg-blob,
  .bg-soft,
  .bg-dot{
    animation: none;
  }
}