/* RETMS boot splash — index.html + app-root-redirect (keep in sync) */

.layout-preloader-container,
.splash-screen-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background: linear-gradient(135deg, #ffffff 0%, #dbeeff 40%, #b3d9f7 70%, #e8f4fd 100%);
  overflow: hidden;
}

.layout-preloader-container::before,
.splash-screen-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #8ab8d8 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  pointer-events: none;
}

.layout-preloader-content,
.splash-screen-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(100%, 22rem);
  text-align: center;
}

/* Logo + ring loader */
.layout-preloader,
.splash-logo-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--splash-stage-size, 7.5rem);
  height: var(--splash-stage-size, 7.5rem);
  flex-shrink: 0;
}

.splash-logo-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(0, 87, 216, 0.14);
  border-top-color: #0057d8;
  border-right-color: #38bdf8;
  animation: splash-ring-spin 0.95s linear infinite;
  box-sizing: border-box;
}

.layout-preloader-logo,
.splash-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--splash-logo-size, 5.25rem) !important;
  height: var(--splash-logo-size, 5.25rem) !important;
  max-width: var(--splash-logo-size, 5.25rem) !important;
  max-height: var(--splash-logo-size, 5.25rem) !important;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

/* 5s text sequence: Please Wait → Loading → RETMS */
.splash-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  width: 100%;
}

.splash-message {
  position: relative;
  width: min(100%, 14rem);
  height: 1.65rem;
  margin: 0 auto;
}

/* ── Logo with pulse ─────────────────────────────────────────── */
.layout-preloader-logo {
  width: min(35vw, 160px);
  height: min(35vw, 160px);
  object-fit: contain;
  animation: splash-logo-pulse 2s ease-in-out infinite;
}

@keyframes splash-logo-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.07); opacity: 0.88; }
}

/* ── Brand text ──────────────────────────────────────────────── */
.splash-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  animation: splash-brand-in 0.7s ease both;
}

@keyframes splash-brand-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splash-english {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  font-weight: 500;
  color: #4a5b75;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.splash-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  animation: splash-dot-appear 1.2s ease-in-out infinite;
}

.splash-dot-1 {
  background: #0057d8;
  animation-delay: 0s;
}

@keyframes splash-brand-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splash-hindi {
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  font-weight: 700;
  color: #0a2540;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .layout-preloader-content,
  .splash-screen-inner {
    gap: 1.5rem;
    width: min(100%, 24rem);
  }

  .layout-preloader,
  .splash-logo-stage {
    --splash-stage-size: 8.5rem;
  }

  .layout-preloader-logo,
  .splash-logo {
    --splash-logo-size: 6rem;
  }

  .splash-phrase {
    font-size: 1.15rem;
  }
}

@media (min-width: 1200px) {
  .layout-preloader,
  .splash-logo-stage {
    --splash-stage-size: 9rem;
  }

  .layout-preloader-logo,
  .splash-logo {
    --splash-logo-size: 6.5rem;
  }
}

@keyframes splash-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes splash-text-1 {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  7% {
    opacity: 1;
    transform: translateY(0);
  }
  23% {
    opacity: 1;
    transform: translateY(0);
  }
  31% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 0;
  }
}

@keyframes splash-text-2 {
  0%,
  29% {
    opacity: 0;
    transform: translateY(10px);
  }
  35% {
    opacity: 1;
    transform: translateY(0);
  }
  51% {
    opacity: 1;
    transform: translateY(0);
  }
  59% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 0;
  }
}

@keyframes splash-text-3 {
  0%,
  57% {
    opacity: 0;
    transform: translateY(10px);
  }
  65% {
    opacity: 1;
    transform: translateY(0);
  }
  96% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes splash-dots-phase {
  0%,
  31% {
    opacity: 0;
  }
  35%,
  100% {
    opacity: 1;
  }
}

.splash-retms {
  margin-top: 0.35rem;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: transparent;
  background: linear-gradient(135deg, #0a2540 0%, #1565c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Progress bar ────────────────────────────────────────────── */
.splash-progress-wrap {
  width: min(80vw, 200px);
  height: 3px;
  background: #b8d8f0;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.splash-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #1565c0, #38bdf8);
  animation: splash-progress 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes splash-progress {
  0%   { width: 0%;    margin-left: 0%; }
  50%  { width: 70%;   margin-left: 15%; }
  100% { width: 0%;    margin-left: 100%; }
}