/*
 * Страница «Доставка и оплата» — путь пары как рисованная история.
 * Текста минимум, смысл несут сцены: у каждой свой цвет, своя иллюстрация
 * и своя анимация, которая запускается, когда сцена доехала до экрана
 * (класс .is-visible ставит js/reveal.js).
 *
 * Всё движение — только transform и opacity: их считает видеокарта,
 * страница не перерисовывается и не начинает лагать при прокрутке.
 */

/* ---------- ЦИФРЫ ПОД ЗАГОЛОВКОМ ---------- */
.dfacts {
  list-style: none; margin: 0 0 clamp(10px, 3vw, 22px); padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.dfacts li {
  padding: 14px 16px;
  border: 1px solid var(--line-hard); border-radius: var(--radius);
  background: var(--surface);
  transition: transform .18s ease, border-color .2s ease;
}
.dfacts li:hover { transform: translateY(-3px); }
.dfacts b {
  display: block; font-family: var(--head); font-weight: 600;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.1; color: var(--fc, var(--accent));
}
.dfacts span { font-size: 13px; color: var(--muted); }
.dfacts li:nth-child(1) { --fc: var(--neon-lime);   border-color: rgba(198,255,0,.3); background: rgba(198,255,0,.05); }
.dfacts li:nth-child(2) { --fc: var(--neon-violet); border-color: rgba(139,92,255,.3); background: rgba(139,92,255,.05); }
.dfacts li:nth-child(3) { --fc: var(--neon-cyan);   border-color: rgba(22,200,192,.3); background: rgba(22,200,192,.05); }
.dfacts li:nth-child(4) { --fc: #FF6A2B;            border-color: rgba(255,106,43,.3); background: rgba(255,106,43,.05); }

/* ---------- ДОРОГА: ОБЩИЙ КАРКАС ---------- */
.road { position: relative; display: grid; gap: clamp(30px, 5vw, 66px); margin-top: clamp(24px, 4vw, 40px); }

/* пунктирная нитка по центру — связывает сцены в один маршрут */
.road::before {
  content: ''; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.20) 0 9px, transparent 9px 20px);
}
/* огонёк, который едет по нитке сверху вниз */
/* Полоска высотой во всю дорогу: двигаем её саму на 100% собственной высоты —
   так огонёк доезжает ровно до низа, и странице не нужно знать пиксели. */
.road__spark {
  position: absolute; left: 50%; top: 40px; bottom: 40px; width: 8px; margin-left: -4px;
  pointer-events: none;
  animation: sparkRun 7s linear infinite;
  will-change: transform;
}
.road__spark::after {
  content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 14px 2px rgba(198,255,0,.75);
}
@keyframes sparkRun {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translate3d(0, 100%, 0); opacity: 0; }
}

/* ---------- СЦЕНА ---------- */
.scene {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 46px);
}
.scene--flip .scene__art { order: 2; }

.scene__art {
  position: relative; aspect-ratio: 10 / 7; overflow: hidden;
  display: grid; place-items: center;
  color: var(--sc);
  border: 1px solid var(--line); border-radius: 4px;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(255,255,255,.05), transparent 60%),
    #0F0F13;
  transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
/* тонкие полоски-подложка, чтобы кадр не был плоским чёрным */
.scene__art::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px);
  opacity: .8;
}
/* цветное свечение сцены */
.scene__art::after {
  content: ''; position: absolute; inset: -30%;
  background: radial-gradient(closest-side, var(--sc), transparent 70%);
  opacity: .13; pointer-events: none;
}
.scene__art:hover { transform: translateY(-4px); border-color: var(--sc); box-shadow: 0 18px 46px -26px var(--sc); }
.scene__art svg { position: relative; width: 84%; height: auto; }

.scene__no {
  display: block; font-family: var(--head); font-weight: 700; line-height: .9;
  font-size: clamp(46px, 7vw, 86px); color: var(--sc); opacity: .3; margin-bottom: 2px;
}
@supports (-webkit-text-stroke: 2px red) {
  .scene__no { color: transparent; -webkit-text-stroke: 2px var(--sc); opacity: .65; }
}
.scene__title { margin: 0 0 8px; font-family: var(--head); font-weight: 600; text-transform: uppercase; font-size: clamp(20px, 2.7vw, 30px); }
.scene__text  { margin: 0; color: #D2D2D6; font-size: 15px; line-height: 1.6; }
.scene__note  { margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--sc); font-size: 13px; color: var(--muted); }

