/* Utility classes for VideoMania */

:root {
  --vm-transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --vm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --vm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
  --vm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --vm-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
  
  /* Расширенные тени */
  --vm-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
  --vm-shadow-accent-sm: 0 2px 8px rgba(74, 144, 226, 0.3);
  --vm-shadow-accent-md: 0 4px 12px rgba(74, 144, 226, 0.4);
  --vm-shadow-accent-lg: 0 8px 25px rgba(99, 102, 241, 0.4);
  --vm-glow-neon: 0 0 30px rgba(99, 102, 241, 0.4);
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Shadow utilities */
.shadow-sm { box-shadow: var(--vm-shadow-sm); }
.shadow-md { box-shadow: var(--vm-shadow-md); }
.shadow-lg { box-shadow: var(--vm-shadow-lg); }
.shadow-xl { box-shadow: var(--vm-shadow-xl); }

/* Новые утилитарные классы для теней */
.shadow-2xl { box-shadow: var(--vm-shadow-2xl); }
.shadow-accent-sm { box-shadow: var(--vm-shadow-accent-sm); }
.shadow-accent-md { box-shadow: var(--vm-shadow-accent-md); }
.shadow-accent-lg { box-shadow: var(--vm-shadow-accent-lg); }
.glow-neon { box-shadow: var(--vm-glow-neon); }

/* Progress helpers */
.progress.progress-8 {
  height: 8px;
}

.progress-bar.vm-animated {
  transition: width 0.3s linear;
  width: var(--progress, 0%);
}

/* A11y utility */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Оптимизация спиннеров и анимаций загрузки */
.spinner-optimized,
.spinner-border,
.loading-icon,
[class*="spinner"] {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Предотвращение мерцания текста в кнопках */
.btn-text-stable {
  display: inline-block;
  min-width: 1ch;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Стабильные контейнеры */
.layout-stable {
  contain: layout style;
  isolation: isolate;
}

/* Оптимизированная анимация вращения */
@keyframes spin-optimized {
  from { transform: rotate3d(0, 0, 1, 0deg); }
  to { transform: rotate3d(0, 0, 1, 360deg); }
}

.spin-optimized {
  animation: spin-optimized 1s linear infinite;
}

/* Плавное появление */
@keyframes fade-in-optimized {
  from { 
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to { 
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fade-in-optimized {
  animation: fade-in-optimized 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Предотвращение сдвига содержимого */
.no-layout-shift {
  aspect-ratio: attr(width) / attr(height);
  width: 100%;
  height: auto;
}

/* Оптимизация для touch устройств */
@media (hover: hover) and (pointer: fine) {
  .touch-optimized {
    touch-action: manipulation;
  }
}

/* Отключение анимаций для доступности */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}