/* ===== 3D АНИМАЦИИ И ЭФФЕКТЫ ===== */

/* ===== ПЕРЕМЕННЫЕ ДЛЯ АНИМАЦИЙ ===== */
:root {
  --animation-duration-fast: 0.3s;
  --animation-duration-normal: 0.6s;
  --animation-duration-slow: 1.2s;
  --animation-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --perspective-distance: 1000px;
}

/* ===== БАЗОВЫЕ 3D НАСТРОЙКИ ===== */
.perspective-container {
  perspective: var(--perspective-distance);
  perspective-origin: center center;
}

.preserve-3d {
  transform-style: preserve-3d;
}

/* ===== АНИМАЦИИ ПОЯВЛЕНИЯ ===== */
.fade-in {
  opacity: 0;
  animation: fadeIn var(--animation-duration-normal) var(--animation-easing) forwards;
}

.slide-up {
  opacity: 0;
  transform: translateY(50px);
  animation: slideUp var(--animation-duration-normal) var(--animation-easing) forwards;
}

.slide-down {
  opacity: 0;
  transform: translateY(-50px);
  animation: slideDown var(--animation-duration-normal) var(--animation-easing) forwards;
}

.slide-left {
  opacity: 0;
  transform: translateX(50px);
  animation: slideLeft var(--animation-duration-normal) var(--animation-easing) forwards;
}

.slide-right {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideRight var(--animation-duration-normal) var(--animation-easing) forwards;
}

.scale-in {
  opacity: 0;
  transform: scale(0.8);
  animation: scaleIn var(--animation-duration-normal) var(--animation-bounce) forwards;
}

.rotate-in {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
  animation: rotateIn var(--animation-duration-slow) var(--animation-bounce) forwards;
}

/* ===== 3D ТРАНСФОРМАЦИИ ===== */
.card-3d {
  transform-style: preserve-3d;
  transition: transform var(--animation-duration-normal) var(--animation-easing);
  will-change: transform;
}

.card-3d:hover {
  transform: rotateX(5deg) rotateY(10deg) translateZ(20px);
}

.flip-3d {
  transform-style: preserve-3d;
  transition: transform 0.8s var(--animation-easing);
  position: relative;
}

.flip-3d:hover {
  transform: rotateY(180deg);
}

.flip-3d .front,
.flip-3d .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flip-3d .back {
  transform: rotateY(180deg);
}

/* ===== ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ ===== */
.float-animation {
  animation: float var(--animation-duration-slow) ease-in-out infinite;
}

.float-delayed {
  animation: float var(--animation-duration-slow) ease-in-out infinite;
  animation-delay: 0.5s;
}

.float-slow {
  animation: floatSlow 8s ease-in-out infinite;
}

/* ===== ПУЛЬСИРУЮЩИЕ ЭФФЕКТЫ ===== */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* ===== ВРАЩАЮЩИЕСЯ ЭЛЕМЕНТЫ ===== */
.rotate-slow {
  animation: rotateSlow 20s linear infinite;
}

.rotate-normal {
  animation: rotateNormal 10s linear infinite;
}

.rotate-fast {
  animation: rotateFast 5s linear infinite;
}

.rotate-reverse {
  animation: rotateReverse 15s linear infinite;
}

/* ===== ИНТЕРАКТИВНЫЕ HOVER ЭФФЕКТЫ ===== */
.hover-lift {
  transition: transform var(--animation-duration-normal) var(--animation-easing);
}

.hover-lift:hover {
  transform: translateY(-10px);
}

.hover-tilt {
  transition: transform var(--animation-duration-normal) var(--animation-easing);
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
}

.hover-scale {
  transition: transform var(--animation-duration-fast) var(--animation-easing);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.hover-glow:hover {
  box-shadow: 
    0 0 20px rgba(255, 212, 59, 0.3),
    0 0 40px rgba(255, 212, 59, 0.2),
    0 0 60px rgba(255, 212, 59, 0.1);
}

.hover-bounce {
  transition: transform var(--animation-duration-fast) var(--animation-bounce);
}

.hover-bounce:hover {
  transform: translateY(-5px) scale(1.02);
}

/* ===== СПЕЦИАЛЬНЫЕ 3D ЭФФЕКТЫ ===== */
.perspective-text {
  transform: perspective(500px) rotateX(15deg);
  transform-origin: bottom;
}

.isometric-card {
  transform: 
    perspective(1000px) 
    rotateX(30deg) 
    rotateY(-15deg);
  transition: transform var(--animation-duration-normal) var(--animation-easing);
}

.isometric-card:hover {
  transform: 
    perspective(1000px) 
    rotateX(20deg) 
    rotateY(-5deg) 
    translateZ(20px);
}

/* ===== LOADING АНИМАЦИИ ===== */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 212, 59, 0.3);
  border-top: 2px solid var(--color-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-dots {
  display: inline-flex;
  gap: 4px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: loadingDots 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0; }

.loading-wave {
  display: inline-flex;
  gap: 2px;
}

.loading-wave span {
  width: 4px;
  height: 20px;
  background: var(--color-accent);
  animation: loadingWave 1s ease-in-out infinite;
}

.loading-wave span:nth-child(1) { animation-delay: 0s; }
.loading-wave span:nth-child(2) { animation-delay: 0.1s; }
.loading-wave span:nth-child(3) { animation-delay: 0.2s; }
.loading-wave span:nth-child(4) { animation-delay: 0.3s; }
.loading-wave span:nth-child(5) { animation-delay: 0.4s; }

/* ===== ТИПОГРАФСКИЕ АНИМАЦИИ ===== */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-text-muted) 25%,
    var(--color-accent) 50%,
    var(--color-text-muted) 75%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s ease-in-out infinite;
}

