/* ===== Протокол24 — soft animations v4.9.8 ===== */

/* базовая плавность */
.p24-page *,
.p24-page *::before,
.p24-page *::after {
  scroll-behavior: smooth;
}

/* появление секций */
.p24-animate-ready .p24-anim-section {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .62s ease,
    transform .62s ease;
  will-change: opacity, transform;
}

.p24-animate-ready .p24-anim-section.p24-anim-visible {
  opacity: 1;
  transform: translateY(0);
}

/* каскадное появление карточек внутри секций */
.p24-animate-ready .p24-anim-section .p24-anim-item {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .58s ease,
    transform .58s ease;
  transition-delay: var(--p24-anim-delay, 0ms);
}

.p24-animate-ready .p24-anim-section.p24-anim-visible .p24-anim-item {
  opacity: 1;
  transform: translateY(0);
}

/* hover-карточки: аккуратно, без пляски */
@media (hover: hover) and (pointer: fine) {
  .p24-card,
  .p24-price-card,
  .p24-tariff-card,
  .p24-roadmap-static-card,
  .p24-trust-card,
  .p24-review-card,
  .p24-partner-card,
  .p24-faq-item,
  .p24-after-how-cta-card {
    transition:
      transform .22s ease,
      box-shadow .22s ease,
      border-color .22s ease,
      background .22s ease;
  }

  .p24-card:hover,
  .p24-price-card:hover,
  .p24-tariff-card:hover,
  .p24-trust-card:hover,
  .p24-review-card:hover,
  .p24-partner-card:hover,
  .p24-faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(16,35,79,.10);
  }

  .p24-roadmap-static-card:hover {
    box-shadow: 0 26px 58px rgba(16,35,79,.11);
  }

  .p24-after-how-cta-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 62px rgba(16,35,79,.10);
  }
}

/* кнопки */
.p24-btn,
.p24-after-how-cta-btn,
button,
input[type="submit"] {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease,
    color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .p24-btn:hover,
  .p24-after-how-cta-btn:hover,
  button:hover,
  input[type="submit"]:hover {
    transform: translateY(-1px);
  }
}

/* мягкое дыхание главной CTA-кнопки и CTA после roadmap */
.p24-hero .p24-btn:first-child,
.p24-after-how-cta-btn {
  position: relative;
  overflow: hidden;
}

.p24-hero .p24-btn:first-child::after,
.p24-after-how-cta-btn::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -70%;
  width: 48%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
  opacity: 0;
  pointer-events: none;
}

.p24-animate-ready .p24-hero .p24-btn:first-child::after,
.p24-animate-ready .p24-after-how-cta-btn::after {
  animation: p24ButtonShine 4.8s ease-in-out infinite;
}

/* дорожная карта: без кривого движения, только лёгкий акцент на соединениях */
.p24-roadmap-static-card::after {
  background-size: 160% 160% !important;
}

.p24-animate-ready .p24-roadmap-static-card::after {
  animation: p24ConnectorGlow 5.2s ease-in-out infinite;
}

/* FAQ раскрытие, если используется details */
details {
  transition: background .2s ease, border-color .2s ease;
}

details[open] {
  animation: p24DetailsOpen .24s ease;
}

/* hero чуть живее */
.p24-hero h1,
.p24-hero-lead,
.p24-hero-ctas {
  animation: p24HeroIn .7s ease both;
}

.p24-hero-lead {
  animation-delay: .08s;
}

.p24-hero-ctas {
  animation-delay: .14s;
}

/* уважение к настройкам пользователя */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .p24-animate-ready .p24-anim-section,
  .p24-animate-ready .p24-anim-section .p24-anim-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes p24ButtonShine {
  0% { left: -70%; opacity: 0; }
  12% { opacity: .85; }
  28% { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

@keyframes p24ConnectorGlow {
  0%, 100% {
    filter: saturate(1);
    opacity: .92;
  }
  50% {
    filter: saturate(1.25);
    opacity: 1;
  }
}

@keyframes p24DetailsOpen {
  from {
    transform: translateY(-2px);
    opacity: .84;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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