/* ===== Анимации. Включаются классом .anim на <html> (его ставит animations.js),
   поэтому без JS и при prefers-reduced-motion весь контент виден статично. ===== */

:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Keyframes ---------- */
@keyframes rise { from { opacity: 0; translate: 0 32px; } }
@keyframes drop { from { opacity: 0; translate: 0 -16px; } }
@keyframes fade { from { opacity: 0; } }
@keyframes float { 50% { translate: 0 -10px; } }
@keyframes breathe { 50% { scale: 1.12; opacity: .7; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes blip {
  0% { stroke-dashoffset: .08; opacity: 0; }
  6% { opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: -1.05; opacity: 0; }
}
@keyframes beat {
  0%, 100% { scale: 1; }
  14% { scale: 1.3; }
  28% { scale: 1; }
  42% { scale: 1.18; }
  70% { scale: 1; }
}
@keyframes ring {
  0%, 60%, 100% { rotate: 0deg; }
  64% { rotate: 14deg; }
  70% { rotate: -12deg; }
  76% { rotate: 9deg; }
  82% { rotate: -6deg; }
  88% { rotate: 3deg; }
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 var(--ping, rgba(232, 100, 60, .55)); }
  80%, 100% { box-shadow: 0 0 0 9px rgba(232, 100, 60, 0); }
}
@keyframes ping-teal {
  0% { box-shadow: 0 0 0 0 rgba(47, 143, 131, .55); }
  80%, 100% { box-shadow: 0 0 0 8px rgba(47, 143, 131, 0); }
}
@keyframes alarm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 100, 60, .55), 0 10px 30px -10px rgba(184, 67, 31, .6); }
  50% { box-shadow: 0 0 0 10px rgba(232, 100, 60, 0), 0 18px 40px -8px rgba(184, 67, 31, .8); }
}
@keyframes cta-ring {
  0% { box-shadow: 0 0 0 0 rgba(184, 67, 31, .45); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(184, 67, 31, 0); }
}
@keyframes sheen { from { translate: -120% 0; } to { translate: 220% 0; } }
@keyframes sheen-loop { 0% { translate: -120% 0; } 30%, 100% { translate: 220% 0; } }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { 0% { scale: .3; opacity: 0; } 60% { scale: 1.12; opacity: 1; } 100% { scale: 1; } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -2px 0; } 40% { translate: 2px 0; } 60% { translate: -1px 0; } 80% { translate: 1px 0; } }
@keyframes spin-in { from { rotate: -90deg; scale: .4; opacity: 0; } }
@keyframes faq-in { from { opacity: 0; translate: 0 -8px; } }
@keyframes today { 50% { opacity: .55; } }
@keyframes wiggle-x { 50% { translate: 4px 0; } }

