/* utilities.css */
/* ==== Современные микровзаимодействия и анимации ==== */

/* 1) Переменные для настройки */
:root {
  --anim-very-fast: 0.4s;
  --anim-fast: 0.6s;
  --anim-default: 0.9s;
  --anim-slow: 1.2s;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snappy: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --stagger-step: 0.1s;
}

/* 2) Slide + fade-in с лёгким skew */
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(32px) skewY(2deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-8px) skewY(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) skewY(0);
  }
}

/* 3) Базовая анимация для секций и карточек */
section,
.card,
.benefit-card,
.review-card {
  opacity: 0;
  transform: translateY(32px);
  animation: slideFadeIn var(--anim-default) var(--ease-in-out) forwards;
  animation-delay: var(--stagger-step);
}

/* 4) Staggered контейнер */
.staggered > * {
  opacity: 0;
  transform: translateY(32px);
  animation: slideFadeIn var(--anim-default) var(--ease-in-out) forwards;
}
.staggered > *:nth-child(1) { animation-delay: calc(var(--stagger-step) * 1); }
.staggered > *:nth-child(2) { animation-delay: calc(var(--stagger-step) * 2); }
.staggered > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 3); }
.staggered > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 4); }

/* 5) Hover-эффект для интерактивных элементов */
.interactive {
  transition: transform var(--anim-fast) var(--ease-snappy),
              box-shadow var(--anim-fast) var(--ease-snappy);
}
.interactive:hover {
  transform: translateY(-8px) rotateZ(-1deg) scale(1.05);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

/* 6) Плавное появление кнопок */
.btn-animate {
  opacity: 0;
  transform: scale(0.92);
  animation: slideFadeIn var(--anim-slow) var(--ease-in-out) forwards;
  animation-delay: calc(var(--anim-default) + var(--stagger-step));
}

/* 7) Усиленная пульсация кнопок */
@keyframes pulse-strong {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 8px rgba(16,185,129,0.4),
      0 4px 16px rgba(16,185,129,0.4);
  }
  100% {
    transform: scale(1.15);
    box-shadow:
      0 0 20px rgba(16,185,129,0.7),
      0 0 30px rgba(16,185,129,0.5),
      0 8px 40px rgba(16,185,129,0.6);
  }
}
.btn-animate:hover,
.btn-strong {
  animation: pulse-strong 1.2s var(--ease-snappy) infinite alternate;
}

/* 8) Всплытие снизу + растягивание */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scaleY(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scaleY(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
.pop-animate {
  animation: popIn var(--anim-default) var(--ease-snappy) both;
}

/* 9) Плавная подгрузка изображений */
img[data-lazy] {
  opacity: 0;
  transition: opacity var(--anim-default) var(--ease-in-out);
}
img[data-lazy].loaded {
  opacity: 1;
}

/* 10) Параллакс-эффект для фонов */
.parallax {
  background-position: center 60%;
  background-size: cover;
  transition: background-position var(--anim-slow) var(--ease-in-out);
}
.parallax.visible {
  background-position: center 50%;
}

/* 11) Subtle 3D tilt animation */
@keyframes tilt {
  0% { transform: rotateX(0) rotateY(0); }
  50% { transform: rotateX(4deg) rotateY(-4deg); }
  100% { transform: rotateX(0) rotateY(0); }
}
.tilt-animate {
  display: inline-block;
  animation: tilt 4s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* 12) Flicker эффект для акцентов */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.flicker {
  animation: flicker 0.3s linear infinite;
}

/* 13) Reduced-motion поддержка */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}