.text-wave {
  display: inline-block;
}

.text-wave span {
  display: inline-block;
  animation: textWave 2s ease-in-out infinite;
}

.text-wave span:nth-child(1) { animation-delay: 0s; }
.text-wave span:nth-child(2) { animation-delay: 0.1s; }
.text-wave span:nth-child(3) { animation-delay: 0.2s; }
.text-wave span:nth-child(4) { animation-delay: 0.3s; }
.text-wave span:nth-child(5) { animation-delay: 0.4s; }

/* ===== ЧАСТИЦЫ И ЭФФЕКТЫ ===== */
.particle-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: particleFloat 6s linear infinite;
  opacity: 0.6;
}

.particle:nth-child(1) { 
  left: 10%; 
  animation-delay: 0s; 
  animation-duration: 6s;
}

.particle:nth-child(2) { 
  left: 20%; 
  animation-delay: 1s; 
  animation-duration: 8s;
}

.particle:nth-child(3) { 
  left: 30%; 
  animation-delay: 2s; 
  animation-duration: 7s;
}

.particle:nth-child(4) { 
  left: 40%; 
  animation-delay: 3s; 
  animation-duration: 6s;
}

.particle:nth-child(5) { 
  left: 50%; 
  animation-delay: 4s; 
  animation-duration: 8s;
}

.particle:nth-child(6) { 
  left: 60%; 
  animation-delay: 0.5s; 
  animation-duration: 7s;
}

.particle:nth-child(7) { 
  left: 70%; 
  animation-delay: 1.5s; 
  animation-duration: 6s;
}

.particle:nth-child(8) { 
  left: 80%; 
  animation-delay: 2.5s; 
  animation-duration: 8s;
}

.particle:nth-child(9) { 
  left: 90%; 
  animation-delay: 3.5s; 
  animation-duration: 7s;
}

/* ===== INTERSECTION OBSERVER АНИМАЦИИ ===== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: 
    opacity 0.8s var(--animation-easing),
    transform 0.8s var(--animation-easing);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: 
    opacity 0.8s var(--animation-easing),
    transform 0.8s var(--animation-easing);
}

.scroll-reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: 
    opacity 0.8s var(--animation-easing),
    transform 0.8s var(--animation-easing);
}

.scroll-reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: 
    opacity 0.8s var(--animation-easing),
    transform 0.8s var(--animation-easing);
}

.scroll-reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ===== KEYFRAMES АНИМАЦИИ ===== */

/* Базовые анимации */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotateIn {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* Плавающие анимации */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(2deg);
  }
  50% {
    transform: translateY(-30px) rotate(0deg);
  }
  75% {
    transform: translateY(-15px) rotate(-2deg);
  }
}

/* Пульсирующие анимации */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 212, 59, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 212, 59, 0.6);
  }
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

/* Вращающие анимации */
@keyframes rotateSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotateNormal {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotateFast {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotateReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

/* Loading анимации */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes loadingWave {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

/* Текстовые анимации */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

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

/* Частицы */
@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* ===== ПРОИЗВОДИТЕЛЬНОСТЬ ===== */

/* Оптимизация анимаций для слабых устройств */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Оптимизация для GPU */
.gpu-accelerated {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Отключение анимаций на мобильных для экономии батареи */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .float-animation,
  .float-delayed,
  .float-slow {
    animation-duration: 4s; /* Уменьшаем частоту анимаций */
  }
  
  .rotate-slow {
    animation-duration: 30s; /* Замедляем вращение */
  }
  
  .pulse,
  .pulse-glow {
    animation-duration: 3s; /* Замедляем пульсацию */
  }
}

/* Паузы анимаций при потере фокуса */
.page-hidden * {
  animation-play-state: paused !important;
}