/* цвет каждой сцены */
.scene--lime    { --sc: #C6FF00; }
.scene--violet  { --sc: #8B5CFF; }
.scene--cyan    { --sc: #16C8C0; }
.scene--orange  { --sc: #FF6A2B; }
.scene--blue    { --sc: #2E6BFF; }
.scene--magenta { --sc: #FF2E7E; }

/* ---------- ЛИНИИ ИЛЛЮСТРАЦИЙ ---------- */
.ln   { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ln--thin { stroke-width: 2; opacity: .55; }
.fl   { fill: currentColor; }

/* 01. точки «печатает» в облачке */
.dot { fill: currentColor; opacity: .25; }
.is-visible .dot { animation: dotBlink 1.4s ease-in-out infinite; }
.dot--2 { animation-delay: .18s !important; }
.dot--3 { animation-delay: .36s !important; }
@keyframes dotBlink { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }

/* 02. мерная линия вырастает слева направо */
.measure { transform: scaleX(0); transform-origin: 28px 20px; transform-box: view-box; }
.is-visible .measure { animation: measureGrow 1.1s cubic-bezier(.2,.7,.3,1) .25s both; }
@keyframes measureGrow { to { transform: scaleX(1); } }

/* 03. коробка падает на место, ценник качается */
.is-visible .box { animation: boxDrop .7s cubic-bezier(.2,.9,.3,1) both; }
@keyframes boxDrop { from { transform: translateY(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
.tag { transform-box: view-box; transform-origin: 152px 26px; }
.is-visible .tag { animation: tagSwing 3.2s ease-in-out infinite; }
@keyframes tagSwing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* 04. самолёт летит из Китая в Россию */
.is-visible .plane { animation: planeFly 5s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes planeFly {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate3d(68px, -36px, 0); }
  88%  { opacity: 1; }
  100% { transform: translate3d(135px, -64px, 0); opacity: 0; }
}
.is-visible .pin--to { animation: pinPop 5s ease-in-out infinite; }
@keyframes pinPop { 0%, 74% { transform: scale(1); } 84% { transform: scale(1.5); } 100% { transform: scale(1); } }
.pin--to { transform-box: view-box; transform-origin: 168px 40px; }

/* 05. фура едет, колёса крутятся */
.is-visible .truck { animation: truckRoll 4s ease-in-out infinite; }
@keyframes truckRoll { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
.wheel { transform-box: view-box; }
.is-visible .wheel { animation: wheelSpin 1.6s linear infinite; }
@keyframes wheelSpin { to { transform: rotate(360deg); } }
.dash { transform-box: view-box; }
.is-visible .dash { animation: dashRun 1.1s linear infinite; }
@keyframes dashRun { to { transform: translateX(-34px); } }

/* 06. мяч скачет, искры расходятся */
.is-visible .ball { animation: ballHop 1.5s cubic-bezier(.35,0,.4,1) infinite; }
@keyframes ballHop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-26px); } }
.spark { opacity: 0; transform-box: view-box; transform-origin: center; }
.is-visible .spark { animation: sparkPop 1.5s ease-out infinite; }
.spark--2 { animation-delay: .12s !important; }
.spark--3 { animation-delay: .24s !important; }
@keyframes sparkPop { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }

/* ---------- РАЗВИЛКА «ПАРА В НАЛИЧИИ» ---------- */
.branch {
  display: flex; align-items: center; gap: 16px;
  padding: 16px clamp(16px, 3vw, 26px);
  border: 1px dashed rgba(198,255,0,.45); border-radius: var(--radius);
  background: rgba(198,255,0,.05);
  color: #E6E6EA; font-size: 15px;
}
.branch b { color: var(--accent); }
.branch__ic { flex: none; width: 44px; height: 44px; color: var(--accent); }
.branch.is-visible .branch__ic { animation: branchNudge 2.4s ease-in-out infinite; }
@keyframes branchNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- ОПЛАТА ---------- */
.paycards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.paycard {
  padding: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: transform .18s ease, border-color .2s ease, box-shadow .25s ease;
}
.paycard:hover { transform: translateY(-3px); border-color: var(--pc); box-shadow: 0 14px 36px -22px var(--pc); }
.paycard__ic {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px;
  border-radius: 10px; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, transparent);
}
.paycard__ic svg { width: 22px; height: 22px; }
.paycard b { display: block; font-family: var(--head); font-size: 17px; text-transform: uppercase; margin-bottom: 4px; }
/* :not(.paycard__ic) — иначе это правило перебивает цвет значка, он серел */
.paycard span:not(.paycard__ic) { font-size: 14px; color: var(--muted); line-height: 1.5; }
.paycard:nth-child(1) { --pc: #C6FF00; }
.paycard:nth-child(2) { --pc: #8B5CFF; }
.paycard:nth-child(3) { --pc: #16C8C0; }

/* ---------- ОБМЕН ---------- */
.swapline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px;
  padding: 16px 18px; border-radius: var(--radius);
  background: rgba(255,106,43,.07); border-left: 2px solid #FF6A2B;
  font-size: 14px; color: #D2D2D6;
}
.swapline svg { flex: none; width: 26px; height: 26px; color: #FF6A2B; }
.swapline__body { flex: 1 1 340px; }
.swapline__body b {
  display: block; margin-bottom: 3px;
  font-family: var(--head); font-weight: 600; font-size: 17px;
  text-transform: uppercase; color: #fff;
}
.swapline .btn { flex: none; padding: 12px 20px; font-size: 14px; }
.swapline .btn:hover { border-color: #FF6A2B; color: #FF6A2B; }

/* ---------- ТЕЛЕФОН ---------- */
@media (max-width: 860px) {
  .scene { grid-template-columns: 1fr; gap: 16px; }
  .scene--flip .scene__art { order: 0; }
  .scene__art { aspect-ratio: 3 / 2; }
  .road::before, .road__spark { display: none; }
  .road { gap: 34px; }
}

/* Человек попросил меньше движения — оставляем только статичные кадры. */
@media (prefers-reduced-motion: reduce) {
  .road__spark { display: none; }
  .dot { opacity: .7; }
  .measure { transform: none; }
}

/* ============================================================
   ВТОРОЙ СЛОЙ ДВИЖЕНИЯ
   Кадр не просто проявляется — он собирается: приезжает картинка,
   по ней проходит свет, следом по очереди встают номер, заголовок и текст.
   Везде fill-mode backwards, а не both: иначе застывший последний кадр
   анимации перебивает наведение мышью и картинка перестаёт приподниматься.
   ============================================================ */

/* картинка въезжает со своей стороны — у перевёрнутых кадров с другой */
.scene.is-visible > .scene__art        { animation: artIn .7s cubic-bezier(.2,.7,.3,1) backwards; }
.scene--flip.is-visible > .scene__art  { animation-name: artInFlip; }
@keyframes artIn     { from { opacity: 0; transform: translateX(-26px) scale(.97); } }
@keyframes artInFlip { from { opacity: 0; transform: translateX(26px)  scale(.97); } }

/* по кадру проходит цветной свет */
.scene.is-visible .scene__art::after { animation: glowSweep 1.5s ease-out backwards; }
@keyframes glowSweep {
  0%  { opacity: 0;   transform: translateX(-40%); }
  45% { opacity: .32; }
  100%{ opacity: .13; transform: none; }
}

/* текст встаёт по очереди */
.scene.is-visible .scene__no    { animation: sceneUp .6s cubic-bezier(.2,.7,.3,1) backwards; }
.scene.is-visible .scene__title { animation: sceneUp .6s cubic-bezier(.2,.7,.3,1) .09s backwards; }
.scene.is-visible .scene__text  { animation: sceneUp .6s cubic-bezier(.2,.7,.3,1) .18s backwards; }
.scene.is-visible .scene__note  { animation: sceneUp .6s cubic-bezier(.2,.7,.3,1) .27s backwards; }
@keyframes sceneUp { from { opacity: 0; transform: translateY(14px); } }

/* 01. облачко с сообщением выскакивает следом за телефоном */
.bubble { transform-box: view-box; transform-origin: 108px 96px; }
.is-visible .bubble { animation: bubblePop .55s cubic-bezier(.2,1.3,.4,1) .3s backwards; }
@keyframes bubblePop { from { opacity: 0; transform: scale(.5); } }

/* 02. деления линейки проступают по одному, слева направо */
.tick { transform-box: view-box; }
.is-visible .tick { animation: tickIn .45s ease backwards; }
.is-visible .tick--1 { animation-delay: .40s; }
.is-visible .tick--2 { animation-delay: .58s; }
.is-visible .tick--3 { animation-delay: .76s; }
.is-visible .tick--4 { animation-delay: .94s; }
.is-visible .tick--5 { animation-delay: 1.12s; }
@keyframes tickIn { from { opacity: 0; transform: translateY(-8px); } }

/* 04. пунктир маршрута бежит в сторону России */
.is-visible .route { animation: dashMarch 1.8s linear infinite; }
@keyframes dashMarch { to { stroke-dashoffset: -38; } }

/* 05. штрихи набегающего воздуха за фурой */
.speed line { opacity: 0; transform-box: view-box; }
.is-visible .speed line { animation: speedRun 1.2s linear infinite; }
.is-visible .speed line.speed--2 { animation-delay: .26s; }
.is-visible .speed line.speed--3 { animation-delay: .52s; }
@keyframes speedRun {
  0%   { opacity: 0;  transform: translateX(16px); }
  30%  { opacity: .7; }
  100% { opacity: 0;  transform: translateX(-14px); }
}

/* карточки оплаты выезжают по очереди */
.block.is-visible .paycard { animation: sceneUp .55s cubic-bezier(.2,.7,.3,1) backwards; }
.block.is-visible .paycard:nth-child(2) { animation-delay: .1s; }
.block.is-visible .paycard:nth-child(3) { animation-delay: .2s; }

/* значок обмена покачивается — стрелки туда-обратно */
.block.is-visible .swapline svg { animation: swapNudge 3s ease-in-out infinite; }
@keyframes swapNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }