/* IT Statement — animated SVG logo
 * Элементы скрываются ТОЛЬКО когда JS добавил класс .js-animated.
 * Без JS логотип остаётся видимым (progressive enhancement). */

.logo-stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.logo-stage svg * { transform-box: fill-box; }

/* Скрываем элементы только после инициализации JS */
.logo-stage.js-animated svg .st0,
.logo-stage.js-animated svg .st1,
.logo-stage.js-animated svg .st2,
.logo-stage.js-animated svg .st3,
.logo-stage.js-animated svg .st4,
.logo-stage.js-animated svg .st5,
.logo-stage.js-animated svg .st6,
.logo-stage.js-animated svg .st7,
.logo-stage.js-animated svg .st8,
.logo-stage.js-animated svg .st9,
.logo-stage.js-animated svg .st10,
.logo-stage.js-animated svg .st11,
.logo-stage.js-animated svg .st12,
.logo-stage.js-animated svg .st13,
.logo-stage.js-animated svg .st14,
.logo-stage.js-animated svg .st15,
.logo-stage.js-animated svg .st16,
.logo-stage.js-animated svg .st17,
.logo-stage.js-animated svg .st18,
.logo-stage.js-animated svg .st19,
.logo-stage.js-animated svg .st20,
.logo-stage.js-animated svg .logo-gear {
  opacity: 0;
}

/* Шестерёнка — видна как только запущена анимация */
.logo-stage.js-animated.is-animating svg .logo-gear,
.logo-stage.js-animated.is-done     svg .logo-gear {
  opacity: 1;
}

/* Последовательное раскрытие остальных элементов */
.logo-stage.js-animated.show-it svg .st18 {
  transform-origin: center;
  animation: itPop .92s cubic-bezier(.2,.8,.2,1) forwards;
}
.logo-stage.js-animated.show-small svg .st9,
.logo-stage.js-animated.show-small svg .st10,
.logo-stage.js-animated.show-small svg .st11,
.logo-stage.js-animated.show-small svg .st12,
.logo-stage.js-animated.show-small svg .st13,
.logo-stage.js-animated.show-small svg .st14,
.logo-stage.js-animated.show-small svg .st15,
.logo-stage.js-animated.show-small svg .st16,
.logo-stage.js-animated.show-small svg .st17 {
  animation: smallStatementIn .82s ease-out forwards;
}
.logo-stage.js-animated.show-j svg .st19 {
  animation: blueJIn .95s cubic-bezier(.2,.8,.2,1) forwards;
}
.logo-stage.js-animated.show-bar svg .st20 {
  transform-origin: left center;
  animation: barSlide .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.logo-stage.js-animated.show-word svg .st8  { animation: wordIn .78s ease-out .00s forwards; }
.logo-stage.js-animated.show-word svg .st7  { animation: wordIn .78s ease-out .11s forwards; }
.logo-stage.js-animated.show-word svg .st0  { animation: wordIn .78s ease-out .22s forwards; }
.logo-stage.js-animated.show-word svg .st1  { animation: wordIn .78s ease-out .33s forwards; }
.logo-stage.js-animated.show-word svg .st2  { animation: wordIn .78s ease-out .44s forwards; }
.logo-stage.js-animated.show-word svg .st3  { animation: wordIn .78s ease-out .55s forwards; }
.logo-stage.js-animated.show-word svg .st4  { animation: wordIn .78s ease-out .66s forwards; }
.logo-stage.js-animated.show-word svg .st5  { animation: wordIn .78s ease-out .77s forwards; }
.logo-stage.js-animated.show-word svg .st6  { animation: wordIn .78s ease-out .88s forwards; }

@keyframes itPop {
  from { opacity: 0; transform: translateX(-32px) scale(.88); }
  65%  { opacity: 1; transform: translateX(0) scale(1.035); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes smallStatementIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blueJIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes barSlide {
  from { opacity: 0; transform: translateX(-24px) scaleX(.16); }
  to   { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes wordIn {
  from { opacity: 0; transform: translateX(38px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Без анимации (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .logo-stage.js-animated svg .st0,  .logo-stage.js-animated svg .st1,
  .logo-stage.js-animated svg .st2,  .logo-stage.js-animated svg .st3,
  .logo-stage.js-animated svg .st4,  .logo-stage.js-animated svg .st5,
  .logo-stage.js-animated svg .st6,  .logo-stage.js-animated svg .st7,
  .logo-stage.js-animated svg .st8,  .logo-stage.js-animated svg .st9,
  .logo-stage.js-animated svg .st10, .logo-stage.js-animated svg .st11,
  .logo-stage.js-animated svg .st12, .logo-stage.js-animated svg .st13,
  .logo-stage.js-animated svg .st14, .logo-stage.js-animated svg .st15,
  .logo-stage.js-animated svg .st16, .logo-stage.js-animated svg .st17,
  .logo-stage.js-animated svg .st18, .logo-stage.js-animated svg .st19,
  .logo-stage.js-animated svg .st20, .logo-stage.js-animated svg .logo-gear {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}