/* fx.css — слой «приятных» эффектов поверх основного дизайна.
   Только transform и opacity, всё отключается при prefers-reduced-motion (глобальное правило в index.html
   уже сводит анимации к нулю), курсорные эффекты включаются только на устройствах с мышью. */

/* ---------- hero: заголовок появляется по словам (слова оборачивает короткий скрипт в index.html) ---------- */
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .16em; margin: -.1em 0 -.16em; }
.fx-wi {
  display: inline-block; transform: translateY(108%);
  animation: fxWord .95s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(.1s + var(--i, 0) * .06s);
}
@keyframes fxWord { to { transform: translateY(0); } }

/* блик, который раз в несколько секунд пробегает по акцентной фразе */
.hero h1 em .fx-wi {
  background: linear-gradient(100deg, var(--ember) 0%, var(--ember) 42%, #ff9d78 50%, var(--ember) 58%, var(--ember) 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fxWord .95s cubic-bezier(.2,.8,.2,1) both, fxSheen 7s ease-in-out 2.4s 4;
  animation-delay: calc(.1s + var(--i, 0) * .06s), 2.4s;
}
@keyframes fxSheen { 0% { background-position: 120% 0; } 38%, 100% { background-position: -80% 0; } }

/* главная кнопка: бегущий по краю блик. Крутится transform'ом (композитор), без перерисовки каждый кадр */
.hero .btn-fill, .cta-band .btn-fill { position: relative; isolation: isolate; overflow: hidden; box-shadow: 0 0 22px -6px rgba(197,67,44,.6); }
.hero .btn-fill::before, .cta-band .btn-fill::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 240%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, rgba(255,170,135,0) 0 60%, rgba(255,186,160,.95) 82%, rgba(255,170,135,0) 100%);
  animation: fxSpin 4.2s linear infinite; will-change: transform;
}
.hero .btn-fill::after, .cta-band .btn-fill::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: inherit; background: inherit; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* магнитные кнопки: отдельное свойство translate, чтобы не мешать :active { transform } */
.fx-magnet { transition: translate .25s cubic-bezier(.2,.8,.2,1), transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease; }

