/* Миллиардик — анимация первого экрана лендинга «Оживший телефон» (v1, 20.10.2026, «Бренд и продвижение»).
   Подключается после site.css. Без библиотек и внешних файлов. Без движения (prefers-reduced-motion) — остаётся обычная картинка. */
.ha,.ha-steps{display:none}
.stage.ha-on .ha{display:flex}
.stage.ha-on .ha-steps{display:flex}
.stage.ha-on .phone picture{visibility:hidden}
.stage.ha-on .phone{container-type:inline-size}

/* экран внутри телефона */
.ha{position:absolute;inset:11px;border-radius:36px;overflow:hidden;background:var(--paper);flex-direction:column;
  container-type:inline-size;font-family:"Golos Text",system-ui,sans-serif;color:var(--ink);font-size:4.2cqw;line-height:1.25}
.ha *{box-sizing:border-box}
.ha-top{display:flex;align-items:center;gap:2.6cqw;padding:5cqw 5cqw 2cqw}
.ha-ava{width:10cqw;height:10cqw;border-radius:50%;background:var(--coin-soft);display:grid;place-items:center;font-size:5.6cqw}
.ha-name{font-weight:700;font-size:4.4cqw}
.ha-lvl{display:inline-block;margin-top:.6cqw;padding:.4cqw 2cqw;border-radius:9cqw;background:var(--acc);color:#fff;font-size:2.6cqw;font-weight:700;letter-spacing:.06em}
.ha-fire{margin-left:auto;padding:1.4cqw 2.8cqw;border-radius:9cqw;background:var(--card);font-size:3.3cqw;font-weight:600;box-shadow:0 1px 0 var(--line)}
.ha-body{position:relative;flex:1}
.ha-sc{position:absolute;inset:0;padding:2cqw 5cqw 14cqw;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(3cqw);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.ha-sc.on{opacity:1;transform:none}
.ha-sc:not(.on) *{animation:none!important}
.ha-h{font-family:"Unbounded",system-ui,sans-serif;font-weight:700;font-size:5cqw;margin:1cqw 0 3cqw}
.ha-card{background:var(--card);border-radius:5cqw;padding:4cqw;box-shadow:0 1px 0 var(--line)}

/* 1. Договорились — контракт с подписями */
.ha-doc{background:var(--doc);border:1px solid var(--doc-line);border-radius:2cqw;padding:5cqw 4.5cqw;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  box-shadow:0 2cqw 6cqw rgba(23,28,79,.12);position:relative}
.ha-doc .t{text-align:center;font-weight:700;font-size:5cqw;letter-spacing:.04em}
.ha-doc .n{text-align:center;font-size:3.2cqw;color:var(--ink-2);margin-bottom:3.5cqw}
.ha-doc .r{display:flex;gap:3cqw;font-size:3.8cqw;padding:1.1cqw 0}
.ha-doc .r span{color:var(--ink-2);flex:0 0 32%}
.ha-doc .r b{font-weight:600}
.ha-doc .sum b{font-size:7.4cqw;font-weight:700}
.ha-sig{display:flex;gap:4cqw;margin-top:4cqw}
.ha-sig div{flex:1;border-top:1px solid var(--ink);padding-top:1cqw;text-align:center;font-size:3cqw;color:var(--ink-2);position:relative}
.ha-sig svg{position:absolute;left:4%;bottom:100%;width:92%;height:9cqw;overflow:visible}
.ha-sig path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160}
.on .ha-sig .s1 path{animation:ha-draw .6s .7s ease-out forwards}
.on .ha-sig .s2 path{animation:ha-draw .6s 1.3s ease-out forwards}
.ha-stamp{position:absolute;right:6cqw;bottom:7.5cqw;padding:1cqw 3cqw;border:.8cqw solid var(--acc);border-radius:2cqw;color:var(--acc);
  font-weight:800;font-size:4.4cqw;letter-spacing:.08em;transform:rotate(-12deg) scale(1.6);opacity:0}
.on .ha-stamp{animation:ha-stamp .35s 2s cubic-bezier(.2,1.6,.4,1) forwards}

/* 2. Сделал — дело, кнопка, проверка родителя */
.ha-deal{display:flex;align-items:center;gap:3cqw}
.ha-deal .ic{width:11cqw;height:11cqw;border-radius:3cqw;background:var(--coin-soft);display:grid;place-items:center;font-size:5.4cqw;flex:none}
.ha-deal .tx{flex:1;min-width:0}
.ha-deal .tx b{display:block;font-size:3.8cqw}
.ha-deal .tx i{font-style:normal;font-size:3.2cqw;color:var(--income);font-weight:700}
.ha-btn{position:relative;flex:none;width:25cqw;height:9.6cqw}
.ha-btn span{position:absolute;inset:0;display:grid;place-items:center;border-radius:3cqw;font-size:3.3cqw;font-weight:700;white-space:nowrap}
.ha-btn .b1{background:var(--acc);color:#fff}
.ha-btn .b2{background:var(--coin-soft);color:var(--coin-ink);opacity:0}
.ha-btn .b3{background:#DDF4EE;color:#08797C;opacity:0}
@media (prefers-color-scheme:dark){.ha-btn .b3{background:#0E3F45;color:#7FE3D9}}
.ha-tap{position:absolute;right:9cqw;top:50%;width:9cqw;height:9cqw;margin-top:-4.5cqw;border-radius:50%;background:rgba(255,194,60,.55);opacity:0}
.on .ha-tap{animation:ha-tap .6s .55s ease-out forwards}
.on .ha-btn .b1{animation:ha-out .2s .9s forwards}
.on .ha-btn .b2{animation:ha-inout 1s .9s forwards}
.on .ha-btn .b3{animation:ha-in .25s 1.75s forwards}
.ha-note{margin-top:3cqw;font-size:3.3cqw;color:var(--ink-2);text-align:center;opacity:0}
.on .ha-note{animation:ha-in .3s 1.9s forwards}
.ha-ghost{margin-top:2.6cqw;opacity:.5}

/* 3. Получил — баланс растёт */
.ha-bank{border-radius:5cqw;padding:5cqw;color:#fff;background:radial-gradient(120% 90% at 85% 10%,#4A5CFF 0,#2A3FD6 45%,#1B2BB0 100%);position:relative;overflow:hidden}
.ha-bank .l1{font-size:2.8cqw;font-weight:700;letter-spacing:.08em;opacity:.9}
.ha-bank .l2{font-size:3cqw;opacity:.85;margin-top:3cqw}
.ha-bank .bal{font-family:"Unbounded",system-ui,sans-serif;font-weight:800;font-size:13cqw;line-height:1.1}
.ha-bank .own{font-size:2.8cqw;opacity:.8;margin-top:4cqw}
.ha-bank .coin{position:absolute;right:4cqw;bottom:4cqw;width:11cqw;height:11cqw;border-radius:50%;background:var(--coin);display:grid;place-items:center;font-size:5.6cqw}
.ha-plus{display:inline-block;margin:4cqw auto 0;padding:1.6cqw 3.4cqw;border-radius:9cqw;background:#DDF4EE;color:#08797C;font-weight:800;font-size:4.2cqw;opacity:0}
@media (prefers-color-scheme:dark){.ha-plus{background:#0E3F45;color:#7FE3D9}}
.on .ha-plus{animation:ha-rise .9s .35s ease-out forwards}
.ha-c{text-align:center}
.ha-sub{font-size:3.3cqw;color:var(--ink-2);margin-top:2cqw;opacity:0}
.on .ha-sub{animation:ha-in .3s 1.3s forwards}

/* 4. Накопил — копилка и проценты */
.ha-goal .ha-gt{display:flex;align-items:center;gap:3cqw}
.ha-goal .ha-gt .ic{width:11cqw;height:11cqw;border-radius:3cqw;background:var(--acc-soft);display:grid;place-items:center;font-size:5.6cqw}
.ha-goal .ha-gt b{display:block;font-size:3.9cqw}
.ha-goal .ha-gt small{font-size:3.2cqw;color:var(--ink-2)}
.ha-goal .pct{margin-left:auto;font-weight:800;font-size:4.2cqw}
.ha-bar{height:2.6cqw;border-radius:2cqw;background:var(--line);margin-top:3.4cqw;overflow:hidden}
.ha-bar i{display:block;height:100%;width:50%;border-radius:2cqw;background:var(--coin);transition:width .9s cubic-bezier(.3,.8,.3,1)}
.ha-int{margin-top:3cqw;border-radius:4cqw;padding:3.4cqw;background:var(--coin-soft);display:flex;gap:2.6cqw;align-items:center;font-size:3.3cqw;opacity:0}
.ha-int b{color:var(--coin-ink)}
.on .ha-int{animation:ha-in .35s 1.35s forwards}
.ha-drop{position:absolute;left:50%;top:-2cqw;width:8cqw;height:8cqw;margin-left:-4cqw;border-radius:50%;background:var(--coin);opacity:0;
  box-shadow:inset 0 0 0 .8cqw #E0A21A}
.on .ha-drop{animation:ha-drop .7s .15s ease-in forwards}

/* нижнее меню */
.ha-tabs{display:flex;justify-content:space-around;padding:2.6cqw 3cqw 5cqw;background:var(--card);border-top:1px solid var(--line);font-size:2.7cqw;color:var(--ink-2)}
.ha-tabs span{display:flex;flex-direction:column;align-items:center;gap:.8cqw;transition:color .3s}
.ha-tabs span i{font-style:normal;font-size:4.6cqw;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.ha-tabs span.on{color:var(--acc-ink);font-weight:700}
.ha-tabs span.on i{filter:none;opacity:1}

/* шаги под телефоном */
.ha-steps{position:relative;z-index:2;list-style:none;margin:20px 0 0;padding:0;justify-content:center;gap:6px;flex-wrap:wrap}
.ha-steps li{padding:7px 12px;border-radius:999px;background:var(--card);color:var(--ink-2);font-size:14px;font-weight:600;
  box-shadow:0 1px 0 var(--line);transition:background .3s,color .3s,transform .3s}
.ha-steps li b{font-family:"Unbounded",system-ui,sans-serif;margin-right:5px}
.ha-steps li.on{background:var(--coin);color:#2A1B00;transform:translateY(-2px)}

/* чек вылетает на «Получил» и остаётся на «Накопил» */
.stage.ha-on .check{opacity:0;transform:rotate(-14deg) translate(30%,8%);transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.2,.4,1)}
.stage.ha-on[data-s="3"] .check,.stage.ha-on[data-s="4"] .check{opacity:1;transform:rotate(-7deg)}

@keyframes ha-draw{to{stroke-dashoffset:0}}
@keyframes ha-stamp{to{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes ha-tap{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
@keyframes ha-out{to{opacity:0}}
@keyframes ha-in{to{opacity:1}}
@keyframes ha-inout{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes ha-rise{0%{opacity:0;transform:translateY(5cqw)}40%{opacity:1;transform:none}100%{opacity:1}}
@keyframes ha-drop{0%{opacity:0;transform:translateY(-6cqw)}30%{opacity:1}100%{opacity:0;transform:translateY(16cqw) scale(.6)}}