/* YSA splash — 5 logo-color boxes, stagger in, fade out together */

:root {
  --splash-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --splash-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
}

#app-splash,
.app-splash-screen {
  --c-cabinet: #003380;
  --c-blue: #0047ab;
  --c-muted: #5b8fd4;
  --c-light: #e8f0fe;
  --c-yellow: #ffcc00;

  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app-splash {
  transition: opacity 0.5s var(--splash-ease) 0.42s, visibility 0.5s 0.42s;
}

#app-splash.splash-exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
}

/* Zone-bar boxes — heights echo the logo mark */
.splash-boxes {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  height: 2.5rem;
}

.splash-box {
  width: 0.875rem;
  height: var(--h, 1.5rem);
  border-radius: 0.25rem;
  opacity: 0;
  transform: translateY(1rem) scale(0.82);
  will-change: transform, opacity;
  box-shadow: 0 4px 14px -4px rgb(0 71 171 / 0.22);
}

.splash-box--light {
  box-shadow:
    0 0 0 1px rgb(0 71 171 / 0.12),
    0 4px 14px -4px rgb(0 71 171 / 0.1);
}

/* One-shot: stagger in on load */
#app-splash .splash-box,
.app-splash-screen:not(.splash-loop) .splash-box {
  animation: splash-box-in 0.52s var(--splash-pop) forwards;
  animation-delay: calc(var(--i) * 0.14s);
}

#app-splash.splash-exit .splash-box,
.app-splash-screen.splash-leaving .splash-box {
  animation: splash-box-out 0.48s var(--splash-ease) forwards !important;
  animation-delay: calc(var(--i) * 0.035s) !important;
}

#app-splash.splash-exit .splash-label,
.app-splash-screen.splash-leaving .splash-label {
  animation: splash-label-out 0.4s var(--splash-ease) forwards;
}

/* Auth bootstrapping — loop the sequence */
.app-splash-screen.splash-loop .splash-box {
  animation: splash-box-cycle 2.35s var(--splash-ease) infinite;
  animation-delay: calc(var(--i) * 0.14s);
}

.app-splash-screen.splash-loop .splash-label {
  animation: splash-label-cycle 2.35s var(--splash-ease) infinite;
  animation-delay: 0.56s;
}

.splash-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #003380;
  opacity: 0;
  animation: splash-label-in 0.45s var(--splash-ease) 0.62s forwards;
}

@keyframes splash-box-in {
  0% {
    opacity: 0;
    transform: translateY(1rem) scale(0.82);
  }
  65% {
    opacity: 1;
    transform: translateY(-0.2rem) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes splash-box-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-0.65rem) scale(0.86);
    filter: blur(1px);
  }
}

@keyframes splash-label-in {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  to {
    opacity: 0.7;
    transform: translateY(0);
  }
}

@keyframes splash-label-out {
  to {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
}

/* Looped cycle for session restore */
@keyframes splash-box-cycle {
  0%,
  100% {
    opacity: 0;
    transform: translateY(1rem) scale(0.82);
  }
  6% {
    opacity: 1;
    transform: translateY(-0.2rem) scale(1.04);
  }
  11%,
  52% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  62% {
    opacity: 0;
    transform: translateY(-0.65rem) scale(0.86);
    filter: blur(1px);
  }
  63%,
  99% {
    opacity: 0;
    transform: translateY(1rem) scale(0.82);
    filter: none;
  }
}

@keyframes splash-label-cycle {
  0%,
  18%,
  100% {
    opacity: 0;
    transform: translateY(0.35rem);
  }
  26%,
  52% {
    opacity: 0.7;
    transform: translateY(0);
  }
  62% {
    opacity: 0;
    transform: translateY(-0.35rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash-box {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .splash-label {
    opacity: 0.7 !important;
    animation: none !important;
  }

  #app-splash.splash-exit {
    transition-duration: 0.15s;
    transition-delay: 0s;
  }
}