/* ==========================================================================
   Схема ДВС на первом экране — автоматически сгенерированный файл.

   НЕ ПРАВИТЬ ВРУЧНУЮ: он пересобирается скриптом
   _source/build/make-hero-css.ps1 (запускается из build.ps1).

   Вся кинематика кривошипно-шатунного механизма посчитана заранее и записана
   в keyframes, поэтому в браузере анимация не требует ни одного вычисления
   в кадре и не нагружает основной поток (в отличие от прежней версии на JS).
   ========================================================================== */

.hero-tech .hs-rod, .hero-tech .hs-piston, .hero-tech .hs-valve,
.hero-tech .hs-flash, .hero-tech .hs-spark,
#hsFlywheel, #hsCrank0, #hsCrank1, #hsCrank2, #hsCrank3,
#hsNeedle, #hsHubSpin, #hsSpring { transform-box: fill-box; }

/* поршень: y = -(r·cosθ + √(L² − r²sin²θ)) */
@keyframes hsPiston {
  0% { transform: translateY(-186px); }
  2.08% { transform: translateY(-183.93px); }
  4.17% { transform: translateY(-177.93px); }
  6.25% { transform: translateY(-168.7px); }
  8.33% { transform: translateY(-157.21px); }
  10.42% { transform: translateY(-144.67px); }
  12.5% { transform: translateY(-132.23px); }
  14.58% { transform: translateY(-120.86px); }
  16.67% { transform: translateY(-111.21px); }
  18.75% { transform: translateY(-103.64px); }
  20.83% { transform: translateY(-98.26px); }
  22.92% { transform: translateY(-95.06px); }
  25% { transform: translateY(-94px); }
  27.08% { transform: translateY(-95.06px); }
  29.17% { transform: translateY(-98.26px); }
  31.25% { transform: translateY(-103.64px); }
  33.33% { transform: translateY(-111.21px); }
  35.42% { transform: translateY(-120.86px); }
  37.5% { transform: translateY(-132.23px); }
  39.58% { transform: translateY(-144.67px); }
  41.67% { transform: translateY(-157.21px); }
  43.75% { transform: translateY(-168.7px); }
  45.83% { transform: translateY(-177.93px); }
  47.92% { transform: translateY(-183.93px); }
  50% { transform: translateY(-186px); }
  52.08% { transform: translateY(-183.93px); }
  54.17% { transform: translateY(-177.93px); }
  56.25% { transform: translateY(-168.7px); }
  58.33% { transform: translateY(-157.21px); }
  60.42% { transform: translateY(-144.67px); }
  62.5% { transform: translateY(-132.23px); }
  64.58% { transform: translateY(-120.86px); }
  66.67% { transform: translateY(-111.21px); }
  68.75% { transform: translateY(-103.64px); }
  70.83% { transform: translateY(-98.26px); }
  72.92% { transform: translateY(-95.06px); }
  75% { transform: translateY(-94px); }
  77.08% { transform: translateY(-95.06px); }
  79.17% { transform: translateY(-98.26px); }
  81.25% { transform: translateY(-103.64px); }
  83.33% { transform: translateY(-111.21px); }
  85.42% { transform: translateY(-120.86px); }
  87.5% { transform: translateY(-132.23px); }
  89.58% { transform: translateY(-144.67px); }
  91.67% { transform: translateY(-157.21px); }
  93.75% { transform: translateY(-168.7px); }
  95.83% { transform: translateY(-177.93px); }
  97.92% { transform: translateY(-183.93px); }
  100% { transform: translateY(-186px); }
}

