/*
 * Самолетики главной – свои элементы .zy-flight (их дописывает HelpSection, см. withFlight),
 * чистый CSS: ни <img>, ни инлайнового <svg>, ни JS. Старые .animation-container/.trail из
 * разметки Битрикса скрыты: в обычном окне Яндекс Браузера они не показывались (в инкогнито – да).
 * Траектории – ключевые кадры из прежнего welcome-screen.js (px / 1.75), цикл 4 с.
 * След открывается через clip-path, все анимации на композиторе.
 * --zy-u – «пиксель макета»: 1px на широких экранах и доля ширины экрана там,
 * где блоки главной тянутся по vw (769–1366).
 */
.main-page-block-bg {
  --zy-u: 1px;
}
@media (max-width: 1366px) {
  .main-page-block-bg {
    --zy-u: calc(100vw / 1366);
  }
}

.main-page-block-bg .animation-container,
.main-page-block-bg .trail {
  display: none !important;
}

.zy-flight {
  position: absolute;
  top: calc(var(--zy-u) * 80);
  left: calc(var(--zy-u) * 200);
  width: calc(var(--zy-u) * 400);
  height: calc(var(--zy-u) * 237);
  pointer-events: none;
  opacity: 0;
  animation: zy-fade 4s infinite;
}
.zy-flight--c {
  top: calc(var(--zy-u) * 150);
  left: calc(var(--zy-u) * 350);
}
@media (max-width: 1366px) {
  /* как в исходной верстке: на 769–1366 второй самолет стоит в другом месте */
  .zy-flight--c {
    top: calc(var(--zy-u) * 350);
    left: calc(var(--zy-u) * 150);
  }
}
@media (max-width: 768px) {
  .zy-flight {
    display: none;
  }
}

.zy-flight__trail {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--zy-u) * 327);
  height: calc(var(--zy-u) * 237);
  background: url(/local/templates/zaychonok/assets/images/main-page/items/flight-trail-a.svg) center / contain no-repeat;
  animation: zy-trail 4s linear infinite;
}
.zy-flight--b .zy-flight__trail {
  background-image: url(/local/templates/zaychonok/assets/images/main-page/items/flight-trail-b.svg);
  animation-name: zy-trail-short;
}
.zy-flight--c .zy-flight__trail {
  background-image: url(/local/templates/zaychonok/assets/images/main-page/items/flight-trail-c.svg);
  animation-name: zy-trail-short;
}

.zy-flight__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.zy-flight__plane {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--zy-u) * 72);
  height: calc(var(--zy-u) * 42);
  background: url(/local/templates/zaychonok/assets/images/main-page/items/plane.webp) 0 0 / 100% auto no-repeat;
  animation: zy-plane 4s linear infinite;
  will-change: transform;
}
@media (max-width: 1366px) {
  .zy-flight__plane {
    top: calc(var(--zy-u) * 72);
    left: calc(var(--zy-u) * 40);
  }
}
.zy-flight--b .zy-flight__plane {
  animation-name: zy-plane4;
}
.zy-flight--c .zy-flight__plane {
  animation-name: zy-plane2;
}

