/* Смена слайдов баннера: вертикально снизу вверх, перекрёстное растворение сцены + плавный подъём текста */
#kx-hero .kx-bg { overflow:hidden; }
#kx-hero .kx-hero-scene { animation:none; will-change:transform,opacity; }
#kx-hero .kx-hero-scene.kx-off { opacity:0; }
#kx-hero .kx-hero-scene.kx-in.kx-forward  { animation:kxSceneInF .85s cubic-bezier(.22,.7,.2,1) both; }
#kx-hero .kx-hero-scene.kx-in.kx-backward { animation:kxSceneInB .85s cubic-bezier(.22,.7,.2,1) both; }
#kx-hero .kx-hero-scene.kx-out.kx-forward  { animation:kxSceneOutF .85s cubic-bezier(.4,0,.6,1) both; }
#kx-hero .kx-hero-scene.kx-out.kx-backward { animation:kxSceneOutB .85s cubic-bezier(.4,0,.6,1) both; }
@keyframes kxSceneInF  { from{opacity:0;transform:translateY(7%) scale(1.03)} to{opacity:1;transform:none} }
@keyframes kxSceneInB  { from{opacity:0;transform:translateY(-7%) scale(1.03)} to{opacity:1;transform:none} }
@keyframes kxSceneOutF { from{opacity:1;transform:none} to{opacity:0;transform:translateY(-6%) scale(1)} }
@keyframes kxSceneOutB { from{opacity:1;transform:none} to{opacity:0;transform:translateY(6%) scale(1)} }

#kx-hero .kx-hl { transition:none; }
#kx-hero.kx-copy-out .kx-hl { opacity:0; transition:opacity .2s ease, transform .22s ease; }
#kx-hero.kx-copy-out.kx-forward .kx-hl  { transform:translateY(-30px); }
#kx-hero.kx-copy-out.kx-backward .kx-hl { transform:translateY(30px); }
#kx-hero.kx-copy-in .kx-hl > * { animation:kxCopyInF .55s cubic-bezier(.2,.75,.2,1) both; }
#kx-hero.kx-copy-in.kx-backward .kx-hl > * { animation-name:kxCopyInB; }
#kx-hero.kx-copy-in .kx-hl > *:nth-child(2) { animation-delay:.05s; }
#kx-hero.kx-copy-in .kx-hl > *:nth-child(3) { animation-delay:.1s; }
#kx-hero.kx-copy-in .kx-hl > *:nth-child(4) { animation-delay:.15s; }
@keyframes kxCopyInF { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:none} }
@keyframes kxCopyInB { from{opacity:0;transform:translateY(-36px)} to{opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce) {
  #kx-hero .kx-hero-scene.kx-in,#kx-hero .kx-hero-scene.kx-out,#kx-hero.kx-copy-in .kx-hl > * { animation:none!important; }
  #kx-hero .kx-hero-scene.kx-out { opacity:0; }
}