/* шатун: наклон считается так, чтобы нижний конец попал в шатунную шейку */
@keyframes hsRod {
  0% { transform: rotate(0deg); }
  2.08% { transform: rotate(-4.88deg); }
  4.17% { transform: rotate(-9.46deg); }
  6.25% { transform: rotate(-13.43deg); }
  8.33% { transform: rotate(-16.53deg); }
  10.42% { transform: rotate(-18.5deg); }
  12.5% { transform: rotate(-19.18deg); }
  14.58% { transform: rotate(-18.5deg); }
  16.67% { transform: rotate(-16.53deg); }
  18.75% { transform: rotate(-13.43deg); }
  20.83% { transform: rotate(-9.46deg); }
  22.92% { transform: rotate(-4.88deg); }
  25% { transform: rotate(0deg); }
  27.08% { transform: rotate(4.88deg); }
  29.17% { transform: rotate(9.46deg); }
  31.25% { transform: rotate(13.43deg); }
  33.33% { transform: rotate(16.53deg); }
  35.42% { transform: rotate(18.5deg); }
  37.5% { transform: rotate(19.18deg); }
  39.58% { transform: rotate(18.5deg); }
  41.67% { transform: rotate(16.53deg); }
  43.75% { transform: rotate(13.43deg); }
  45.83% { transform: rotate(9.46deg); }
  47.92% { transform: rotate(4.88deg); }
  50% { transform: rotate(0deg); }
  52.08% { transform: rotate(-4.88deg); }
  54.17% { transform: rotate(-9.46deg); }
  56.25% { transform: rotate(-13.43deg); }
  58.33% { transform: rotate(-16.53deg); }
  60.42% { transform: rotate(-18.5deg); }
  62.5% { transform: rotate(-19.18deg); }
  64.58% { transform: rotate(-18.5deg); }
  66.67% { transform: rotate(-16.53deg); }
  68.75% { transform: rotate(-13.43deg); }
  70.83% { transform: rotate(-9.46deg); }
  72.92% { transform: rotate(-4.88deg); }
  75% { transform: rotate(0deg); }
  77.08% { transform: rotate(4.88deg); }
  79.17% { transform: rotate(9.46deg); }
  81.25% { transform: rotate(13.43deg); }
  83.33% { transform: rotate(16.53deg); }
  85.42% { transform: rotate(18.5deg); }
  87.5% { transform: rotate(19.18deg); }
  89.58% { transform: rotate(18.5deg); }
  91.67% { transform: rotate(16.53deg); }
  93.75% { transform: rotate(13.43deg); }
  95.83% { transform: rotate(9.46deg); }
  97.92% { transform: rotate(4.88deg); }
  100% { transform: rotate(0deg); }
}

