/* ==========================================================
   ANIMATION SYSTEM — eco-psy
   Подключается после styles.css, переопределяет reveal-блок.
   ========================================================== */

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

@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -18px, 0) rotate(1.2deg); }
}

@keyframes floatSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-10px, -12px, 0); }
}

@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmer {
  0%   { transform: translateX(-140%) skewX(-18deg); }
  100% { transform: translateX(240%) skewX(-18deg); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 154, 134, .42); }
  50%      { box-shadow: 0 0 0 14px rgba(124, 154, 134, 0); }
}

@keyframes underlineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes rippleOut {
  from { transform: scale(0); opacity: .42; }
  to   { transform: scale(2.8); opacity: 0; }
}

@keyframes fadeUpBlur {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); filter: blur(10px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

/* ---------- Scroll reveal: blur -> sharp, slight rise (ORIGINAL FROM BACKUP) ---------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.985);
  filter: blur(10px);
  transition:
    opacity .85s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.22, .61, .36, 1),
    filter .85s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Карточки в сетках: направленное появление с легким движением слева направо и оригинальным блюром */
.reveal--grid-item {
  opacity: 0;
  transform: translate3d(-24px, 20px, 0) scale(.985);
  filter: blur(10px);
  transition:
    opacity .85s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.22, .61, .36, 1),
    filter .85s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

.reveal--grid-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.reveal--left {
  opacity: 0;
  transform: translate3d(-36px, 0, 0) scale(.99);
  filter: blur(10px);
  transition:
    opacity .85s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.22, .61, .36, 1),
    filter .85s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

.reveal--left.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.reveal--right {
  opacity: 0;
  transform: translate3d(36px, 0, 0) scale(.99);
  filter: blur(10px);
  transition:
    opacity .85s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.22, .61, .36, 1),
    filter .85s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

.reveal--right.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.reveal--zoom {
  opacity: 0;
  transform: scale(.94);
  filter: blur(10px);
  transition:
    opacity .85s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.22, .61, .36, 1),
    filter .85s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}

.reveal--zoom.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Сохраняем микро-приподнятие при наведении на кнопки с классом reveal после их появления */
.btn.reveal.is-visible:hover,
.articles-filter__btn.reveal.is-visible:hover,
.recommendations-filter__btn.reveal.is-visible:hover,
.reviews-filter__btn.reveal.is-visible:hover {
  transform: translateY(-1px);
}

/* Сохраняем приподнятие карточек в сетках при наведении после их появления */
.card.reveal--grid-item.is-visible:hover,
.article-card.reveal--grid-item.is-visible:hover,
.recommendation-card.reveal--grid-item.is-visible:hover,
.review-card.reveal--grid-item.is-visible:hover {
  transform: translateY(-4px) !important;
}

/* ---------- Gradient blobs behind hero ---------- */

.hero { position: relative; }

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

.hero::before {
  width: 460px; height: 460px;
  top: -140px; left: -120px;
  background: linear-gradient(120deg, #b9d3c1, #d9e7cf, #cfe0d5);
  background-size: 220% 220%;
  animation: gradientFlow 16s ease-in-out infinite, floatSoft 14s ease-in-out infinite;
}

.hero::after {
  width: 380px; height: 380px;
  bottom: -40px; right: -60px;
  background: linear-gradient(120deg, #ecd9bf, #f3e6d2, #e6d3bb);
  background-size: 220% 220%;
  animation: gradientFlow 19s ease-in-out infinite reverse, floatY 17s ease-in-out infinite;
}

.hero__inner { position: relative; z-index: 1; }

/* ---------- Animated gradient headline ---------- */

h1 {
  color: var(--text);
  font-weight: 400;
}

/* Градиентная анимация заголовка включается ТОЛЬКО на десктопах и ноутбуках (>900px),
   где гарантированно есть аппаратное ускорение и нет артефактов background-clip: text на мобильных GPU */
@media (min-width: 901px) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    h1 {
      background-image: linear-gradient(
        100deg,
        #2b2a27 0%,
        #4d6b57 26%,
        #7c9a86 44%,
        #a98a5c 62%,
        #2b2a27 100%
      );
      background-size: 260% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientFlow 12s ease-in-out infinite;
    }

    .theme-dark h1 {
      background-image: linear-gradient(
        100deg,
        #ffffff 0%,
        #e2f3e8 26%,
        #c4e5ce 44%,
        #faebd2 62%,
        #ffffff 100%
      ) !important;
    }
  }
}

@media (max-width: 900px) {
  h1 {
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    animation: none !important;
  }
}

.theme-dark .hero::before {
  background: linear-gradient(120deg, #183522, #244d33, #1c3c27) !important;
  background-size: 220% 220% !important;
  opacity: .45 !important;
  filter: blur(95px) !important;
}

.theme-dark .hero::after {
  background: linear-gradient(120deg, #382c19, #4a3a22, #342917) !important;
  background-size: 220% 220% !important;
  opacity: .40 !important;
  filter: blur(95px) !important;
}

/* ---------- Section titles: animated underline ---------- */

.section__title {
  position: relative;
  padding-bottom: 7px;
}

.section__title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 72px; height: 2px;
  margin-left: -36px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), #c8a36b, transparent);
  transform: scaleX(0);
  transform-origin: center;
}

.section__title.is-visible::after {
  animation: underlineGrow .8s cubic-bezier(.22, .61, .36, 1) .25s forwards;
}

