/* ============================================================
   mimo.VPN — Motion System
   animations.css · Хореография движений
   Принцип: всё живое дышит, всё нажатое упруго, всё важное вспыхивает
   ============================================================ */

/* ------------------------------------------------------------
   БЕГЛЫЙ БЛИК — росчерк света по стеклу
   ------------------------------------------------------------ */
@keyframes sheen-sweep {
  0%   { left: -80%; opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 0.9; }
  100% { left: 160%; opacity: 0; }
}

/* ------------------------------------------------------------
   ДРЕЙФ АВРОРЫ — угли медленно дышат под стеклом
   ------------------------------------------------------------ */
@keyframes aurora-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-90px, 70px, 0) scale(1.18); }
}
@keyframes aurora-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); }
  100% { transform: translate3d(110px, -80px, 0) scale(0.94); }
}

/* ------------------------------------------------------------
   ДЫХАНИЕ УГЛЯ — пульсация свечения подключённого состояния
   ------------------------------------------------------------ */
@keyframes ember-breathe {
  0%, 100% {
    box-shadow:
      0 0 48px rgba(226, 122, 88, 0.38),
      0 0 110px rgba(212, 98, 61, 0.22),
      0 0 200px rgba(184, 78, 48, 0.14),
      inset 0 1px 0 rgba(255, 220, 205, 0.35);
  }
  50% {
    box-shadow:
      0 0 72px rgba(226, 122, 88, 0.58),
      0 0 150px rgba(212, 98, 61, 0.34),
      0 0 260px rgba(184, 78, 48, 0.22),
      inset 0 1px 0 rgba(255, 235, 220, 0.5);
  }
}

/* ------------------------------------------------------------
   ЗАЖИГАНИЕ — короткая вспышка при подключении
   ------------------------------------------------------------ */
@keyframes ignite-flash {
  0%   { opacity: 0; transform: scale(0.6); }
  35%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* РАПСРОСТРАНЯЮЩИЕСЯ ВОЛНЫ — касание воды при зажигании */
@keyframes ripple-out {
  0%   { transform: scale(0.55); opacity: 0.85; }
  70%  { opacity: 0.25; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* ВРАЩАЮЩЕЕСЯ КОЛЬЦО ПОДКЛЮЧЕНИЯ — конический градиент */
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

/* ПУЛЬС ИКОНКИ при установке туннеля */
@keyframes icon-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.07); }
}

/* ЖИДКАЯ РЯБЬ на стеклянной линзе (SVG-турбулентность в <animate>) */
@keyframes warp-wobble {
  0%, 100% { filter: url(#liquid-warp); }
}

/* ------------------------------------------------------------
   ПОЯВЛЕНИЕ КОНТЕНТА — стекло всплывает из глубины
   ------------------------------------------------------------ */
@keyframes rise-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* МЯГКОЕ СВЕЧЕНИЕ АКТИВНОЙ ТОЧКИ */
@keyframes dot-glow {
  0%, 100% { box-shadow: 0 0 6px 1px currentColor; opacity: 0.9; }
  50%      { box-shadow: 0 0 12px 3px currentColor; opacity: 1; }
}

/* ТИХАЯ ПУЛЬСАЦИЯ ЗАЩИЩЁННОСТИ на чипе статуса */
@keyframes shield-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Индикатор загрузки — мерцающие столбики эквалайзера */
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1); }
}

/* Достаточно движения? Уважаем пользователя */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}