/* hsIn: открытие по фазам четырёхтактного цикла */
@keyframes hsIn {
  0% { transform: translateY(0px); }
  2.08% { transform: translateY(0px); }
  4.17% { transform: translateY(0px); }
  6.25% { transform: translateY(0px); }
  8.33% { transform: translateY(0px); }
  10.42% { transform: translateY(0px); }
  12.5% { transform: translateY(0px); }
  14.58% { transform: translateY(0px); }
  16.67% { transform: translateY(0px); }
  18.75% { transform: translateY(0px); }
  20.83% { transform: translateY(0px); }
  22.92% { transform: translateY(0px); }
  25% { transform: translateY(0px); }
  27.08% { transform: translateY(0px); }
  29.17% { transform: translateY(0px); }
  31.25% { transform: translateY(0px); }
  33.33% { transform: translateY(0px); }
  35.42% { transform: translateY(0px); }
  37.5% { transform: translateY(0px); }
  39.58% { transform: translateY(0px); }
  41.67% { transform: translateY(0px); }
  43.75% { transform: translateY(0px); }
  45.83% { transform: translateY(0px); }
  47.92% { transform: translateY(0px); }
  50% { transform: translateY(0px); }
  52.08% { transform: translateY(3.68px); }
  54.17% { transform: translateY(7.14px); }
  56.25% { transform: translateY(10.16px); }
  58.33% { transform: translateY(12.56px); }
  60.42% { transform: translateY(14.19px); }
  62.5% { transform: translateY(14.95px); }
  64.58% { transform: translateY(14.8px); }
  66.67% { transform: translateY(13.74px); }
  68.75% { transform: translateY(11.84px); }
  70.83% { transform: translateY(9.21px); }
  72.92% { transform: translateY(6.03px); }
  75% { transform: translateY(2.47px); }
  77.08% { transform: translateY(0px); }
  79.17% { transform: translateY(0px); }
  81.25% { transform: translateY(0px); }
  83.33% { transform: translateY(0px); }
  85.42% { transform: translateY(0px); }
  87.5% { transform: translateY(0px); }
  89.58% { transform: translateY(0px); }
  91.67% { transform: translateY(0px); }
  93.75% { transform: translateY(0px); }
  95.83% { transform: translateY(0px); }
  97.92% { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}

/* hsEx: открытие по фазам четырёхтактного цикла */
@keyframes hsEx {
  0% { transform: translateY(0px); }
  2.08% { transform: translateY(0px); }
  4.17% { transform: translateY(0px); }
  6.25% { transform: translateY(0px); }
  8.33% { transform: translateY(0px); }
  10.42% { transform: translateY(0px); }
  12.5% { transform: translateY(0px); }
  14.58% { transform: translateY(0px); }
  16.67% { transform: translateY(0px); }
  18.75% { transform: translateY(0px); }
  20.83% { transform: translateY(0px); }
  22.92% { transform: translateY(0px); }
  25% { transform: translateY(1.24px); }
  27.08% { transform: translateY(4.87px); }
  29.17% { transform: translateY(8.2px); }
  31.25% { transform: translateY(11.04px); }
  33.33% { transform: translateY(13.19px); }
  35.42% { transform: translateY(14.54px); }
  37.5% { transform: translateY(15px); }
  39.58% { transform: translateY(14.54px); }
  41.67% { transform: translateY(13.19px); }
  43.75% { transform: translateY(11.04px); }
  45.83% { transform: translateY(8.2px); }
  47.92% { transform: translateY(4.87px); }
  50% { transform: translateY(1.24px); }
  52.08% { transform: translateY(0px); }
  54.17% { transform: translateY(0px); }
  56.25% { transform: translateY(0px); }
  58.33% { transform: translateY(0px); }
  60.42% { transform: translateY(0px); }
  62.5% { transform: translateY(0px); }
  64.58% { transform: translateY(0px); }
  66.67% { transform: translateY(0px); }
  68.75% { transform: translateY(0px); }
  70.83% { transform: translateY(0px); }
  72.92% { transform: translateY(0px); }
  75% { transform: translateY(0px); }
  77.08% { transform: translateY(0px); }
  79.17% { transform: translateY(0px); }
  81.25% { transform: translateY(0px); }
  83.33% { transform: translateY(0px); }
  85.42% { transform: translateY(0px); }
  87.5% { transform: translateY(0px); }
  89.58% { transform: translateY(0px); }
  91.67% { transform: translateY(0px); }
  93.75% { transform: translateY(0px); }
  95.83% { transform: translateY(0px); }
  97.92% { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}

/* вспышка у верхней мёртвой точки такта сжатия */
@keyframes hsFlash {
  0% { opacity: 1; }
  1.11% { opacity: 0.66; }
  2.92% { opacity: 0.25; }
  5.83% { opacity: 0; }
  94.17% { opacity: 0; }
  97.08% { opacity: 0.25; }
  98.89% { opacity: 0.66; }
  100% { opacity: 1; }
}

/* искра на свече — короткий разряд */
@keyframes hsSpark {
  0% { opacity: 1; }
  1.7% { opacity: 1; }
  1.8% { opacity: 0; }
  98.2% { opacity: 0; }
  98.3% { opacity: 1; }
  100% { opacity: 1; }
}

/* свечение позади двигателя пульсирует вдвое чаще коленвала */
@keyframes hsAura {
  0% { opacity: .34; }
  25% { opacity: .6; }
  50% { opacity: .34; }
  75% { opacity: .6; }
  100% { opacity: .34; }
}

/* оборот маховика и кривошипов, стрелка тахометра, подвеска */
@keyframes hsSpin { to { transform: rotate(360deg); } }
@keyframes hsNeedle { from { transform: rotate(-120deg); } to { transform: rotate(182deg); } }
@keyframes hsTravel { from { transform: translateY(-14px); } to { transform: translateY(14px); } }
@keyframes hsSpring { from { transform: translateY(0) scaleY(1); } to { transform: translateY(5px) scaleY(.78); } }
@keyframes hsHubSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Привязка: одна анимация на тип элемента, фаза задаётся отрицательной
   задержкой — так вместо восьми наборов keyframes хватает четырёх.
   -------------------------------------------------------------------------- */
.hero-tech .hs-piston, .hero-tech .hs-rod, .hero-tech .hs-flash,
.hero-tech .hs-spark, .hero-tech .hs-valve { animation-duration: 2.4s; animation-iteration-count: infinite; animation-timing-function: linear; }

.hero-tech .hs-piston { animation-name: hsPiston; }
.hero-tech .hs-rod { animation-name: hsRod; transform-origin: 50% 0%; }
.hero-tech .hs-valve--in { animation-name: hsIn; }
.hero-tech .hs-valve--ex { animation-name: hsEx; }
.hero-tech .hs-flash { animation-name: hsFlash; }
.hero-tech .hs-spark { animation-name: hsSpark; }
#hsAura { animation: hsAura 2.4s linear infinite; }
#hsFlywheel { animation: hsSpin 1.2s linear infinite; transform-origin: 50% 50%; }
/* у кривошипа геометрия несимметрична (шейка сверху), поэтому центр вращения смещён вниз */
#hsCrank0, #hsCrank1, #hsCrank2, #hsCrank3 { animation: hsSpin 1.2s linear infinite; transform-origin: 50% 55.77%; }
#hsCrank1, #hsCrank2 { animation-delay: -.6s; }
#hsNeedle { animation: hsNeedle 2.4s linear infinite; transform-origin: 50% 91.67%; }
#hsHub { animation: hsTravel 1.15s ease-in-out infinite alternate; }
#hsHubSpin { animation: hsHubSpin 9s linear infinite; transform-origin: 50% 50%; }
#hsSpring { animation: hsSpring 1.15s ease-in-out infinite alternate; transform-origin: 50% 0%; }
#hsStrut { animation: hsTravel 1.15s ease-in-out infinite alternate; }

/* поршни 1 и 4 идут вместе, 2 и 3 — в противофазе (180° = 25% цикла) */
#hsPiston1, #hsPiston2, #hsRod1, #hsRod2 { animation-delay: -.6s; }

/* клапаны, вспышки и искры — по порядку работы 1-3-4-2 */
#hsIn1, #hsEx1, #hsFlash1, #hsSpark1 { animation-delay: -1.8s; }
#hsIn2, #hsEx2, #hsFlash2, #hsSpark2 { animation-delay: -0.6s; }
#hsIn3, #hsEx3, #hsFlash3, #hsSpark3 { animation-delay: -1.2s; }

/* пауза, когда первый экран уехал из окна или вкладка неактивна */
.hero-tech svg.is-paused .hs-piston, .hero-tech svg.is-paused .hs-rod,
.hero-tech svg.is-paused .hs-valve, .hero-tech svg.is-paused .hs-flash,
.hero-tech svg.is-paused .hs-spark, .hero-tech svg.is-paused .hs-particle,
.hero-tech svg.is-paused #hsAura, .hero-tech svg.is-paused #hsFlywheel,
.hero-tech svg.is-paused #hsCrank0, .hero-tech svg.is-paused #hsCrank1,
.hero-tech svg.is-paused #hsCrank2, .hero-tech svg.is-paused #hsCrank3,
.hero-tech svg.is-paused #hsNeedle, .hero-tech svg.is-paused #hsHub,
.hero-tech svg.is-paused #hsHubSpin, .hero-tech svg.is-paused #hsSpring,
.hero-tech svg.is-paused #hsStrut { animation-play-state: paused; }

/* на телефонах оставляем только поршни, шатуны, клапаны и вспышки */
@media (max-width: 720px) {
  #hsFlywheel, #hsNeedle, #hsHub, #hsHubSpin, #hsSpring, #hsStrut, #hsAura { animation: none; }
}