/* === Smooth scroll & base transitions === */
html {
  scroll-behavior: smooth;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Плавные переходы для интерактивных элементов */
a,
button,
[role="button"],
input,
select,
textarea {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Scroll reveal базовые состояния === */
.sr-hidden {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.sr-hidden-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.sr-hidden-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.sr-hidden-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* === Видимое состояние (класс добавляется JS) === */
.sr-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* === Задержки для каскадных эффектов === */
.sr-delay-1 { transition-delay: 80ms; }
.sr-delay-2 { transition-delay: 160ms; }
.sr-delay-3 { transition-delay: 240ms; }
.sr-delay-4 { transition-delay: 320ms; }
.sr-delay-5 { transition-delay: 400ms; }
.sr-delay-6 { transition-delay: 480ms; }

/* === Улучшенная плавность карточек и hover === */
#root section,
#root .card,
#root [class*="card"],
#root [class*="pricing"],
#root [class*="feature"],
#root [class*="plan"] {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Плавное появление страницы при загрузке */
#root {
  animation: page-fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Плавность изображений */
img {
  transition: opacity 0.4s ease;
}

/* Улучшение плавности для списков с иконками */
#root li,
#root [class*="list"] > * {
  transition: opacity 0.3s ease, transform 0.3s ease;
}