/* Анимации: работают только когда fx.js отметил элементы (fx-armed / fx-num / fx-glow).
   Без JS и при prefers-reduced-motion всё видно сразу в финальном состоянии. */

.fx-num { font-variant-numeric: tabular-nums; display: inline-block; }
.l-fig__v.fx-num { display: block; } /* число в карточке-цифре — всегда на своей строке, под подписью */

/* Полоса прогресса */
.fx-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 80; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #fff, oklch(0.85 0.19 150)); box-shadow: 0 0 10px oklch(0.85 0.19 150 / 0.6); pointer-events: none; }
.l-page-header ~ * .fx-progress, body:has(.l-page-header) .fx-progress { background: linear-gradient(90deg, oklch(0.85 0.19 150), #fff); }

/* Подсветка карточек за курсором */
.fx-glow { position: relative; isolation: isolate; }
.fx-glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), oklch(0.46 0.26 264 / 0.10), transparent 60%); }
.fx-glow:hover::before { opacity: 1; }
.l-card--blue.fx-glow::before, .l-pcard--cta.fx-glow::before, .l-tb.fx-glow::before, .l-dark .fx-glow::before { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 60%); }
.l-ccard, .l-ind, .l-step { position: relative; }

/* Стрелки в ссылках «Читать кейс», «Подробнее» */
.l-ccard__more svg, .l-pcard__more svg { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.l-ccard:hover .l-ccard__more svg, .l-pcard:hover .l-pcard__more svg { transform: translateX(5px); }
.l-pcard__img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.l-pcard:hover .l-pcard__img { transform: scale(1.04); }
.l-ccard__metrics li, .l-pcard__key { transition: background .25s, border-color .25s; }
.l-ccard:hover .l-ccard__metrics li { background: var(--blue-soft); border-color: oklch(0.80 0.10 264); }

/* Блик на кнопках */
.l-btn { position: relative; overflow: hidden; }
.l-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); pointer-events: none; }
.l-btn:hover::after { animation: fx-shine .8s ease; }
@keyframes fx-shine { to { left: 130%; } }
.l-btn--white { box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.l-hero .l-btn--white { animation: fx-pulse-btn 2.8s ease-in-out 2s 3; }
@keyframes fx-pulse-btn { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }

/* Линия под надзаголовком секции дорисовывается при появлении */
.l-head .l-eyebrow { position: relative; padding-bottom: 6px; }
.l-head .l-eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 28px; border-radius: 2px; background: currentColor; transform-origin: 0 50%; transition: transform .7s cubic-bezier(.22,1,.36,1) .25s; }
.fx-js .l-head[data-reveal]:not(.is-visible) .l-eyebrow::after { transform: scaleX(0); }
.l-head--center .l-eyebrow::after { left: 50%; margin-left: -14px; transform-origin: 50% 50%; }

