/* Киберпанк анимации и эффекты */

/* Анимация неонового свечения */
@keyframes neonFlicker {
  0%, 100% { 
    opacity: 1;
    text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan), 0 0 15px var(--neon-cyan);
  }
  50% { 
    opacity: 0.8;
    text-shadow: 0 0 2px var(--neon-cyan), 0 0 5px var(--neon-cyan), 0 0 8px var(--neon-cyan);
  }
}

.neon-flicker {
  animation: neonFlicker 1.5s ease-in-out infinite;
}

/* Анимация кибер-сетки */
@keyframes cyberGrid {
  0% { 
    background-position: 0 0, 0 0;
    opacity: 0.1;
  }
  50% { 
    background-position: 20px 20px, 20px 20px;
    opacity: 0.3;
  }
  100% { 
    background-position: 40px 40px, 40px 40px;
    opacity: 0.1;
  }
}

.cyber-grid-animated {
  animation: cyberGrid 3s linear infinite;
}

/* Анимация сканирования */
@keyframes scanLine {
  0% { 
    transform: translateY(-100%);
    opacity: 0;
  }
  50% { 
    opacity: 1;
  }
  100% { 
    transform: translateY(100vh);
    opacity: 0;
  }
}

.scan-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  z-index: 1000;
  animation: scanLine 4s linear infinite;
  pointer-events: none;
}

/* Анимация загрузки данных */
@keyframes dataLoad {
  0% { 
    width: 0%;
    background: var(--neon-cyan);
  }
  50% { 
    background: var(--neon-pink);
  }
  100% { 
    width: 100%;
    background: var(--neon-green);
  }
}

.data-loading {
  position: relative;
  overflow: hidden;
}

.data-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--neon-cyan);
  animation: dataLoad 2s ease-in-out infinite;
  z-index: -1;
}

/* Анимация появления элементов */
@keyframes cyberFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.cyber-fade-in {
  animation: cyberFadeIn 0.8s ease-out;
}

/* Анимация для кнопок */
@keyframes buttonGlow {
  0%, 100% { 
    box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan), 0 0 15px var(--neon-cyan);
  }
  50% { 
    box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan);
  }
}

.btn-cyber {
  animation: buttonGlow 2s ease-in-out infinite;
}

/* Анимация для карточек */
@keyframes cardHover {
  0% { 
    transform: translateY(0) rotateX(0);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
  }
  50% { 
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 15px 30px rgba(0, 255, 255, 0.5);
  }
  100% { 
    transform: translateY(-5px) rotateX(0);
    box-shadow: 0 10px 25px rgba(0, 255, 255, 0.4);
  }
}

.card-cyber:hover {
  animation: cardHover 0.6s ease-out;
}

