/*
  hero-anim.css — первый экран: большой телефон с четырьмя сменяющимися макетами мини-приложения
  (кафе → цветы → розница → автосервис), «дыхание» телефона, летящие в него иконки.
  Смена экранов и стрелки — hero-anim.js; без него статично виден экран кафе.
  Подключить: <link rel="stylesheet" href="hero-anim.css"> в <head>, фрагмент hero-anim.html — в hero,
  <script src="hero-anim.js" defer></script> — перед </body>.
  Цвета (переопределяются на :root / .hero-anim): --anim-stroke контуры и полоски, --anim-fill заливки,
  --anim-accent латунь, --anim-screen экран. Скрыть до 480px — класс hero-anim--hidden-mobile. Пропорции 760×700.
*/

.hero-anim {
  --ha-stroke: var(--anim-stroke, rgba(242,239,233,.55));
  --ha-fill:   var(--anim-fill,   rgba(242,239,233,.06));
  --ha-accent: var(--anim-accent, #c9a961);
  --ha-screen: var(--anim-screen, #15181c);
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  user-select: none;
}
.hero-anim__svg { display: block; width: 100%; height: auto; pointer-events: none; }

/* ---------- телефон ---------- */
.hero-anim__phone   { transform-origin: 410px 350px; animation: hero-anim-breathe 12s ease-in-out infinite; }
.hero-anim__body    { fill: var(--ha-fill); stroke: var(--ha-stroke); stroke-width: 1.5; }
.hero-anim__edge    { fill: none; stroke: var(--ha-stroke); stroke-width: 1; opacity: .3; }
.hero-anim__btn     { fill: none; stroke: var(--ha-stroke); stroke-width: 2; stroke-linecap: round; opacity: .6; }
.hero-anim__display { fill: var(--ha-screen); stroke: var(--ha-stroke); stroke-width: 1; stroke-opacity: .35; }
.hero-anim__island  { fill: var(--ha-stroke); opacity: .35; }
.hero-anim__home    { fill: var(--ha-stroke); opacity: .3; }

.hero-anim__gs      { stop-color: var(--ha-accent); }
.hero-anim__gs--in  { stop-opacity: .5; }
.hero-anim__gs--out { stop-opacity: 0; }
.hero-anim__halo        { opacity: .22; }
.hero-anim__screen-glow { opacity: .3; animation: hero-anim-pulse 6s ease-in-out infinite; }

/* ---------- интерфейс на экране ---------- */
.hero-anim__logo      { fill: var(--ha-accent); opacity: .9; }
.hero-anim__ring      { fill: none; stroke: var(--ha-stroke); stroke-width: 1.4; opacity: .7; }
.hero-anim__bar       { fill: var(--ha-stroke); opacity: .6; }
.hero-anim__bar--soft { opacity: .28; }
.hero-anim__chip      { fill: var(--ha-fill); stroke: var(--ha-stroke); stroke-width: 1; stroke-opacity: .22; }
.hero-anim__chip--on  { fill: var(--ha-accent); stroke: none; opacity: .85; }
.hero-anim__card      { fill: var(--ha-fill); stroke: var(--ha-stroke); stroke-width: 1; stroke-opacity: .16; }
.hero-anim__thumb     { fill: var(--ha-fill); }
.hero-anim__mini      { fill: var(--ha-accent); opacity: .9; }
.hero-anim__plus      { fill: none; stroke: var(--ha-screen); stroke-width: 1.7; stroke-linecap: round; }
.hero-anim__cta       { fill: var(--ha-accent); }
.hero-anim__cta-label { fill: var(--ha-screen); opacity: .65; }
.hero-anim__pic       { fill: none; stroke: var(--ha-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.hero-anim__pic--bold { stroke-width: 3.4; }
.hero-anim__pic-fill  { fill: var(--ha-accent); stroke: none; }

/* четыре экрана друг на друге; виден is-active (ставит JS). Неактивные до него сдвинуты влево, после — вправо */
.hero-anim__screen {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s ease;
}
.hero-anim__screen.is-active ~ .hero-anim__screen { transform: translateX(10px); }
.hero-anim__screen.is-active {
  opacity: 1;
  transform: none;
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
/* без JS (нет is-ready) виден первый экран */
.hero-anim:not(.is-ready) .hero-anim__screen--cafe { opacity: 1; transform: none; }

.hero-anim__nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 23%;
  pointer-events: none;
}

/* ---------- летящие элементы ---------- */
.hero-anim__flyers { opacity: .8; }
.hero-anim__bubble { fill: var(--ha-fill); stroke: var(--ha-stroke); stroke-width: 1.5; stroke-linejoin: round; }
.hero-anim__lines  { fill: none; stroke: var(--ha-stroke); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.hero-anim__icon   { fill: none; stroke: var(--ha-stroke); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-anim__icon--fill { fill: var(--ha-fill); }
.hero-anim__dot    { fill: var(--ha-accent); }

/* fly — путь к телефону и прозрачность, bow — изгиб и поворот, shape — уменьшение */
.hero-anim__fly, .hero-anim__bow, .hero-anim__shape {
  transform-origin: 0 0;
  animation-duration: var(--d);
  animation-delay: var(--t);
  animation-iteration-count: infinite;
}
.hero-anim__fly   { opacity: 0; animation-name: hero-anim-fly;    animation-timing-function: cubic-bezier(.45,.05,.75,.65); }
.hero-anim__bow   { animation-name: hero-anim-bow;    animation-timing-function: ease-in-out; }
.hero-anim__shape { animation-name: hero-anim-shrink; animation-timing-function: ease-in; }

/* старт (--sx/--sy), изгиб (--bx/--by), повороты, размер (--k), длительность (--d), отрицательная задержка (--t) */
.hero-anim__fly--1 { --sx:85px;  --sy:120px; --bx:30px;  --by:-45px; --r0:-6deg;  --r1:-2deg; --r2:4deg;  --d:11s;   --t:-.6s;  --k:.85; }
.hero-anim__fly--2 { --sx:60px;  --sy:370px; --bx:0px;   --by:-50px; --r0:-10deg; --r1:-4deg; --r2:6deg;  --d:9.5s;  --t:-5.2s; --k:.9; }
.hero-anim__fly--3 { --sx:150px; --sy:610px; --bx:50px;  --by:25px;  --r0:8deg;   --r1:3deg;  --r2:-4deg; --d:10s;   --t:-8s;   --k:.9; }
.hero-anim__fly--4 { --sx:770px; --sy:90px;  --bx:-40px; --by:15px;  --r0:5deg;   --r1:2deg;  --r2:-3deg; --d:11.5s; --t:-3.5s; --k:.8; }
.hero-anim__fly--5 { --sx:780px; --sy:480px; --bx:10px;  --by:50px;  --r0:-15deg; --r1:-5deg; --r2:10deg; --d:9s;    --t:-1.2s; --k:.85; }
.hero-anim__fly--6 { --sx:470px; --sy:35px;  --bx:-45px; --by:0px;   --r0:8deg;   --r1:2deg;  --r2:-6deg; --d:9.5s;  --t:-6s;   --k:.9; }
.hero-anim__fly--7 { --sx:230px; --sy:250px; --bx:0px;   --by:-30px; --r0:-4deg;  --r1:-1deg; --r2:3deg;  --d:8.5s;  --t:-3.9s; --k:.7; }
.hero-anim__fly--8 { --sx:120px; --sy:480px; --bx:20px;  --by:-30px; --d:8s;   --t:-3s; }

/* ---------- keyframes ---------- */
/* полёт от старта к центру телефона (410,350) с появлением и растворением по краям пути */
@keyframes hero-anim-fly {
  0%   { transform: translate(var(--sx), var(--sy)); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; animation-timing-function: linear; }
  100% { transform: translate(410px, 350px); opacity: 0; }
}
/* боковой изгиб траектории и лёгкий поворот */
@keyframes hero-anim-bow {
  0%   { transform: translate(0px, 0px) rotate(var(--r0, 0deg)); }
  50%  { transform: translate(var(--bx), var(--by)) rotate(var(--r1, 0deg)); }
  100% { transform: translate(0px, 0px) rotate(var(--r2, 0deg)); }
}
/* уменьшение у телефона */
@keyframes hero-anim-shrink {
  0%, 68% { transform: scale(var(--k, 1)); }
  100%    { transform: scale(calc(var(--k, 1) * .4)); }
}
/* телефон медленно приближается и отдаляется */
@keyframes hero-anim-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.2); }
}
/* мягкая пульсация свечения экрана */
@keyframes hero-anim-pulse {
  0%, 100% { opacity: .25; }
  50%      { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim__phone, .hero-anim__screen-glow,
  .hero-anim__fly, .hero-anim__bow, .hero-anim__shape { animation: none; }
  .hero-anim__screen { transform: none; transition: opacity .4s ease; }
  .hero-anim__screen.is-active ~ .hero-anim__screen { transform: none; }
  .hero-anim__fly { opacity: 0; }
  .hero-anim__fly--1 { opacity: 1; transform: translate(150px, 160px) rotate(-4deg) scale(.85); }
  .hero-anim__fly--2 { opacity: 1; transform: translate(170px, 440px) rotate(-6deg) scale(.9); }
  .hero-anim__fly--5 { opacity: 1; transform: translate(680px, 430px) rotate(-10deg) scale(.85); }
  .hero-anim__fly--6 { opacity: 1; transform: translate(650px, 190px) rotate(6deg) scale(.9); }
}

/* ---------- узкие экраны ---------- */
@media (max-width: 480px) {
  .hero-anim--hidden-mobile { display: none; }
}