/* ============================================
   ROOTED — Custom Animations
   Подключено через functions.php
   Чтобы удалить: убери этот файл + rooted-animations.js
   + две строки в functions.php с 'rooted-animations'
   ============================================ */

/* ----------------------------
   Keyframes
----------------------------- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lineGrow {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.03); }
}

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

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ----------------------------
   Базовые классы — невидимые до срабатывания
----------------------------- */

.ra-fade-up,
.ra-fade-left,
.ra-fade-right,
.ra-scale-in {
  opacity: 0;
  will-change: opacity, transform;
}

/* ----------------------------
   Активированные состояния
----------------------------- */

.ra-fade-up.ra-visible {
  animation: fadeInUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ra-fade-left.ra-visible {
  animation: fadeInLeft 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ra-fade-right.ra-visible {
  animation: fadeInRight 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ra-scale-in.ra-visible {
  animation: scaleIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ----------------------------
   Задержки для stagger-эффекта
----------------------------- */

.ra-delay-1 { animation-delay: 0.1s; }
.ra-delay-2 { animation-delay: 0.2s; }
.ra-delay-3 { animation-delay: 0.3s; }
.ra-delay-4 { animation-delay: 0.45s; }
.ra-delay-5 { animation-delay: 0.6s; }

/* ----------------------------
   Постоянные (loop) анимации
----------------------------- */

.ra-float {
  animation: floatY 4s ease-in-out infinite;
}

.ra-pulse {
  animation: subtlePulse 3s ease-in-out infinite;
}

/* ----------------------------
   Hover-эффекты на кнопки Elementor
----------------------------- */

.elementor-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.elementor-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.4s ease;
}

.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
}

.elementor-button:hover::after {
  transform: translateX(150%) skewX(-15deg);
}

/* hover на карточки — отключено */

/* ----------------------------
   Декоративные объекты по бокам секций
----------------------------- */

/* Сердечки — покачиваются + морфинг через filter */
.wp-image-80 {
  animation: heartMorph 4s ease-in-out infinite !important;
  transform-origin: center;
}

@keyframes heartMorph {
  0%   { transform: scale(1) rotate(0deg);   filter: drop-shadow(0 0 0px rgba(255,180,0,0)); }
  20%  { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 8px rgba(255,180,0,0.5)); }
  40%  { transform: scale(0.95) rotate(2deg);  filter: drop-shadow(0 0 4px rgba(255,180,0,0.2)); }
  60%  { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 12px rgba(255,180,0,0.6)); }
  80%  { transform: scale(0.98) rotate(1deg);  filter: drop-shadow(0 0 6px rgba(255,180,0,0.3)); }
  100% { transform: scale(1) rotate(0deg);   filter: drop-shadow(0 0 0px rgba(255,180,0,0)); }
}

/* Звёздочки / sparkles — пульсируют и вращаются */
.wp-image-81 {
  animation: sparkleFloat 4s ease-in-out infinite !important;
  transform-origin: center;
}

@keyframes sparkleFloat {
  0%   { transform: translateY(0px) rotate(0deg) scale(1); }
  25%  { transform: translateY(-8px) rotate(8deg) scale(1.05); }
  50%  { transform: translateY(-14px) rotate(0deg) scale(1.08); }
  75%  { transform: translateY(-8px) rotate(-8deg) scale(1.05); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

/* широкий селектор убран — захватывал лишние изображения */

/* ----------------------------
   Shimmer-эффект на заголовки (опционально)
----------------------------- */

.ra-shimmer-text {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    rgba(255,255,255,0.6) 50%,
    currentColor 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ----------------------------
   Линия под заголовком
----------------------------- */

.ra-underline-animate {
  position: relative;
  display: inline-block;
}

.ra-underline-animate::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ra-underline-animate:hover::after,
.ra-underline-animate.ra-visible::after {
  width: 100%;
}

/* ----------------------------
   Параллакс-оверлей для hero-секций
----------------------------- */

/* overflow: hidden убран — резал дропдаун меню */

.elementor-section.ra-hero > .elementor-background-overlay {
  transition: transform 0.1s linear;
}