.section__title--left::after {
  left: 0;
  margin-left: 0;
  transform-origin: left;
}

/* ---------- Buttons: shimmer + glow ---------- */

.btn { position: relative; overflow: hidden; }

.btn--primary::before {
  content: "";
  position: absolute;
  top: -40%; left: 0;
  width: 55%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  animation: shimmer 1.05s cubic-bezier(.22,.61,.36,1);
}

.btn--primary {
  animation: pulseGlow 3.4s ease-in-out infinite;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  animation: none;
  box-shadow: 0 12px 28px rgba(124, 154, 134, .38);
}

.btn--ghost:hover { background: var(--accent-soft); }

/* ---------- Cards: animated gradient border on hover ---------- */

.card,
.price-card,
.step {
  position: relative;
  isolation: isolate;
}

.card::before,
.price-card::before,
.step::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg, #7c9a86, #c8a36b, #9fc3ae, #7c9a86);
  background-size: 300% 300%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  animation: gradientFlow 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.card:hover::before,
.price-card:hover::before,
.step:hover::before {
  opacity: 1;
}

.card:hover,
.price-card:hover,
.step:hover {
  box-shadow: var(--shadow-lg);
}

/* ---------- Hero card: float + sheen ---------- */

.hero__card {
  animation: floatY 9s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}

.hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,0) 32%,
    rgba(255,255,255,0) 68%,
    rgba(255,255,255,.28) 100%
  );
  background-size: 240% 240%;
  animation: gradientFlow 11s ease-in-out infinite;
  pointer-events: none;
}

.hero__leaf { animation: floatSoft 12s ease-in-out infinite; }

/* ---------- Logo mark ---------- */

.logo__mark { animation: pulseGlow 4.2s ease-in-out infinite; }

.logo:hover .logo__mark {
  animation: none;
  box-shadow: 0 0 0 8px rgba(124, 154, 134, .12);
}

/* ---------- Featured price card ---------- */

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

.price-card--featured { animation: floatCardY 9s ease-in-out infinite; }
.price-card--featured:hover { animation-play-state: paused; }

/* ---------- FAQ ---------- */

/* Анимация ответа запускается каждый раз при раскрытии: JS вешает
   .is-opening и снимает его после проигрывания. Без этого повторное
   открытие оставалось без анимации — keyframes уже отработали. */
.faq.is-opening p {
  animation: fadeUpBlur .45s cubic-bezier(.22, .61, .36, 1);
}

/* Плавное появление строки-ответа, пока она ещё закрыта, не нужно */
.faq:not([open]) p { animation: none; }

/* Анимация для списков при наведении и фокусе */
.hero__facts li {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}
.hero__facts li:hover {
  transform: translateX(4px);
  color: var(--accent-dark);
}

.step:not(.reveal) {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.step.reveal.is-visible {
  transition: opacity .85s cubic-bezier(.22, .61, .36, 1),
    transform .85s cubic-bezier(.22, .61, .36, 1),
    filter .85s cubic-bezier(.22, .61, .36, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  transition-delay: var(--d, 0ms);
}
.step:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(43, 42, 39, 0.08);
  border-color: rgba(124, 154, 134, 0.4);
}

.step:hover .step__num {
  transform: scale(1.12);
  color: var(--accent);
}
.step__num {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

/* ---------- Contact links ---------- */

.contact__link {
  position: relative;
  overflow: hidden;
}

.contact__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(124,154,134,.14) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}

.contact__link:hover::after { transform: translateX(120%); }

.contact__icon {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}

.contact__link:hover .contact__icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 8px 18px rgba(124, 154, 134, .35);
}

/* ---------- Ripple (навешивается из JS) ---------- */

.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  animation: rippleOut .65s ease-out forwards;
}

/* ---------- Hero entrance on load ---------- */

.hero__text > * {
  animation: fadeUpBlur .9s cubic-bezier(.22,.61,.36,1) both;
}

/* Принудительное отключение анимации скрытия/блюра на заголовке h1 для мобильных устройств,
   чтобы исключить баги рендеринга и мерцания в мобильном Яндекс.Браузере */
@media (max-width: 900px) {
  .hero__text > h1 {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

.hero__text > *:nth-child(1) { animation-delay: .05s; }
.hero__text > *:nth-child(2) { animation-delay: .14s; }
.hero__text > *:nth-child(3) { animation-delay: .23s; }
.hero__text > *:nth-child(4) { animation-delay: .32s; }
.hero__text > *:nth-child(5) { animation-delay: .41s; }

/* ---------- Mobile: без горизонтальных сдвигов ---------- */

@media (max-width: 720px) {
  /* На узком экране боковой reveal (36px в сторону) вылезает за viewport
     и даёт горизонтальный скролл. Оставляем только появление снизу с сохранением оригинального блюра. */
  .reveal--left,
  .reveal--right,
  .reveal--grid-item {
    transform: translate3d(0, 30px, 0) scale(.985);
    filter: blur(10px);
  }

  .reveal--left.is-visible,
  .reveal--right.is-visible,
  .reveal--grid-item.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

/* ---------- Reduced motion (только при явном системном включении пользователем) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Отключаем только зацикленные декоративные плавающие эффекты */
  .hero::before,
  .hero::after,
  .hero__card,
  .price-card--featured,
  .logo__mark {
    animation: none !important;
  }
}