:root{
  /* Плавная кривая для перекрытия: мягкий старт, быстрая середина,
     долгое оседание. Прежняя (.65,0,.35,1) тормозила слишком резко. */
  --services-transition-ease:cubic-bezier(.83,0,.17,1);
  --services-transition-dur:1.02s;

  --services-transition-bg:#f4f4f1;
  --services-transition-bg-top:#f8f8f5;
  --services-transition-text:#111318;
  --services-transition-line:rgba(17,19,24,.18);
  --services-transition-sheen:rgba(17,19,24,.035);
  --services-transition-edge:rgba(17,19,24,.14);
}

html.dark{
  --services-transition-bg:#090b10;
  --services-transition-bg-top:#0d0f14;
  --services-transition-text:#f2f4f6;
  --services-transition-line:rgba(226,231,238,.2);
  --services-transition-sheen:rgba(255,255,255,.035);
  --services-transition-edge:rgba(0,0,0,.46);
}

.servicesTransition{
  --services-transition-logo:var(--logoBanner);
  position:fixed;
  inset:-1px;
  z-index:2147483000;
  display:grid;
  place-items:center;
  overflow:visible;
  visibility:hidden;
  pointer-events:none;
  color:var(--services-transition-text);
  background:linear-gradient(180deg, var(--services-transition-bg-top), var(--services-transition-bg));
  transform:translate3d(0, 101.5%, 0);
  backface-visibility:hidden;
  contain:layout style;
  will-change:transform;
}

.servicesTransition::before,
.servicesTransition::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.servicesTransition::before{
  inset:0;
  background:linear-gradient(112deg, transparent 40%, var(--services-transition-sheen) 50%, transparent 60%);
  opacity:.62;
}

.servicesTransition::after{
  left:-2%;
  right:-2%;
  /* Полоса на переднем крае панели — она и создаёт ощущение скорости.
     Стала выше и мягче, чтобы читалась как смазанный край, а не как рамка. */
  height:104px;
  opacity:0;
  filter:blur(26px);
  will-change:opacity, transform;
}

.servicesTransition--departure::after{
  top:-52px;
  background:linear-gradient(180deg, transparent, var(--services-transition-edge));
}

.servicesTransition--arrival::after{
  bottom:-52px;
  background:linear-gradient(180deg, var(--services-transition-edge), transparent);
}

.servicesTransitionBrand{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  gap:32px;
  opacity:1;
  transform:none;
  /* Смаз добавляется только содержимому. Фон панели — ровная заливка,
     размывать её нет смысла: визуально ничего не изменится, а расход
     на полноэкранный фильтр будет заметным. */
  will-change:transform, filter, opacity;
}

.servicesTransitionMark{
  display:block;
  width:224px;
  height:148px;
  background:var(--services-transition-logo) center / contain no-repeat;
  transform:scale(2.1);
  transform-origin:center;
  filter:none;
}

.servicesTransitionCopy{
  position:relative;
  display:grid;
  gap:3px;
  min-height:38px;
  padding-left:20px;
  align-content:center;
  font-size:10px;
  line-height:.96;
  font-weight:430;
  letter-spacing:.26em;
  text-transform:uppercase;
}

.servicesTransitionCopy::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:1px;
  height:34px;
  background:linear-gradient(180deg, transparent, var(--services-transition-line), transparent);
  transform:translateY(-50%);
}

.servicesTransitionCopy span{
  display:block;
}

.servicesTransitionLine{
  grid-column:1 / -1;
  display:block;
  width:100%;
  height:1px;
  margin-top:12px;
  overflow:hidden;
  background:var(--services-transition-line);
  transform-origin:left;
}

.servicesTransitionLine span{
  display:block;
  width:100%;
  height:100%;
  background:var(--services-transition-text);
  transform:scaleX(0);
  transform-origin:left;
}

html.services-transition-active .servicesTransition--departure{
  visibility:visible;
  pointer-events:auto;
  animation:servicesTransitionCover var(--services-transition-dur) var(--services-transition-ease) both;
}

html.services-transition-active .servicesTransition--departure .servicesTransitionBrand{
  animation:servicesTransitionBrandCover var(--services-transition-dur) var(--services-transition-ease) both;
}

html.services-transition-active .servicesTransition--departure .servicesTransitionLine span{
  animation:servicesTransitionProgress .58s var(--services-transition-ease) .24s both;
}

html.services-transition-active .servicesTransition--departure::after{
  animation:
    servicesTransitionMotionEdge var(--services-transition-dur) var(--services-transition-ease) both,
    servicesTransitionEdgeStretch var(--services-transition-dur) var(--services-transition-ease) both;
}

.servicesTransition--arrival{
  display:none;
  transform:none;
}

html.services-arrival-pending .servicesTransition--arrival{
  display:grid;
  visibility:visible;
  pointer-events:auto;
  animation:servicesTransitionReveal var(--services-transition-dur) var(--services-transition-ease) 1.8s both;
}

html.services-arrival-from-light .servicesTransition--arrival{
  --services-transition-bg:#f4f4f1;
  --services-transition-bg-top:#f8f8f5;
  --services-transition-text:#111318;
  --services-transition-line:rgba(17,19,24,.18);
  --services-transition-sheen:rgba(17,19,24,.035);
  --services-transition-edge:rgba(17,19,24,.14);
  --services-transition-logo:url("../images/dsk-ru-black.png");
}