/* ---------- заголовки секций: слова поднимаются при появлении ---------- */
.fx-hw { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.fx-hwi { display: inline-block; will-change: transform; }

/* ---------- маршрут ---------- */
.route { position: relative; padding-block: 76px 64px; background: var(--ink); border-bottom: 1px solid var(--line-dark); overflow: hidden; }
.route-head { max-width: 640px; margin-bottom: 18px; }
.route-head h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 550; letter-spacing: -.01em; }
.route-head p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--text-dark-dim); max-width: 52ch; }
.route-svg { width: 100%; height: auto; display: block; overflow: visible; }
.route-svg.v { display: none; max-width: 380px; margin: 0 auto; }
@media (max-width: 720px) { .route-svg.h { display: none; } .route-svg.v { display: block; } .route { padding-block: 60px 48px; } }
.route-bg { fill: none; stroke: rgba(244,242,238,.16); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.route-fill { fill: none; stroke: var(--ember); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(197,67,44,.55)); }
.route-node circle.dot { fill: var(--ink); stroke: rgba(244,242,238,.4); stroke-width: 2; transition: fill .35s ease, stroke .35s ease; }
.route-node circle.ring { fill: none; stroke: var(--ember); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.route-node.on circle.dot { fill: var(--ember); stroke: var(--ember); }
.route-node.on circle.ring { animation: fxRing 2.4s ease-out infinite; }
@keyframes fxRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
.route-node text { font-family: var(--font-body); fill: var(--text-dark-dim); transition: fill .35s ease; }
.route-node .t1 { font-size: 20px; font-weight: 600; fill: rgba(244,242,238,.62); }
.route-node .t2 { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; }
.route-svg.v .route-node .t1 { font-size: 18px; }
.route-svg.v .route-node .t2 { font-size: 12.5px; }
.route-node.on .t1 { fill: var(--text-dark); }
.route-car { filter: drop-shadow(0 0 7px rgba(197,67,44,.65)); }

/* ---------- лента марок ---------- */
.brand-band { padding-block: 46px; background: var(--ink); border-block: 1px solid var(--line-dark); overflow: hidden; display: grid; gap: 6px; }
.brand-row { overflow: hidden; }
.brand-track {
  display: flex; width: max-content; white-space: nowrap; font-family: var(--font-display); font-weight: 250;
  font-size: clamp(54px, 9vw, 132px); line-height: 1.02; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(244,242,238,.26);
  animation: fxBrand 80s linear infinite;
}
.brand-row.rev .brand-track { animation-direction: reverse; animation-duration: 95s; }
.brand-track span { padding-inline: .28em; transition: color .3s ease, -webkit-text-stroke-color .3s ease; }
.brand-track span.dot { color: var(--ember); -webkit-text-stroke: 0; padding-inline: .1em; }
.brand-track span:not(.dot):hover { color: var(--text-dark); -webkit-text-stroke-color: transparent; }
.brand-band:hover .brand-track { animation-play-state: paused; }
@keyframes fxBrand { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- аукционный лист: наклон и пометки ---------- */
.accent-photo { perspective: 1000px; }
.fx-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.fx-tilt img { position: absolute; inset: 0; }

/* ---------- калькулятор ---------- */
.out-total .num { position: relative; }
.fx-odo { position: absolute; left: 0; top: 0; font: inherit; color: inherit; pointer-events: none; }
.out-total .num.fx-hide { visibility: hidden; }
@keyframes fxFlash { 0% { background: rgba(197,67,44,.34); } 100% { background: rgba(197,67,44,0); } }
.out-line.fx-flash { animation: fxFlash 1.1s ease-out; border-radius: 6px; }

/* ---------- карточки закупок ---------- */
.hist-card.fx-t { transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transition: transform .18s ease-out, border-color .2s ease; will-change: transform; }
.hist-card.fx-t:hover { transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); }
.hist-card .hist-photo img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hist-card:hover .hist-photo img { transform: scale(1.06); }
.hist-photo { overflow: hidden; }
.hist-price { transition: color .25s ease; }
.hist-card:hover .hist-price { color: var(--ember); }

/* ---------- отзывы ---------- */
.fx-star { display: inline-block; }

/* ---------- мягкое свечение на фоне секций ---------- */
.fx-glow-host { position: relative; overflow: clip; }
.fx-glow-host > .wrap { position: relative; z-index: 1; }
.fx-glow {
  position: absolute; width: 620px; height: 620px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(197,67,44,.20), rgba(197,67,44,0) 70%);
  animation: fxDrift 22s ease-in-out infinite alternate;
}
.fx-glow.a { top: -160px; right: -120px; }
.fx-glow.b { bottom: -200px; left: -160px; animation-duration: 28s; animation-delay: -9s; opacity: .8; }
@keyframes fxDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-90px, 60px, 0) scale(1.18); } }
@media (max-width: 860px) { .fx-glow { display: none; } }

/* ---------- FAQ ---------- */
.faq .faq-a { will-change: height; }
.faq summary::after { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.faq summary { transition: color .2s ease, padding-left .3s cubic-bezier(.2,.8,.2,1); }
.faq summary:hover { color: #fff; padding-left: 8px; }

/* ---------- салют после заявки ---------- */
.fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 120; pointer-events: none; }
.form-success .icon-ok { transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .fx-wi { transform: none; animation: none; }
  .hero h1 em .fx-wi { animation: none; }
  .hero .btn-fill::before, .cta-band .btn-fill::before, .fx-glow, .brand-track { animation: none; }
}

/* ---------- фон hero: порт и автовоз (hero-scene.js) ---------- */
.hero-scene { position: absolute; left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 32px); display: block; will-change: transform; pointer-events: none; }
@media (max-width: 860px) {
  /* на телефоне сцена — отдельная полоса над текстом, чтобы корабль не лежал под заголовком */
  .hero.has-scene { padding-top: 200px; }
  .hero.has-scene .hero-bg { bottom: auto; height: 256px; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .hero.has-scene .hero-bg::after { background: linear-gradient(180deg, rgba(11,11,13,0) 0, rgba(11,11,13,0) 45%, rgba(11,11,13,.55) 100%); }
}

/* ---------- телефон: невидимо увеличенная зона нажатия у мелких ссылок (не меняет вёрстку; tap-area) ---------- */
@media (max-width: 860px) {
  .contact-rows a, .foot-links a, .rating-meta a, .lot-more, .wordmark { position: relative; }
  .contact-rows a::before, .foot-links a::before, .rating-meta a::before, .lot-more::before, .wordmark::before { content: ""; position: absolute; inset: -9px -6px; }
}