/* PDFGenie boot splash — sunrise theme (visual only; no “sun” wording) */

#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  transition: opacity 0.55s ease;
}

#splash-screen .splash-sky {
  position: absolute;
  inset: 0;
  transition: background 2.4s ease;
}

/* Phase 0–1: dawn; phase 2: clear day — tokens from /theme-sunrise.css */
#splash-screen.splash-phase-0 .splash-sky {
  background: linear-gradient(
    185deg,
    var(--sunrise-void) 0%,
    var(--sunrise-night) 38%,
    var(--sunrise-violet) 72%,
    var(--sunrise-ember) 92%,
    var(--sunrise-amber) 100%
  );
}

#splash-screen.splash-phase-1 .splash-sky {
  background: linear-gradient(
    185deg,
    var(--sunrise-night) 0%,
    var(--sunrise-indigo) 42%,
    var(--sunrise-flame) 78%,
    var(--sunrise-gold) 100%
  );
}

#splash-screen.splash-phase-2 .splash-sky {
  background: linear-gradient(
    185deg,
    var(--sunrise-sky) 0%,
    var(--sunrise-sky-soft) 38%,
    var(--sunrise-mist) 72%,
    var(--sunrise-cloud) 100%
  );
}

/* Rising orb (theme only — not the word “sun”) */
#splash-screen .splash-orb {
  position: absolute;
  left: 50%;
  bottom: -18vh;
  width: min(32vw, 200px);
  height: min(32vw, 200px);
  margin-left: calc(min(32vw, 200px) / -2);
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 32%,
    var(--sunrise-cream),
    #fde047 38%,
    var(--sunrise-mango) 72%,
    var(--sunrise-ember)
  );
  box-shadow:
    0 0 50px 18px rgb(251 191 36 / 0.45),
    0 0 100px 36px rgb(249 115 22 / 0.22);
  opacity: 0.85;
  will-change: transform, opacity;
}

#splash-screen .splash-orb.splash-orb--rise {
  animation: splash-orb-rise 2.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes splash-orb-rise {
  from {
    transform: translate3d(0, 42vh, 0) scale(0.88);
    opacity: 0.35;
    filter: blur(2px);
  }
  55% {
    filter: blur(0);
  }
  to {
    transform: translate3d(0, -8vh, 0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

#splash-screen .splash-horizon-glow {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -5%;
  height: 45%;
  background: radial-gradient(ellipse 80% 55% at 50% 100%, rgb(251 191 36 / 0.35), transparent 70%);
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 2s ease;
}

#splash-screen.splash-phase-2 .splash-horizon-glow {
  opacity: 0.25;
}

#splash-screen.splash-phase-2 .splash-orb {
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}

#splash-screen .splash-stage {
  position: relative;
  z-index: 2;
  width: min(92vw, 34rem);
  padding: 2rem 1.25rem;
  text-align: center;
}

#splash-screen .splash-text-slot {
  position: relative;
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#splash-screen .splash-line {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 22rem;
  padding: 0 0.5rem;
  font-size: clamp(1.05rem, 4.2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.35rem);
}

#splash-screen .splash-line.splash-line--on {
  visibility: visible;
  animation: splash-line-rise 2.4s ease-out forwards;
}

@keyframes splash-line-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
    color: var(--sunrise-amber);
    text-shadow: 0 0 28px rgb(251 191 36 / 0.55);
  }
  70% {
    color: var(--sunrise-cream);
    text-shadow: 0 0 14px rgb(251 191 36 / 0.35);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    color: var(--text);
    text-shadow: none;
  }
}

#splash-screen.splash-phase-2 .splash-text-slot {
  display: none;
}

#splash-screen .splash-logo-block {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
  margin-top: 0.5rem;
}

#splash-screen.splash-phase-2 .splash-logo-block {
  display: flex;
  animation: splash-logo-enter 0.85s ease 0.15s both;
}

@keyframes splash-logo-enter {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#splash-screen .splash-logo-block img {
  max-width: min(88vw, 380px);
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 28px rgb(15 23 42 / 0.12));
}

#splash-screen .splash-progress {
  width: min(78vw, 280px);
  height: 5px;
  border-radius: 999px;
  background: rgb(15 23 42 / 0.1);
  overflow: hidden;
}

#splash-screen .splash-progress__fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--sunrise-indigo),
    var(--sunrise-sky),
    var(--sunrise-sky-soft)
  );
}

#splash-screen.splash-phase-2 .splash-progress__fill.splash-progress--run {
  animation: splash-progress-fill 3s linear forwards;
}

@keyframes splash-progress-fill {
  to {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash-screen .splash-orb.splash-orb--rise {
    animation: none;
    transform: translate3d(0, -4vh, 0);
    opacity: 1;
    filter: none;
  }

  #splash-screen .splash-line.splash-line--on {
    animation: none;
    opacity: 1;
    transform: none;
    color: var(--text);
    text-shadow: none;
  }

  #splash-screen .splash-progress__fill.splash-progress--run {
    animation: none;
    width: 100%;
  }
}