/* Анимация текста */
@keyframes textGlitch {
  0% { 
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
  20% { 
    transform: translate(-2px, 2px);
    filter: hue-rotate(90deg);
  }
  40% { 
    transform: translate(-2px, -2px);
    filter: hue-rotate(180deg);
  }
  60% { 
    transform: translate(2px, 2px);
    filter: hue-rotate(270deg);
  }
  80% { 
    transform: translate(2px, -2px);
    filter: hue-rotate(360deg);
  }
  100% { 
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
}

.text-glitch {
  animation: textGlitch 0.3s ease-in-out;
}

/* Анимация для иконок */
@keyframes iconPulse {
  0%, 100% { 
    transform: scale(1);
    filter: drop-shadow(0 0 5px var(--neon-cyan));
  }
  50% { 
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px var(--neon-cyan));
  }
}

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

/* Анимация для навигации */
@keyframes navSlide {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.nav-slide {
  animation: navSlide 0.5s ease-out;
}

/* Анимация для модальных окон */
@keyframes modalCyber {
  from {
    opacity: 0;
    transform: scale(0.8) rotateX(90deg);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateX(0);
    filter: blur(0);
  }
}

.modal-cyber {
  animation: modalCyber 0.6s ease-out;
}

/* Анимация для прогресс-баров */
@keyframes progressCyber {
  0% { 
    width: 0%;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
  }
  50% { 
    background: var(--neon-pink);
    box-shadow: 0 0 20px var(--neon-pink);
  }
  100% { 
    width: 100%;
    background: var(--neon-green);
    box-shadow: 0 0 30px var(--neon-green);
  }
}

.progress-cyber {
  animation: progressCyber 3s ease-out;
}

/* Анимация для счетчиков */
@keyframes counterCyber {
  from { 
    transform: scale(0.5);
    opacity: 0;
    text-shadow: 0 0 10px var(--neon-cyan);
  }
  to { 
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 0 20px var(--neon-cyan);
  }
}

.counter-cyber {
  animation: counterCyber 0.8s ease-out;
}

/* Анимация для аватаров */
@keyframes avatarGlow {
  0% { 
    box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
  }
  50% { 
    box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan);
  }
  100% { 
    box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
  }
}

.avatar-glow {
  animation: avatarGlow 3s ease-in-out infinite;
}

/* Анимация для чекбоксов */
@keyframes checkboxCyber {
  0% { 
    transform: scale(1);
    border-color: var(--neon-cyan);
  }
  50% { 
    transform: scale(1.2);
    border-color: var(--neon-pink);
  }
  100% { 
    transform: scale(1);
    border-color: var(--neon-green);
  }
}

.checkbox-cyber:checked {
  animation: checkboxCyber 0.5s ease-out;
}

/* Анимация для табов */
@keyframes tabCyber {
  from {
    opacity: 0;
    transform: translateY(20px);
    border-bottom-color: transparent;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    border-bottom-color: var(--neon-cyan);
  }
}

.tab-cyber {
  animation: tabCyber 0.4s ease-out;
}

/* Анимация для списков */
@keyframes listCyber {
  from {
    opacity: 0;
    transform: translateX(-20px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

.list-cyber {
  animation: listCyber 0.6s ease-out;
}

/* Анимация для изображений */
@keyframes imageCyber {
  from {
    opacity: 0;
    transform: scale(0.8) rotateY(180deg);
    filter: hue-rotate(0deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateY(0);
    filter: hue-rotate(360deg);
  }
}

.image-cyber {
  animation: imageCyber 1s ease-out;
}

/* Анимация для текста */
@keyframes textCyber {
  from {
    opacity: 0;
    transform: translateY(30px);
    text-shadow: 0 0 10px var(--neon-cyan);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 20px var(--neon-cyan);
  }
}

.text-cyber {
  animation: textCyber 0.8s ease-out;
}

/* Анимация для градиентов */
@keyframes gradientCyber {
  0% { 
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  50% { 
    background-position: 100% 50%;
    filter: hue-rotate(180deg);
  }
  100% { 
    background-position: 0% 50%;
    filter: hue-rotate(360deg);
  }
}

.gradient-cyber {
  background: linear-gradient(-45deg, var(--neon-cyan), var(--neon-pink), var(--neon-green), var(--neon-orange));
  background-size: 400% 400%;
  animation: gradientCyber 8s ease infinite;
}

/* Анимация для тени */
@keyframes shadowCyber {
  0% { 
    box-shadow: 0 0 10px var(--neon-cyan);
  }
  25% { 
    box-shadow: 0 0 20px var(--neon-pink);
  }
  50% { 
    box-shadow: 0 0 30px var(--neon-green);
  }
  75% { 
    box-shadow: 0 0 20px var(--neon-orange);
  }
  100% { 
    box-shadow: 0 0 10px var(--neon-cyan);
  }
}

.shadow-cyber {
  animation: shadowCyber 4s ease-in-out infinite;
}

/* Анимация для границ */
@keyframes borderCyber {
  0% { 
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
  }
  33% { 
    border-color: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
  }
  66% { 
    border-color: var(--neon-green);
    box-shadow: 0 0 10px var(--neon-green);
  }
  100% { 
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
  }
}

.border-cyber {
  animation: borderCyber 3s ease-in-out infinite;
}

/* Специальные эффекты */
.cyber-matrix {
  background: 
    linear-gradient(90deg, transparent 98%, rgba(0, 255, 0, 0.03) 100%),
    linear-gradient(0deg, transparent 98%, rgba(0, 255, 0, 0.03) 100%);
  background-size: 20px 20px;
  animation: cyberGrid 10s linear infinite;
}

.hologram {
  position: relative;
  overflow: hidden;
}

.hologram::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
  animation: hologramScan 3s linear infinite;
}

@keyframes hologramScan {
  0% { left: -100%; }
  100% { left: 100%; }
}

.cyber-noise {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.1) 0%, transparent 50%);
  animation: cyberBg 15s ease-in-out infinite;
}

@keyframes cyberBg {
  0%, 100% { 
    background-position: 0% 0%, 100% 100%;
    filter: hue-rotate(0deg);
  }
  50% { 
    background-position: 100% 100%, 0% 0%;
    filter: hue-rotate(180deg);
  }
}