@keyframes zy-fade {
  0% { opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes zy-trail {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 calc(100% - var(--zy-u) * 285.71) 0 0); }
}
@keyframes zy-trail-short {
  0% { clip-path: inset(0 100% 0 0); }
  90%, 100% { clip-path: inset(0 calc(100% - var(--zy-u) * 257.14) 0 0); }
}
@keyframes zy-plane {
  0% { transform: translate(0, 0) rotate(10deg); }
  5% { transform: translate(calc(var(--zy-u) * 11.43), calc(var(--zy-u) * -2.86)) rotate(8deg); }
  17% { transform: translate(calc(var(--zy-u) * 48.57), calc(var(--zy-u) * -28.57)) rotate(5deg); }
  30% { transform: translate(calc(var(--zy-u) * 85.71), calc(var(--zy-u) * -37.14)) rotate(25deg); }
  46.5% { transform: translate(calc(var(--zy-u) * 133.14), calc(var(--zy-u) * -28.57)) rotate(28deg); }
  50% { transform: translate(calc(var(--zy-u) * 142.86), calc(var(--zy-u) * -25.71)) rotate(26deg); }
  55% { transform: translate(calc(var(--zy-u) * 157.14), calc(var(--zy-u) * -20)) rotate(24deg); }
  60% { transform: translate(calc(var(--zy-u) * 171.43), calc(var(--zy-u) * -11.43)) rotate(25deg); }
  70% { transform: translate(calc(var(--zy-u) * 200), calc(var(--zy-u) * 0.86)) rotate(22deg); }
  80% { transform: translate(calc(var(--zy-u) * 228.57), calc(var(--zy-u) * 1.43)) rotate(19deg); }
  90% { transform: translate(calc(var(--zy-u) * 257.14), calc(var(--zy-u) * -11.43)) rotate(16deg); }
  100% { transform: translate(calc(var(--zy-u) * 285.71), calc(var(--zy-u) * -22.86)) rotate(14deg); }
}
@keyframes zy-plane2 {
  0% { transform: translate(0, calc(var(--zy-u) * 40)) rotate(-5deg); }
  34% { transform: translate(calc(var(--zy-u) * 97.14), 0) rotate(-15deg); }
  40% { transform: translate(calc(var(--zy-u) * 114.29), calc(var(--zy-u) * -12.57)) rotate(-13deg); }
  46% { transform: translate(calc(var(--zy-u) * 131.43), calc(var(--zy-u) * -20)) rotate(-9deg); }
  48% { transform: translate(calc(var(--zy-u) * 137.14), calc(var(--zy-u) * -22.86)) rotate(-4deg); }
  56% { transform: translate(calc(var(--zy-u) * 160), calc(var(--zy-u) * -31.43)) rotate(4deg); }
  70% { transform: translate(calc(var(--zy-u) * 200), calc(var(--zy-u) * -45.71)) rotate(6deg); }
  90% { transform: translate(calc(var(--zy-u) * 257.14), calc(var(--zy-u) * -51.43)) rotate(8deg); }
  100% { transform: translate(calc(var(--zy-u) * 257.14), calc(var(--zy-u) * -51.43)) rotate(8deg); }
}
@keyframes zy-plane4 {
  0% { transform: translate(0, calc(var(--zy-u) * -50)) rotate(45deg); }
  17% { transform: translate(calc(var(--zy-u) * 48.57), calc(var(--zy-u) * -11.43)) rotate(45deg); }
  30% { transform: translate(calc(var(--zy-u) * 85.71), calc(var(--zy-u) * -5.71)) rotate(35deg); }
  46.5% { transform: translate(calc(var(--zy-u) * 133.14), calc(var(--zy-u) * -14.29)) rotate(20deg); }
  50% { transform: translate(calc(var(--zy-u) * 142.86), calc(var(--zy-u) * -17.14)) rotate(20deg); }
  55% { transform: translate(calc(var(--zy-u) * 157.14), calc(var(--zy-u) * -20)) rotate(20deg); }
  60% { transform: translate(calc(var(--zy-u) * 171.43), calc(var(--zy-u) * -14.29)) rotate(30deg); }
  70% { transform: translate(calc(var(--zy-u) * 200), 0) rotate(40deg); }
  80% { transform: translate(calc(var(--zy-u) * 228.57), calc(var(--zy-u) * 11.43)) rotate(45deg); }
  90% { transform: translate(calc(var(--zy-u) * 257.14), calc(var(--zy-u) * 28.57)) rotate(45deg); }
  100% { transform: translate(calc(var(--zy-u) * 257.14), calc(var(--zy-u) * 28.57)) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .zy-flight {
    display: none;
  }
}