/* Иконки в карточках проблем и отраслей */
.fx-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); flex: none; transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s; }
.fx-ico svg { width: 24px; height: 24px; }
.l-card:hover .fx-ico, .l-ind:hover .fx-ico { transform: rotate(-8deg) scale(1.08); background: var(--blue); color: #fff; }
.l-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.l-ind__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.l-ind__head .l-ind__title { margin: 0; }

/* Фильтр кейсов */
.fx-pop { animation: fx-pop .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes fx-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* Шаги работы зажигаются */
.l-step.fx-armed, .l-tracks > div.fx-armed { transition: border-color .4s, box-shadow .4s, transform .4s cubic-bezier(.22,1,.36,1), background .4s; }
.l-step.fx-armed .l-step__n { transition: color .4s; }
.l-step.fx-lit { border-color: oklch(0.70 0.15 264); box-shadow: 0 10px 30px oklch(0.46 0.26 264 / 0.10); }
.l-step.fx-lit .l-step__n { color: var(--blue); }
.l-step.fx-armed .l-step__r::before { content: "✓ "; opacity: 0; transition: opacity .3s .2s; }
.l-step.fx-lit .l-step__r::before { opacity: 1; }
.l-tracks > div.fx-lit { transform: translateY(-3px); box-shadow: 0 12px 30px oklch(0.46 0.26 264 / 0.30); }

/* Графики на страницах кейсов */
.l-bars.fx-armed .l-bar__b { transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.l-bars.fx-armed .l-bar:nth-child(2) .l-bar__b { transition-delay: .15s; }
.l-bars.fx-armed .l-bar:nth-child(3) .l-bar__b { transition-delay: .3s; }
.l-bars.fx-in .l-bar__b { transform: none; }
.l-bars.fx-armed .l-bar__v { opacity: 0; transition: opacity .4s .7s; }
.l-bars.fx-in .l-bar__v { opacity: 1; }
.l-hbar.fx-armed i::after { width: 0; transition: width 1.1s cubic-bezier(.22,1,.36,1) .1s; }
.l-hbar.fx-in i::after { width: var(--w); }
.l-donut__ring.fx-armed { transform: rotate(-90deg) scale(.85); opacity: .3; transition: transform 1.1s cubic-bezier(.22,1,.36,1), opacity .6s; }
.l-donut__ring.fx-in { transform: none; opacity: 1; }
.l-layers.fx-armed .l-layer, .l-flow.fx-armed > div, .l-pipe.fx-armed > div { transform: translateY(12px); opacity: .25; transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s; }
.l-layers.fx-armed .l-layer:nth-child(1) { transition-delay: .4s; } .l-layers.fx-armed .l-layer:nth-child(2) { transition-delay: .2s; }
.l-flow.fx-armed > div:nth-child(2), .l-pipe.fx-armed > div:nth-child(2) { transition-delay: .15s; }
.l-flow.fx-armed > div:nth-child(3), .l-pipe.fx-armed > div:nth-child(3) { transition-delay: .3s; }
.l-flow.fx-armed > div:nth-child(4), .l-pipe.fx-armed > div:nth-child(4) { transition-delay: .45s; }
.l-layers.fx-in .l-layer, .l-flow.fx-in > div, .l-pipe.fx-in > div { transform: none; opacity: 1; }

/* Hero: меняющееся слово и бегущая строка отраслей */
.l-hero__rot { margin: 18px auto 0; font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 600; color: rgba(255,255,255,.9); }
.l-hero__rot [data-rotate] { display: inline-block; text-align: left; padding: 2px 10px; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font-weight: 800; white-space: nowrap; transition: opacity .3s, transform .3s, width .32s cubic-bezier(.22,1,.36,1); }
.l-hero__rot [data-rotate].is-out { opacity: 0; transform: translateY(-8px); }
.fx-marquee { position: relative; margin: 34px auto 0; width: 100%; max-width: 1100px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fx-marquee__track { display: flex; gap: 10px; width: max-content; animation: fx-marquee 38s linear infinite; }
.fx-marquee:hover .fx-marquee__track, .fx-marquee.is-paused .fx-marquee__track { animation-play-state: paused; }
.fx-marquee__track span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); font-size: 13px; font-weight: 600; white-space: nowrap; }
.fx-marquee__track span svg { width: 16px; height: 16px; opacity: .85; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }
.fx-marquee__label { display: block; margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* Метрики команды: лёгкий подъём при наведении */
.l-team-metrics li, .l-case-stats li { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.l-team-metrics li:hover, .l-case-stats li:hover { transform: translateY(-3px); box-shadow: 0 14px 30px oklch(0.46 0.26 264 / 0.12); }
.l-logos li { transition: transform .25s, background .25s, color .25s; }
.l-logos li:hover { transform: translateY(-2px); background: var(--blue); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .fx-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .fx-marquee__track [aria-hidden="true"] { display: none; }
  .fx-marquee { -webkit-mask-image: none; mask-image: none; }
  .l-btn::after, .l-hero .l-btn--white { animation: none !important; }
  .fx-pop { animation: none; }
  .l-pcard:hover .l-pcard__img { transform: none; }
}

/* Бегущая строка не должна расширять hero на телефоне */
.l-hero { min-width: 0; }
.l-hero > * { min-width: 0; }
.fx-marquee { min-width: 0; contain: inline-size; }