/* ================= ЭКРАН ПРИВЕТСТВИЯ ПОСЛЕ ВХОДА НА СМЕНУ ================= */

.welcome-curtain {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--color-black);
  transform: translateX(100%);
  transition: transform 0.5s ease;
  z-index: 3;
}

.welcome-curtain--visible {
  transform: translateX(0);
}

.welcome-logo {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  /* Полностью невидим, пока шапка не свернулась в полоску - иначе при
     display:flex + align-items:center по ПОЛНОЭКРАННОЙ высоте (пока кнопка
     "Вход на смену" ещё показана) текст центрируется по центру всего экрана
     и виден раньше времени. */
  opacity: 0;
}

/* Появление привязано к ОТДЕЛЬНОМУ классу, который JS ставит только ПОСЛЕ
   того, как переход высоты .shift-screen реально завершился - если вместо
   этого просто смотреть на .shift-screen--collapsed (ставится в момент
   СТАРТА сворачивания), то top:50% на середине самого перехода высоты
   (когда экран ещё не сжался до конца) на мгновение попадает в видимую
   область, и текст мелькает раньше времени. */
.welcome-logo--ready {
  opacity: 1;
}

.welcome-logo__word {
  position: absolute;
  top: 50%;
  font-weight: 900;
  font-size: 38px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  /* -50% - обычное вертикальное центрирование по top:50%, -150px - "до
     падения", слово ещё выше (за пределами свёрнутой полоски). */
  transform: translateY(calc(-50% - 150px));
}

/* Каждое слово стоит от истинной середины СВОИМ фиксированным отступом
   (а не через justify-content:center у общего ряда) - иначе разная ширина
   слов "GIPPO"/"HELPER" незаметно смещает видимый промежуток в сторону от
   реальной середины экрана. */
.welcome-logo__word--gippo {
  right: calc(50% + 14px);
  color: var(--color-black);
}

.welcome-logo__word--helper {
  left: calc(50% + 14px);
  color: var(--color-white);
}

/* Падение с отскоком/"дребезгом" о пол - несколько затухающих подпрыгиваний
   после первого касания, итог - ровно на месте (translateY(-50%), с учётом
   вертикального центрирования). */
.welcome-logo--drop .welcome-logo__word {
  animation: logo-drop 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes logo-drop {
  0%   { transform: translateY(calc(-50% - 150px)); }
  55%  { transform: translateY(calc(-50% + 6px)); }
  72%  { transform: translateY(calc(-50% - 3px)); }
  86%  { transform: translateY(calc(-50% + 1px)); }
  100% { transform: translateY(-50%); }
}

.welcome-card {
  /* Обычный поток документа (не fixed) - иначе всё, что должно идти НИЖЕ
     карточки (вкладки, заказы), некуда естественно "прицепить": высота
     карточки заранее не известна и fixed-позиционирование под ней требует
     ломкой ручной арифметики отступов. */
  position: relative;
  margin: 16px auto 0;
  width: calc(100% - 16px);
  max-width: 560px;
  transform: translateY(-16px);
  opacity: 0;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  padding: 24px;
  text-align: center;
  transition: opacity 0.45s ease, transform 0.45s ease;
  z-index: 2;
}

.welcome-card--visible {
  opacity: 1;
  transform: translateY(0);
}

.welcome-card__hello {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-black);
  margin-bottom: 6px;
}

.welcome-card__info {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-black);
  opacity: 0.75;
}

/* Вкладки + заказы появляются ПОСЛЕ карточки приветствия, той же анимацией
   (плавный подъём + проявление), одновременно друг с другом. */
.orders-section {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.orders-section--visible {
  opacity: 1;
  transform: translateY(0);
}