/* ---------- Прогресс прокрутки ---------- */
.progress {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--teal), var(--accent-2), var(--accent));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* ---------- Пульс-линии ---------- */
.anim .pulse path:not(.blip) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .pulse.in path:not(.blip) { animation: draw 2s var(--ease-out) forwards; }
.anim .pulse .blip {
  stroke: #FFD9CB; stroke-width: 3; stroke-dasharray: .08 1.3; stroke-dashoffset: .08; opacity: 0;
  filter: drop-shadow(0 0 3px #E8643C) drop-shadow(0 0 8px rgba(232, 100, 60, .8));
}
.anim .pulse.in .blip { animation: blip 2.6s linear 1.6s infinite; }
.anim .pulse--apply.in .blip { animation-duration: 3.2s; }

/* мини-кардиограммы внутри экранов */
.pulse--ecg { position: relative; flex: 0 1 34px; min-width: 18px; height: 14px; margin-left: auto; }
.pulse--ecg path { stroke: var(--accent-2); stroke-width: 1.6; }
.pulse--ecg-alert { flex-basis: 40px; height: 16px; }
.pulse--ecg-alert path { stroke: rgba(255, 255, 255, .55); }
.anim .pulse--ecg.in path:not(.blip) { animation-duration: .9s; }
.anim .pulse--ecg .blip { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: .3 1.6; stroke-dashoffset: .3; filter: none; }
.anim .pulse--ecg-alert .blip { stroke: #fff; filter: drop-shadow(0 0 3px #fff); }
.anim .pulse--ecg.in .blip { animation: blip .81s linear .9s infinite; }
.anim .pulse--ecg-alert.in .blip { animation-duration: .62s; }

/* ---------- Логотип ---------- */
.anim .logo__pulse { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s .3s var(--ease-out) forwards; }
.anim .logo:hover .logo__pulse { animation: redraw .9s var(--ease-out) forwards; }
.anim .logo__mark { transition: scale .3s var(--ease-spring); }
.anim .logo:hover .logo__mark { scale: 1.08; }

/* ---------- Заголовки по словам ---------- */
.anim .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.anim .split .w > span { display: inline-block; translate: 0 110%; transition: translate .9s var(--ease-out) calc(var(--i) * 55ms); }
.anim .split.in .w > span { translate: 0 0; }
.anim .hero__title.split .w > span { transition-delay: calc(.2s + var(--i) * 70ms); }

/* ---------- Появление блоков ---------- */
.anim .rv {
  opacity: 0; translate: 0 36px;
  transition: opacity .8s var(--ease-out) var(--d, 0ms), translate .9s var(--ease-out) var(--d, 0ms),
    transform .25s, box-shadow .25s;
}
.anim .rv.in { opacity: 1; translate: 0 0; }
.anim .aud.rv:nth-child(2) { translate: 40px 0; }
.anim .aud.rv:first-child { translate: -40px 0; }
.anim .aud.rv.in { translate: 0 0; }
.anim .price-box.rv { translate: 0 0; scale: .94; transition: opacity .8s var(--ease-out), scale .9s var(--ease-spring); }
.anim .price-box.rv.in { scale: 1; }

/* ---------- Hero: появление при загрузке ---------- */
.anim .nav { animation: drop .8s var(--ease-out) backwards; }
.anim .hero__copy > :not(.hero__title) { animation: rise .9s var(--ease-out) backwards; }
.anim .hero__copy > .badge { animation-delay: .1s; }
.anim .hero__copy > .hero__sub { animation-delay: .55s; }
.anim .hero__copy > .hero__ctas { animation-delay: .7s; }
.anim .hero__copy > .trust { animation-delay: .85s; }
.anim .hero__visual { animation: rise 1.2s .35s var(--ease-out) backwards; }
.anim .doc-chip { animation: rise .9s 1.3s var(--ease-spring) backwards; }
.anim .pulse--hero, .anim .pulse--hero-m { animation: fade .6s .4s backwards; }

/* наклон за курсором + «парение» телефона */
.hero__visual { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); transform-style: preserve-3d; }
.anim .phone--hero { animation: float 6s ease-in-out 1.6s infinite; }
.anim .doc-chip { transform: translateZ(40px); }
.anim .glow { animation: breathe 5s ease-in-out infinite; }

/* бейдж и точки-статусы */
.anim .badge .dot, .anim .scarcity .dot { animation: ping 1.8s ease-out infinite; }
.anim .pill--ok .dot { animation: ping-teal 1.8s ease-out infinite; }
.anim .recent__title + .recent__row .dot { animation: ping 1.2s ease-out infinite; }
.anim .pill--alert { animation: ping 1.6s ease-out infinite; }

/* сердце бьётся в ритме 74 уд/мин, колокольчики звенят */
.anim .mini__top .lucide-heart { animation: beat .81s ease-in-out infinite; }
.anim .ph-head > .lucide-bell { transform-origin: 50% 10%; animation: ring 4s ease-in-out 2s infinite; }
.anim .step--dark .step__icon svg { transform-origin: 50% 15%; animation: ring 3.5s ease-in-out infinite; }
.anim .included .lucide-bell-ring { transform-origin: 50% 15%; animation: ring 4s ease-in-out 1s infinite; }

/* главная кнопка: пульсирующее кольцо + блик */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  translate: -120% 0;
}
.anim .btn--primary:hover::after { animation: sheen .9s var(--ease-out); }
.anim .hero__ctas .btn--primary { animation: cta-ring 2.4s 2s ease-out infinite; }
.anim .hero__ctas .btn--primary::after { animation: sheen-loop 4s 2.6s ease-in-out infinite; }
.anim .btn--primary:hover { translate: 0 -2px; }
.anim .btn { transition: background-color .2s, color .2s, transform .15s, box-shadow .2s, translate .25s var(--ease-out); }
.anim .hero__play .lucide-circle-play { transition: scale .3s var(--ease-spring); }
.anim .hero__play:hover .lucide-circle-play { scale: 1.25; }

