/* animations.css — keyframes и анимированные элементы */

/* ---------- Появление контента ---------- */

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(28px); }
  to{   opacity:1; transform:translateY(0); }
}

@keyframes fadeIn{
  from{ opacity:0; }
  to{   opacity:1; }
}

.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);
}

/* ---------- Фоновые фигуры (paper-cut) ----------
   Плавание — четыре разных дрейфа, чтобы фигуры не двигались синхронно.
   Тень задана каждой фигуре, а не слою целиком: у слоя браузер склеивает
   фигуры в один силуэт и обводит только внешний контур. */

@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 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 8px 14px rgba(10,21,48,0.24));
}

.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-5{ animation:blobDrift1 20s ease-in-out infinite; animation-delay:-4s; }
.blob-6{ animation:blobDrift2 13s ease-in-out infinite; animation-delay:-2s; }

/* Белые фигуры — тень мягче, дрейф спокойнее */
.bg-soft{
  animation:whiteFloat 15s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
  filter:drop-shadow(0 5px 12px rgba(10,21,48,0.16));
}

.bg-soft:nth-of-type(even){ animation-duration:19s; animation-delay:-6s; }
.bg-soft:nth-of-type(3n){   animation-duration:13s; animation-delay:-3s; }

/* Тач-устройства: гасим плавание и per-figure will-change — это про производительность:
   пока фигура шевелится, размытие drop-shadow считается заново каждый кадр. */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  .bg-blob,
  .bg-soft{
    animation:none;
    will-change:auto;
  }
}

/* Тени снимаем ТОЛЬКО по ШИРИНЕ экрана — это вопрос вида, а не скорости:
   на мелком экране тень не читается как глубина и только грязнит контуры.
   Условие тача сюда добавлять нельзя: в режиме адаптива DevTools браузер сообщает
   pointer:coarse даже при ширине 1920, и тени пропадают на десктопе. */
@media (max-width:1024px){
  .bg-blob,
  .bg-soft{
    filter:none;
  }
}

/* ---------- Кольца в 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); }
}

/* Пульсирующее свечение — используется в components.css */
@keyframes pulseRing{
  0%{   transform:scale(0.85); opacity:0.7; }
  100%{ transform:scale(1.6);  opacity:0; }
}

.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; }