/* /{ru,ua,en}/trustpilot/: медиа и эффекты (20.10.2026). Файлы - assets/media/trustpilot/.
   Классы с префиксом tp-, чтобы не пересекаться с Tailwind-сборкой и search-presence.css.
   Анимации включает js/trustpilot-page.js (класс is-in); при «уменьшить движение» всё видно сразу. */

/* Значки: SVG как маска, цвет берётся из currentColor */
.tp-ico{display:inline-block;width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:-.15em}
.tp-ico--lg{font-size:32px}
.tp-ico--md{font-size:24px}
.tp-ico--sm{font-size:18px}
.tp-label{display:flex;align-items:center;gap:8px}

/* Hero: лента отзывов по краям */
.tp-hero-stream{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 78%,transparent 100%)}
.tp-hero-stream svg{position:absolute;left:0;top:4%;width:100%;height:auto;animation:tp-drift 38s linear infinite alternate}
.tp-hero-stream [data-reply]{stroke-dasharray:24;stroke-dashoffset:24;animation:tp-draw 1.2s ease-out forwards}
.tp-hero-stream [data-reply="2"]{animation-delay:2.4s}.tp-hero-stream [data-reply="3"]{animation-delay:4.8s}.tp-hero-stream [data-reply="4"]{animation-delay:7.2s}
.tp-hero-stream [data-flag]{animation:tp-blink 1.6s ease-in-out 1.5s 2}
@keyframes tp-drift{from{transform:translateY(0)}to{transform:translateY(-8%)}}
@keyframes tp-draw{to{stroke-dashoffset:0}}
@keyframes tp-blink{50%{opacity:.15}}
@media (max-width:900px){.tp-hero-stream{opacity:.2}}
@media (max-width:760px){.tp-hero-stream{display:none}}

/* Картинки в карточках */
.tp-shot{display:block;margin:-4px -4px 20px;border-radius:1.4rem;overflow:hidden;background:#fff7ed;border:1px solid #fde7d2}
.tp-shot img{display:block;width:100%;height:auto;transition:transform .5s ease}
.card-hover:hover .tp-shot img{transform:translateY(-4px) scale(1.015)}
.tp-figure{margin:0 0 40px}
.tp-figure svg{display:block;width:100%;height:auto}
.tp-caption{margin-top:10px;font-size:12px;font-weight:700;color:#64748b;line-height:1.5}
.tp-axis{position:relative;height:16px;margin-top:4px;font-size:11px;font-weight:800;color:#94a3b8}
.tp-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.tp-axis span:last-child{transform:translateX(-85%)}

/* Блок процесса: фон и значки шагов */
.tp-process-bg{position:absolute;inset:0;pointer-events:none;opacity:.55}
.tp-process-bg img{width:100%;height:100%;object-fit:cover}
.tp-step-ico{display:flex;justify-content:center;margin:-16px 0 18px;color:#fb923c}

/* Обязательства и «не для всех» */
.tp-x{color:#ef4444;margin-right:16px}

/* Тариф: значок у бейджа */
.tp-tier-ico{margin-right:6px;vertical-align:-.2em}

/* Мини-графики кейсов (reviews.php) */
.tp-case-graph{margin:-8px 0 18px;height:64px}
.tp-case-graph svg{display:block;width:100%;height:100%}

/* Финал перед формой */
.tp-cta-band{position:relative;isolation:isolate}
.tp-cta-band>picture{position:absolute;inset:0;z-index:-1;pointer-events:none}
.tp-cta-band>picture img{width:100%;height:100%;object-fit:cover;opacity:.9}

/* Появление при прокрутке */
.js-tp [data-tp-reveal]{opacity:0;translate:0 16px;transition:opacity .6s ease,translate .6s ease,transform .3s cubic-bezier(.4,0,.2,1),border-color .3s,box-shadow .3s}
.js-tp [data-tp-reveal].is-in{opacity:1;translate:none}
.js-tp [data-tp-reveal]:nth-child(2){transition-delay:.08s}.js-tp [data-tp-reveal]:nth-child(3){transition-delay:.16s}
.js-tp [data-tp-reveal]:nth-child(4){transition-delay:.24s}.js-tp [data-tp-reveal]:nth-child(5){transition-delay:.32s}.js-tp [data-tp-reveal]:nth-child(6){transition-delay:.4s}
.js-tp .tp-draw .tp-line,.js-tp .tp-draw .tp-arrow{transition:stroke-dashoffset 1.6s ease}
.js-tp .tp-draw .tp-dot{opacity:0;transition:opacity .3s ease}
.js-tp .tp-draw.is-in .tp-dot{opacity:1}

@media (prefers-reduced-motion:reduce){
  .tp-hero-stream svg,.tp-hero-stream [data-reply],.tp-hero-stream [data-flag]{animation:none;stroke-dashoffset:0}
  .js-tp [data-tp-reveal]{opacity:1;translate:none;transition:none}
  .card-hover:hover .tp-shot img{transform:none}
}