/* ==========================================================================
   motion.css — движение главной страницы
   --------------------------------------------------------------------------
   Подключается только на index.html. Весь файл работает, когда в системе
   не включено «уменьшить движение». Скрытые до появления состояния стоят
   под классом .motion: его ставит скрипт в <head>, поэтому без JavaScript
   страница видна целиком.

   Анимируются только transform, opacity и clip-path — без перерисовки вёрстки.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  :root {
    --out: cubic-bezier(.16, 1, .3, 1);        /* длинное мягкое торможение */
    --spring: cubic-bezier(.34, 1.56, .64, 1); /* лёгкий перелёт */
  }

  @keyframes m-rise  { from { opacity: 0; transform: translateY(20px); } }
  @keyframes m-drop  { from { opacity: 0; transform: translateY(-100%); } }
  @keyframes m-fade  { from { opacity: 0; } }
  @keyframes m-pop   { from { transform: scale(.6); } }
  @keyframes m-spin  { to { transform: rotate(360deg); } }
  @keyframes m-spin-back { to { transform: rotate(-360deg); } }

  /* ---- Шапка ----------------------------------------------------------- */
  .motion .top { animation: m-drop 800ms var(--out) backwards; }
  .brand__seal { transition: transform 900ms var(--out); }
  .brand:hover .brand__seal { transform: rotate(120deg); }

  /* ---- Заголовки: слова поднимаются из-под строки ---------------------- */
  .motion [data-split]:not(.is-split) { opacity: 0; animation: m-fade 400ms 1800ms forwards; }
  .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .03em .24em; margin: -.14em -.03em -.24em; }
  .w > span { display: inline-block; transform: translateY(125%) rotate(5deg); transform-origin: 0 100%; }
  .is-in > .w > span { transform: none; transition: transform 1100ms var(--out) calc(var(--d, 0ms) + var(--i) * 60ms); }

  /* ---- Герой: одна последовательность при загрузке --------------------- */
  .motion .hero .lede        { animation: m-rise 1000ms var(--out) 520ms backwards; }
  .motion .hero__cta > *     { animation: m-rise 1000ms var(--out) 660ms backwards; }
  .motion .hero__cta > * + * { animation-delay: 740ms; }
  .motion .hero__facts       { animation: m-rise 1000ms var(--out) 860ms backwards; }

  /* Розетка: проявляется, доворачивается и дальше очень медленно вращается */
  @keyframes m-rosette { from { opacity: 0; transform: rotate(-40deg) scale(.86); } }
  .hero__art { will-change: transform; transition: transform 700ms var(--out); }
  .hero__art::before { animation: m-rosette 2400ms var(--out) backwards, m-spin 280s linear 2400ms infinite; }

  /* Карточка направления: выезжает с наклоном, затем едва заметно парит */
  @keyframes m-card  { from { opacity: 0; transform: perspective(1400px) translateY(64px) rotateX(16deg) rotateY(-12deg) scale(.93); } }
  @keyframes m-float { 50% { transform: translateY(-6px); } }
  .motion .visa-stage { animation: m-card 1400ms var(--out) 320ms backwards; }
  /* парение — только там, где есть мышь: на телефоне карточка стоит на месте, по ней удобно попадать пальцем */
  @media (hover: hover) and (pointer: fine) {
    .motion .visa-stage { animation: m-card 1400ms var(--out) 320ms backwards, m-float 9s ease-in-out 1800ms infinite; }
    .motion .visa-stage:hover { animation-play-state: paused; }
  }
  .visa { will-change: transform; }

  /* Иридисцентная плёнка и гильош медленно плывут */
  @keyframes m-foil { to { transform: translateX(-50%); } }
  @keyframes m-mesh { to { transform: translateX(-160px); } }
  .motion .foil {
    right: -100%;
    background: linear-gradient(115deg, var(--iris-1), var(--iris-4) 15%, var(--iris-2) 31%, var(--iris-3) 50%, var(--iris-2) 69%, var(--iris-4) 85%, var(--iris-1));
    animation: m-foil 14s ease-in-out infinite alternate;
  }
  .motion .visa.iris::before, .motion .final.iris::before { right: -160px; animation: m-mesh 28s linear infinite; }

  /* Блик защитной плёнки идёт за курсором */
  .visa__sheen {
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 62%);
    mix-blend-mode: soft-light; transition: opacity 500ms var(--out);
  }
  .visa:hover .visa__sheen { opacity: 1; }

  /* Плашка выбранной вкладки переезжает; флаг чуть подпрыгивает */
  .visa__ink.is-live { transition: transform 620ms var(--out), width 620ms var(--out), height 620ms var(--out); }
  .visa.is-swap .visa__tab[aria-selected="true"] .flag { animation: m-pop 520ms var(--spring); }

  /* Содержимое карточки: строки приходят по очереди — и при загрузке, и при смене страны */
  @keyframes m-row  { from { opacity: 0; transform: translateY(12px); } }
  @keyframes m-name { from { opacity: 0; transform: translateX(18px); } }
  .visa { --base: 60ms; }
  .visa.is-load { --base: 720ms; }
  .visa.is-load .visa__head, .visa.is-swap .visa__head h2 { animation: m-name 700ms var(--out) var(--base) backwards; }
  .visa.is-swap .visa__head .price { animation: m-fade 400ms var(--base) backwards; }
  .visa.is-load .visa__tagline, .visa.is-swap .visa__tagline { animation: m-row 700ms var(--out) calc(var(--base) + 60ms) backwards; }
  .visa.is-load .visa__rows > div, .visa.is-swap .visa__rows > div { animation: m-row 700ms var(--out) calc(var(--base) + 110ms + var(--i) * 50ms) backwards; }
  .visa.is-load .note, .visa.is-swap .note { animation: m-row 700ms var(--out) calc(var(--base) + 380ms) backwards; }
  .visa.is-load .visa__mrz { animation: m-fade 900ms 1500ms backwards; }

  /* ---- Кнопки: блик и притяжение к курсору ------------------------------ */
  @keyframes m-sheen { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(130%) skewX(-20deg); } }
  .hero__cta .btn--primary, .final .btn--ink { position: relative; overflow: hidden; }
  .hero__cta .btn--primary::after, .final .btn--ink::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 70%);
    transform: translateX(-130%) skewX(-20deg);
  }
  .motion .hero__cta .btn--primary::after { animation: m-sheen 1300ms var(--out) 2100ms; }
  .hero__cta .btn--primary:hover::after, .final .btn--ink:hover::after { animation: m-sheen 1000ms var(--out); }
  .magnet { transition: transform 700ms var(--spring), background var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast); }
  .magnet.is-pull { transition: transform 120ms linear, background var(--fast), border-color var(--fast), color var(--fast), box-shadow var(--fast); }

  /* ---- Появление при прокрутке ------------------------------------------ */
  .motion [data-reveal] { opacity: 0; transform: translateY(32px); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1000ms var(--out) var(--d, 0ms), transform 1200ms var(--out) var(--d, 0ms); }

  /* «Платформа» и «Вы»: значок, затем пункты по одному, галочка — с перелётом */
  .motion .ledger__who span { transform: scale(0); }
  .motion .ledger__col.is-in .ledger__who span { transform: none; transition: transform 800ms var(--spring) calc(var(--d, 0ms) + 200ms); }
  .motion .ledger .ticks li { opacity: 0; transform: translateY(12px); }
  .motion .ledger__col.is-in .ticks li { opacity: 1; transform: none; transition: opacity 800ms var(--out) calc(var(--d, 0ms) + 320ms + var(--i) * 80ms), transform 900ms var(--out) calc(var(--d, 0ms) + 320ms + var(--i) * 80ms); }
  .motion .ledger .ticks li::before { transform: scale(0) rotate(-45deg); }
  .motion .ledger__col.is-in .ticks li::before { transform: none; transition: transform 700ms var(--spring) calc(var(--d, 0ms) + 440ms + var(--i) * 80ms); }

  /* Финальный блок раскрывается из-под маски; печать-розетка вращается */
  .motion .final[data-reveal] { opacity: 0; transform: translateY(40px) scale(.96); clip-path: inset(10% 6% 10% 6% round 48px); }
  .motion .final[data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 24px); transition: opacity 900ms var(--out), transform 1400ms var(--out), clip-path 1400ms var(--out); }
  .final__seal { animation: m-spin-back 220s linear infinite; }
  .motion .final .lede, .motion .final .row > * { opacity: 0; transform: translateY(16px); }
  .motion .final.is-in .lede, .motion .final.is-in .row > * { opacity: 1; transform: none; transition: opacity 900ms var(--out) 520ms, transform 1000ms var(--out) 520ms; }
  .motion .final.is-in .row > * + * { transition-delay: 600ms; }
  .motion .final.is-in .row > .magnet { transition: opacity 900ms var(--out) 520ms, transform 700ms var(--spring), background var(--fast), border-color var(--fast), color var(--fast); }
  .motion .final.is-in .row > .magnet + .magnet { transition-delay: 600ms, 0ms, 0ms, 0ms, 0ms; }
  .motion .final.is-in .row > .magnet.is-pull { transition: transform 120ms linear; }

  /* ---- Помощник появляется последним ------------------------------------ */
  @keyframes m-fab { from { opacity: 0; transform: translateY(24px) scale(.8); } }
  .motion .ai-fab { animation: m-fab 900ms var(--spring) 2300ms backwards; }
}