/* v4: fill-mode both — нет вспышки на кадр до старта keyframes; мягче сдвиг у about */

@keyframes atc-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes atc-fade-up-soft {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html body .js-reveal:not(.is-revealed) {
  opacity: 0 !important;
  transform: translate3d(0, 32px, 0) !important;
}

html body .js-reveal.is-revealed {
  animation: atc-fade-up 0.8s ease both;
}

html body .js-reveal-about:not(.is-revealed) h4,
html body .js-reveal-about:not(.is-revealed) p {
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) !important;
  will-change: opacity, transform;
}

html body .js-reveal-about.is-revealed h4,
html body .js-reveal-about.is-revealed p {
  will-change: auto;
}

html body .js-reveal-about.is-revealed h4 {
  animation: atc-fade-up-soft 0.68s ease-out 0.04s both;
}

html body .js-reveal-about.is-revealed p {
  animation: atc-fade-up-soft 0.68s ease-out 0.16s both;
}

@media (prefers-reduced-motion: reduce) {
  html body .js-reveal,
  html body .js-reveal.is-revealed,
  html body .js-reveal:not(.is-revealed) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html body .js-reveal-about h4,
  html body .js-reveal-about p,
  html body .js-reveal-about.is-revealed h4,
  html body .js-reveal-about.is-revealed p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}