/* VIP Admin animations — контент всегда виден, декор не перекрывает UI */

@keyframes vipFadeUp {
  from { transform: translateY(8px); }
  to { transform: none; }
}

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

@keyframes vipMesh {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes vipShine {
  from { transform: translateX(-100%); }
  to { transform: translateX(200%); }
}

@keyframes vipPulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(8, 86, 177, 0.25); }
  50% { box-shadow: 0 0 0 6px rgba(8, 86, 177, 0); }
}

@keyframes vipLogoReveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes vipRingPulseCorner {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.03); opacity: 0.16; }
}

@keyframes vipLoginCardIn {
  from { transform: translateY(16px) scale(0.98); }
  to { transform: none; }
}

/* Опциональный лёгкий enter — только transform, без скрытия */
html.vip-motion-on .vip-animate-in {
  animation: vipFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vip-login-card {
  animation: vipLoginCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.vip-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  pointer-events: none;
}
.vip-btn--primary:hover::after {
  animation: vipShine 0.6s ease;
}

.vip-btn .vip-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: vipRipple 0.5s ease-out;
  pointer-events: none;
}
@keyframes vipRipple {
  to { transform: scale(4); opacity: 0; }
}

.vip-btn--danger:active { animation: vipShake 0.3s ease; }
@keyframes vipShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .vip-login-mesh,
  .vip-login-orb,
  .vip-login-ring,
  .vip-empty__icon,
  .vip-btn--pulse,
  .vip-login-card,
  html.vip-motion-on .vip-animate-in {
    animation: none !important;
  }
}