/* ============================================
   SPLASH — Loading Screen
   ============================================ */

.splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

.splash-panel {
  position: absolute;
  background: linear-gradient(135deg, var(--crimson) 0%, #6B0F2B 100%);
}

.splash-tl { top: 0; left: 0; width: 50%; height: 50%; }
.splash-tr { top: 0; right: 0; width: 50%; height: 50%; }
.splash-bl { bottom: 0; left: 0; width: 50%; height: 50%; }
.splash-br { bottom: 0; right: 0; width: 50%; height: 50%; }

.splash-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.splash-cross {
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: splashCrossIn 0.8s ease-out 0.2s both, candleGlow 2.5s ease-in-out 1s infinite;
}

/* Stained glass light rays */
.splash-cross::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center, rgba(201, 169, 98, 0.3) 0%, rgba(201, 169, 98, 0.1) 30%, transparent 60%),
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(255,255,255,0.1) 8deg, transparent 16deg,
      transparent 45deg, rgba(255,255,255,0.07) 53deg, transparent 61deg,
      transparent 90deg, rgba(255,255,255,0.1) 98deg, transparent 106deg,
      transparent 135deg, rgba(255,255,255,0.07) 143deg, transparent 151deg,
      transparent 180deg, rgba(255,255,255,0.1) 188deg, transparent 196deg,
      transparent 225deg, rgba(255,255,255,0.07) 233deg, transparent 241deg,
      transparent 270deg, rgba(255,255,255,0.1) 278deg, transparent 286deg,
      transparent 315deg, rgba(255,255,255,0.07) 323deg, transparent 331deg,
      transparent 360deg
    );
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  animation: stainedGlassReveal 2s ease-out 0.5s both, stainedGlassPulse 4s ease-in-out 2.5s infinite;
  pointer-events: none;
}

.splash-cross svg {
  width: 64px;
  height: 64px;
}

.splash-logo {
  font-family: 'Crimson Pro', serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: white;
  margin-bottom: 2.5rem;
  text-align: center;
  opacity: 0;
  animation: splashTitleIn 0.7s ease-out 0.6s both;
}

.splash-progress-wrap {
  width: 180px;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: splashFadeIn 0.4s ease-out 1.1s both;
}

.splash-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), white);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.splash-status {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  opacity: 0;
  animation: splashFadeIn 0.4s ease-out 1.3s both;
}

.splash-quote {
  position: absolute;
  bottom: 3rem;
  font-family: 'Crimson Pro', serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(255,255,255,0.6);
  text-align: center;
  opacity: 0;
  animation: splashFadeIn 0.6s ease-out 1.7s both;
}

/* Dismiss animations */
.splash.hidden .splash-content,
.splash.hidden .splash-quote { animation: splashContentFade 0.3s ease-out forwards; }
.splash.hidden .splash-tl { animation: panelTL 0.7s cubic-bezier(0.4, 0, 0.65, 1) 0.15s forwards; }
.splash.hidden .splash-tr { animation: panelTR 0.7s cubic-bezier(0.4, 0, 0.65, 1) 0.15s forwards; }
.splash.hidden .splash-bl { animation: panelBL 0.7s cubic-bezier(0.4, 0, 0.65, 1) 0.15s forwards; }
.splash.hidden .splash-br { animation: panelBR 0.7s cubic-bezier(0.4, 0, 0.65, 1) 0.15s forwards; }

@keyframes splashCrossIn {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes splashTitleIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes splashFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes candleGlow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(201, 169, 98, 0.3)) drop-shadow(0 0 30px rgba(201, 169, 98, 0.15)); }
  50% { filter: drop-shadow(0 0 22px rgba(201, 169, 98, 0.6)) drop-shadow(0 0 50px rgba(201, 169, 98, 0.25)); }
}

@keyframes stainedGlassReveal {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes stainedGlassPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: translate(-50%, -50%) scale(1.06) rotate(2deg); opacity: 1; }
}

@keyframes splashContentFade { to { opacity: 0; } }
@keyframes panelTL { to { transform: translate(-105%, -105%); } }
@keyframes panelTR { to { transform: translate(105%, -105%); } }
@keyframes panelBL { to { transform: translate(-105%, 105%); } }
@keyframes panelBR { to { transform: translate(105%, 105%); } }