/* css/splash.css
   Splash screen visible from first paint until the app layout is mounted.
   Brand colors and logo come from CSS variables set inline in index.html
   from the cached brand entry (or ReTinA defaults for first-time users). */

.splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(160deg,
    var(--brand-deep)  0%,
    var(--brand)      55%,
    var(--brand-light) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 320ms ease-out;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: #fff;
}

.splash-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12), transparent 45%);
}

.splash-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.splash-logo {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: rgba(255,255,255,0.96) var(--brand-logo) center/68% no-repeat;
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  animation: splashPulse 1.8s ease-in-out infinite;
}

.splash-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.3px;
}

.splash-subline {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
}

.splash-dots {
  position: absolute;
  bottom: 14vh;
  z-index: 1;
  display: flex;
  gap: 6px;
}
.splash-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay: 0.15s; }
.splash-dots span:nth-child(3) { animation-delay: 0.30s; }

.splash-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.18);
  z-index: 1;
}
.splash-progress-bar {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 240ms ease;
}

.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes splashPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes dotBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(-5px); opacity: 1; }
}