/* "Кіру" басқандағы аралық экран (OIDC round-trip: dormitory.yu.edu.kz ->
   id.yu.edu.kz -> dormitory.yu.edu.kz). Docflow-дың splash.js механикасы
   бойынша: тұрақты "YU Dormitory" белгісі, тек прогресс-жолақ пен
   статус-бейдж 4 сатыдан өтеді (спиннер -> ? -> прогресс -> ✓), әр саты
   нақты оқиғаға байланады (views.py-дағы DOC_REVIEW_FIELDS-ке қатысы жоқ,
   бұл таза UI-компонент). */
.login-splash {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 16px;
  background: #f5f7fa;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.login-splash.is-shown {
  opacity: 1;
  visibility: visible;
}

.login-splash-card {
  position: relative;
  width: min(680px, 94vw);
  aspect-ratio: 16 / 9.2;
  border-radius: 1.25rem;
  background: linear-gradient(165deg, #e8ecf6, #ffffff 70%);
  border: 1px solid #e4e9f0;
  overflow: hidden;
}
.login-splash-card svg {
  width: 100%;
  height: 100%;
  display: block;
}

.login-splash-badge-stage {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.login-splash-badge-stage.is-active {
  opacity: 1;
}

.login-splash-text {
  font-family: 'Public Sans', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #697385;
  min-height: 1.3em;
}
.login-splash-text .kk {
  color: #2b3240;
}
.login-splash-text .sep {
  color: #e4e9f0;
  margin: 0 0.4em;
}

#loginSplashBar {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0.04);
  transition: transform 0.4s ease;
}

.login-splash-spin {
  animation: login-splash-spin 0.9s linear infinite;
  transform-origin: 0 0;
}
@keyframes login-splash-spin {
  to { transform: rotate(360deg); }
}
.login-splash-q {
  animation: login-splash-pop 0.5s ease;
  transform-origin: 0 8px;
}
@keyframes login-splash-pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.login-splash-fill-mask rect {
  animation: login-splash-sweep 1.4s ease-in-out infinite;
}
@keyframes login-splash-sweep {
  0% { transform: translateX(-62%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(62%); }
}
.login-splash-dot {
  animation: login-splash-dotpulse 1.1s ease-in-out infinite;
}
.login-splash-dot:nth-child(2) { animation-delay: 0.15s; }
.login-splash-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes login-splash-dotpulse {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.login-splash-check-circle {
  animation: login-splash-check-pop 0.4s ease;
  transform-origin: 0 0;
}
.login-splash-check-path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: login-splash-check-draw 0.35s ease 0.15s forwards;
}
@keyframes login-splash-check-pop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes login-splash-check-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .login-splash-spin,
  .login-splash-q,
  .login-splash-fill-mask rect,
  .login-splash-dot,
  .login-splash-check-circle,
  .login-splash-check-path {
    animation: none !important;
  }
  .login-splash-badge-stage,
  #loginSplashBar {
    transition: none;
  }
}