/* RELOAD23 — плавные переходы между страницами */

@keyframes r23-page-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes r23-page-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -6px, 0); }
}

@keyframes r23-auth-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

html.r23-arriving main,
html.r23-arriving footer {
  animation: r23-page-in 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

html.r23-leaving main,
html.r23-leaving footer {
  animation: r23-page-out 170ms cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

/* Пока сессия не подтверждена, не показываем кнопку входа Steam:
   иначе при каждом переходе она мигает на секунду. */
html.r23-auth-pending .steam-login-btn {
  display: none !important;
}

/* Ссылки «Войти через Steam» внутри страниц тоже не должны мигать. */
html.r23-auth-pending a[href^="/api/auth/steam/start"] {
  visibility: hidden !important;
}

html.r23-auth-pending .user-area {
  display: flex;
  justify-content: flex-end;
  min-width: 150px;
}

html.r23-auth-pending .user-area:empty::before {
  content: "";
  display: block;
  width: 118px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.045) 20%, rgba(255, 255, 255, 0.12) 40%, rgba(255, 255, 255, 0.045) 60%);
  background-size: 220% 100%;
  animation: r23-auth-shimmer 1.1s linear infinite;
}

@media (max-width: 640px) {
  html.r23-auth-pending .user-area { min-width: 104px; }
  html.r23-auth-pending .user-area:empty::before { width: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  html.r23-arriving main,
  html.r23-arriving footer,
  html.r23-leaving main,
  html.r23-leaving footer {
    animation: none;
  }

  html.r23-auth-pending .user-area:empty::before {
    animation: none;
  }
}