/* GSAP ScrollTrigger и анимации */
.scroll-container {
  /* Убираем специфичные стили от Lenis */
  height: auto;
  min-height: 100vh;
}

/* Элементы для анимации при скролле - начальные стили устанавливает GSAP */
.animate-on-scroll {
  /* Начальное состояние будет установлено через GSAP */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  contain: layout style paint;
}

/* Класс для завершенной анимации */
.animate-on-scroll.is-visible {
  /* Финальное состояние управляется GSAP */
  will-change: auto;
}

/* Уважение к prefers-reduced-motion: элементы сразу видимы */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-on-scroll.is-visible,
  .fade-in-up,
  .fade-in-down,
  .fade-in-left,
  .fade-in-right,
  .scale-in,
  .rotate-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Дополнительные классы для различных анимаций */
.fade-in {
  opacity: 0;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(50px);
}

.fade-in-down {
  opacity: 0;
  transform: translateY(-50px);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
}

.scale-in {
  opacity: 0;
  transform: scale(0.8);
}

.rotate-in {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
}

/* Задержки для последовательных анимаций */
.transition-delay2 { transition-delay: 0.2s; }
.transition-delay4 { transition-delay: 0.4s; }
.transition-delay6 { transition-delay: 0.6s; }
.transition-delay8 { transition-delay: 0.8s; }
.transition-delay10 { transition-delay: 1.0s; }

/* Smooth scrolling через CSS для браузеров без JS */
html {
  scroll-behavior: smooth;
}

/* Убираем стандартные scrollbar для кастомного smooth scroll */
body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}