html[lang="en"].services-arrival-from-light .servicesTransition--arrival{
  --services-transition-logo:url("../images/dsk-en-black.png");
}

html.services-arrival-from-dark .servicesTransition--arrival{
  --services-transition-bg:#090b10;
  --services-transition-bg-top:#0d0f14;
  --services-transition-text:#f2f4f6;
  --services-transition-line:rgba(226,231,238,.2);
  --services-transition-sheen:rgba(255,255,255,.035);
  --services-transition-edge:rgba(0,0,0,.46);
  --services-transition-logo:url("../images/dsk-ru-white.png");
}

html[lang="en"].services-arrival-from-dark .servicesTransition--arrival{
  --services-transition-logo:url("../images/dsk-en-whtie.png");
}

html.services-arrival-pending .servicesTransition--arrival .servicesTransitionBrand{
  opacity:1;
  transform:none;
}

html.services-arrival-pending .servicesTransition--arrival.is-revealing .servicesTransitionBrand{
  animation:servicesTransitionBrandReveal var(--services-transition-dur) var(--services-transition-ease) .06s both;
}

html.services-arrival-pending .servicesTransition--arrival .servicesTransitionLine span{
  transform:scaleX(1);
}

html.services-arrival-pending .servicesTransition--arrival.is-revealing{
  animation-delay:.06s;
}

html.services-arrival-pending .servicesTransition--arrival.is-revealing::after{
  animation:
    servicesTransitionMotionEdge var(--services-transition-dur) var(--services-transition-ease) .06s both,
    servicesTransitionEdgeStretch var(--services-transition-dur) var(--services-transition-ease) .06s both;
}

@keyframes servicesTransitionCover{
  0%{ transform:translate3d(0, 101.5%, 0); }
  100%{ transform:translate3d(0, 0, 0); }
}

@keyframes servicesTransitionReveal{
  0%{ visibility:visible; transform:translate3d(0, 0, 0); }
  100%{ visibility:hidden; transform:translate3d(0, -101.5%, 0); }
}

@keyframes servicesTransitionProgress{
  0%{ transform:scaleX(0); }
  100%{ transform:scaleX(1); }
}

/* Содержимое отстаёт от панели и догоняет её к концу — так движение
   читается как инерция, а не как рывок. Размытие держится только на
   быстром участке и полностью уходит к остановке. */
@keyframes servicesTransitionBrandCover{
  0%{
    transform:translate3d(0, 54px, 0);
    filter:blur(14px);
    opacity:0;
  }
  30%{
    filter:blur(7px);
    opacity:1;
  }
  70%{
    filter:blur(2px);
  }
  100%{
    transform:translate3d(0, 0, 0);
    filter:blur(0);
    opacity:1;
  }
}

@keyframes servicesTransitionBrandReveal{
  0%{
    transform:translate3d(0, 0, 0);
    filter:blur(0);
    opacity:1;
  }
  36%{
    filter:blur(6px);
    opacity:1;
  }
  100%{
    transform:translate3d(0, -46px, 0);
    filter:blur(16px);
    opacity:0;
  }
}

/* Край панели не просто мигает, а растягивается по ходу движения */
@keyframes servicesTransitionEdgeStretch{
  0%{ transform:scaleY(.4); }
  26%{ transform:scaleY(1.35); }
  100%{ transform:scaleY(.5); }
}

@keyframes servicesTransitionMotionEdge{
  0%,100%{ opacity:0; }
  22%{ opacity:.72; }
  68%{ opacity:.34; }
}

@media (max-width:600px){
  .servicesTransitionBrand{
    grid-template-columns:1fr;
    justify-items:center;
    gap:8px;
  }

  .servicesTransitionMark{
    width:208px;
    height:138px;
    transform:scale(1.92);
  }

  .servicesTransitionCopy{
    grid-template-columns:auto auto;
    gap:10px;
    min-height:0;
    padding:14px 0 0;
    font-size:9px;
    letter-spacing:.2em;
  }

  .servicesTransitionCopy::before{
    left:50%;
    top:0;
    width:54px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--services-transition-line), transparent);
    transform:translateX(-50%);
  }

  .servicesTransitionLine{
    width:176px;
    margin-top:16px;
  }
}

@media (prefers-reduced-motion:reduce){
  html.services-transition-active .servicesTransition--departure,
  html.services-arrival-pending .servicesTransition--arrival,
  html.services-arrival-pending .servicesTransition--arrival.is-revealing{
    animation-duration:.01ms;
    animation-delay:0s;
  }

  html.services-transition-active .servicesTransition--departure .servicesTransitionLine span,
  html.services-arrival-pending .servicesTransition--arrival .servicesTransitionLine span{
    animation:none;
    opacity:1;
    transform:none;
  }

  html.services-transition-active .servicesTransition--departure::after,
  html.services-arrival-pending .servicesTransition--arrival.is-revealing::after{
    animation:none;
    opacity:0;
  }

  /* Смаз и сдвиг содержимого тоже выключаем: для тех, кто просил
     ограничить анимации, это лишнее движение. */
  html.services-transition-active .servicesTransition--departure .servicesTransitionBrand,
  html.services-arrival-pending .servicesTransition--arrival.is-revealing .servicesTransitionBrand{
    animation:none;
    filter:none;
    transform:none;
    opacity:1;
  }
}