/* ---------- График и списки в телефонах ---------- */
.anim .bars i { scale: 1 0; transform-origin: 50% 100%; transition: scale .9s var(--ease-spring) calc(.5s + var(--n) * 90ms); }
.anim .bars.in i { scale: 1 1; }
.anim .bars.in i.is-today { animation: today 2.2s ease-in-out 1.8s infinite; }

.anim .readings li, .anim .patients li, .anim .recent__row {
  opacity: 0; translate: 16px 0;
  transition: opacity .5s var(--ease-out) calc(.3s + var(--n) * 110ms), translate .6s var(--ease-out) calc(.3s + var(--n) * 110ms);
}
.anim .readings.in li, .anim .patients.in li, .anim .recent.in .recent__row { opacity: 1; translate: 0 0; }

.anim .alert-card { animation: alarm 1.8s ease-in-out infinite; }
.anim .alert-card__top .lucide-triangle-alert { animation: beat 1.2s ease-in-out infinite; }

/* телефоны в секции «три экрана» парят вразнобой */
.anim .shot.in .phone { animation: float 7s ease-in-out infinite; }
.anim .shot--alert.in .phone { animation-delay: -2.3s; }
.anim .shot--doctor.in .phone { animation-delay: -4.6s; }
.anim .shot .phone { transition: box-shadow .4s; }
.anim .shot:hover .phone { box-shadow: 0 40px 70px -10px rgba(16, 41, 45, .35); }

/* ---------- Проблема: тетрадь и статистика ---------- */
.anim .notebook { opacity: 0; translate: 40px 60px; rotate: 10deg; transition: opacity .8s var(--ease-out), translate 1.1s var(--ease-spring), rotate 1.1s var(--ease-spring); }
.anim .notebook-wrap.in .notebook { opacity: 1; translate: 0 0; rotate: 0deg; }
.anim .notebook-wrap.rv { opacity: 1; translate: 0 0; }
.anim .notebook__title, .anim .notebook__line { clip-path: inset(-10px 100% -10px 0); transition: clip-path .7s steps(14) calc(.7s + var(--n) * .35s); }
.anim .notebook-wrap.in .notebook__title, .anim .notebook-wrap.in .notebook__line { clip-path: inset(-10px -10px -10px 0); }
.anim .notebook-wrap.in .notebook__line .c-accent { display: inline-block; animation: shake .5s 3.6s 3; }
.anim .notebook:hover { rotate: -1.5deg; }

.anim .stat { border-top-color: transparent; position: relative; }
.anim .stat::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .15);
  scale: 0 1; transform-origin: 0 50%; transition: scale 1.2s var(--ease-out) calc(var(--d, 0ms) + .2s);
}
.anim .stat.in::before { scale: 1 1; }
.counting { font-variant-numeric: tabular-nums; }

/* ---------- Шаги ---------- */
.anim .step .step__icon { transition: scale .4s var(--ease-spring), rotate .4s var(--ease-spring); }
.anim .step:hover .step__icon { scale: 1.12; rotate: -8deg; }
.anim .step.in .step__num { animation: fade 1s calc(var(--d, 0ms) + .4s) backwards; }

