/* Static splash screen styles - loaded directly from public/ so the
   splash paints before the JS bundle executes. */
#splash-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  overflow:hidden;
  margin:0;
  padding-top:env(safe-area-inset-top,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-left:env(safe-area-inset-left,0px);
  width:100%;
  min-height:100dvh;
  min-height:100vh;
}
/* While the splash is up, force the page backdrop (html/body/#root, including
   overscroll and safe-area regions) to the splash's black so the app's navy
   background never peeks out from beneath the splash on mobile PWA. */
html:has(#splash-screen:not(.splash-fading)),
html:has(#splash-screen:not(.splash-fading)) body,
html:has(#splash-screen:not(.splash-fading)) #root{background:#000 !important}
#splash-screen.splash-fading{opacity:0;transition:opacity .3s ease;pointer-events:none}
.splash-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.splash-book-wrap{position:relative;width:min(70vw,400px);height:min(70vw,400px);display:flex;align-items:center;justify-content:center}
.splash-aura{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;mix-blend-mode:screen;animation:splash-breathe 4s ease-in-out infinite;will-change:transform,opacity}
.splash-layer{position:absolute;left:50%;top:50%;width:1000px;height:1000px;margin:-500px 0 0 -500px;border-radius:50%;filter:blur(140px);will-change:opacity}
.splash-layer-1{background:radial-gradient(circle,#3B82F6 0%,#2563EB 30%,#5C8F63 50%,#2563EB 75%,rgba(59,130,246,.4) 100%);animation:splash-fade-1 20s ease-in-out infinite}
.splash-layer-2{background:radial-gradient(circle,#059669 0%,#047857 30%,#5C8F63 50%,#059669 75%,rgba(5,150,105,.4) 100%);animation:splash-fade-2 20s ease-in-out infinite}
.splash-layer-3{background:radial-gradient(circle,#7C3AED 0%,#6D28D9 30%,#5C8F63 50%,#7C3AED 75%,rgba(124,58,237,.4) 100%);animation:splash-fade-3 20s ease-in-out infinite}
.splash-layer-4{background:radial-gradient(circle,#D97706 0%,#B45309 30%,#5C8F63 50%,#D97706 75%,rgba(217,119,6,.4) 100%);animation:splash-fade-4 20s ease-in-out infinite}
.splash-layer-5{background:radial-gradient(circle,#DC2626 0%,#B91C1C 30%,#5C8F63 50%,#DC2626 75%,rgba(220,38,38,.4) 100%);animation:splash-fade-5 20s ease-in-out infinite}
.splash-book{position:relative;z-index:10;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 25px 25px rgba(0,0,0,.15))}
.splash-text{font-family:Georgia,'Times New Roman',serif;letter-spacing:.025em;font-size:.875rem;color:#F4F1EA;animation:splash-breathe-text 4s ease-in-out infinite;will-change:opacity;margin:0}
@keyframes splash-breathe{0%,100%{opacity:.3;transform:scale(.95)}50%{opacity:.75;transform:scale(1.05)}}
@keyframes splash-breathe-text{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes splash-fade-1{0%,100%{opacity:1}20%,80%{opacity:0}}
@keyframes splash-fade-2{0%,20%{opacity:0}40%{opacity:1}60%,100%{opacity:0}}
@keyframes splash-fade-3{0%,40%{opacity:0}60%{opacity:1}80%,100%{opacity:0}}
@keyframes splash-fade-4{0%,60%{opacity:0}80%{opacity:1}100%{opacity:0}}
@keyframes splash-fade-5{0%{opacity:0}20%{opacity:1}40%,100%{opacity:0}}