/* ---------- Карточки «для кого» ---------- */
.anim .aud { transition: opacity .8s var(--ease-out) var(--d, 0ms), translate .9s var(--ease-out) var(--d, 0ms), box-shadow .4s, scale .4s var(--ease-out); }
.anim .aud:hover { scale: 1.015; box-shadow: 0 30px 60px -30px rgba(16, 41, 45, .35); }
.anim .aud__icon { transition: rotate .5s var(--ease-spring); }
.anim .aud:hover .aud__icon { rotate: 12deg; }
.anim .aud__link svg.lucide { animation: wiggle-x 1.4s ease-in-out infinite; }
.anim .checks li .lucide-check { stroke-dasharray: 30; stroke-dashoffset: 30; }
.anim .checks li.in .lucide-check { animation: draw .6s calc(var(--d, 0ms) + .3s) var(--ease-out) forwards; }

/* ---------- Цена / партнёр ---------- */
.anim .included li svg { transition: scale .3s var(--ease-spring); }
.anim .included li:hover svg { scale: 1.25; }
.anim .partner__logo { transition: scale .4s var(--ease-spring), box-shadow .4s; }
.anim .partner__logo:hover { scale: 1.04; box-shadow: 0 16px 30px -16px rgba(16, 41, 45, .3); }

/* ---------- Форма ---------- */
.anim .apply__steps li span { transition: background-color .3s, border-color .3s; }
.anim .apply__steps li.in span { animation: pop .6s calc(var(--d, 0ms) + .2s) var(--ease-spring) backwards; }
.anim .apply__steps li:hover span { background: var(--accent-2); border-color: var(--accent-2); }
.anim .field__input { transition: border-color .2s, box-shadow .25s, translate .2s; }
.anim .field__input:focus { box-shadow: inset 0 0 0 .5px var(--teal), 0 0 0 4px rgba(47, 143, 131, .14); }
.anim .field.is-invalid .field__input { animation: shake .4s; }
.anim .check input:checked + .check__box { animation: pop .35s var(--ease-spring); }
.anim .seg__opt span { transition: background-color .3s, color .3s, scale .2s; }
.anim .seg__opt:active span { scale: .97; }

.anim .success:not([hidden]) .success__icon { animation: pop .7s var(--ease-spring) backwards; }
.anim .success:not([hidden]) .success__icon path,
.anim .success:not([hidden]) .success__icon polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s .45s var(--ease-out) forwards; }
.anim .success:not([hidden]) .success__text { animation: rise .7s .25s var(--ease-out) backwards; }
.anim .success:not([hidden]) .success__btn { animation: rise .7s .45s var(--ease-out) backwards; }
.anim .lead-form:not([hidden]) { animation: fade .4s; }

/* ---------- FAQ ---------- */
.anim .faq details[open] p { animation: faq-in .45s var(--ease-out); }
.anim .toggle svg.lucide { animation: spin-in .35s var(--ease-spring); }
.anim .faq summary:hover .toggle { scale: 1.1; }
.anim .toggle { transition: background-color .2s, border-color .2s, scale .3s var(--ease-spring); }

/* ---------- Футер ---------- */
.anim .footer__contacts a svg { transition: scale .3s var(--ease-spring), rotate .3s var(--ease-spring); }
.anim .footer__contacts a:hover svg { scale: 1.2; rotate: -10deg; }

/* ---------- Мобильные элементы ---------- */
.anim .sticky-cta .btn { animation: cta-ring 2.4s 1s ease-out infinite; }
.anim .mobile-menu:not([hidden]) { animation: drop .3s var(--ease-out); }
.anim .mobile-menu:not([hidden]) a { animation: rise .45s var(--ease-out) backwards; }
.anim .mobile-menu a:nth-child(2) { animation-delay: .04s; }
.anim .mobile-menu a:nth-child(3) { animation-delay: .08s; }
.anim .mobile-menu a:nth-child(4) { animation-delay: .12s; }
.anim .mobile-menu a:nth-child(5) { animation-delay: .16s; }

@media (max-width: 899px) {
  .hero__visual { transform: none; }
  .anim .doc-chip { transform: none; }
  .anim .aud.rv:nth-child(2), .anim .aud.rv:first-child { translate: 0 36px; }
  .anim .aud.rv.in { translate: 0 0; }
  .anim .aud:hover { scale: 1; }
  .anim .notebook { translate: 0 60px; }
  .anim .shot.in .phone { animation: none; }
}