/* Loaded before React so a cold launch never shows an empty white screen. */
.app-launching { background: #071626; overflow: hidden; }
.app-splash {
  position: fixed; inset: 0; width: 100vw; z-index: 1000; overflow: hidden;
  display: grid; place-items: center; color: #f1d27a;
  background: radial-gradient(ellipse at 50% 40%, #12354e 0, #0a1e33 38%, #050f1c 100%);
  opacity: 1; transition: opacity .42s ease, visibility .42s;
  font-family: Inter, "Segoe UI", sans-serif;
}
.app-splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.app-update-reload .app-splash { display: none; }
.splash-halo { position: absolute; width: min(112vw, 660px); aspect-ratio: 1; border: 1px solid #d4af3718; border-radius: 50%; box-shadow: 0 0 100px #0097b20b, inset 0 0 90px #0097b20b; }
.splash-halo::before, .splash-halo::after { content: ""; position: absolute; inset: 23px; border: 1px solid #d4af370c; border-radius: inherit; }
.splash-halo::after { inset: -25px; border-color: #d4af3708; }
.splash-identity { position: relative; z-index: 1; width: min(76vw, 340px); text-align: center; }
.splash-logo-wrap { position: relative; }
.splash-logo-wrap img { display: block; position: relative; width: 100%; height: auto; filter: drop-shadow(0 10px 28px #0003); }
.splash-light { position: absolute; width: 70%; height: 80%; top: -31%; left: 63%; transform-origin: 0 55%; background: conic-gradient(from 64deg at 0 55%, transparent, #f1d27a13 7deg, #f1d27a33 14deg, transparent 25deg); filter: blur(6px); }
.splash-name { color: #fff; margin: 27px -15px 0; font-size: clamp(13px, 3.5vw, 16px); font-weight: 500; letter-spacing: .035em; }
.splash-rule { display: block; width: 34px; height: 1px; margin: 20px auto 15px; background: #d4af37; }
.splash-caption { color: #a1b9c9; font-size: 10px; letter-spacing: .16em; line-height: 1.8; }
.splash-waves { position: absolute; bottom: 3%; left: -10%; width: 120%; height: 30%; color: #d4af37; opacity: .2; }
.splash-progress { position: absolute; bottom: max(54px, calc(30px + env(safe-area-inset-bottom))); width: 56px; height: 2px; overflow: hidden; background: #ffffff15; border-radius: 2px; }
.splash-progress > span { display: block; width: 100%; height: 100%; background: #e2bf68; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .splash-identity { animation: splash-reveal .85s cubic-bezier(.2,.7,.2,1) both; }
  .splash-light { animation: splash-beacon 3.2s ease-in-out infinite alternate; }
  .splash-waves { animation: splash-drift 6s ease-in-out infinite alternate; }
  .splash-progress > span { animation: splash-load 1.4s ease-in-out infinite; }
}
@keyframes splash-reveal { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes splash-beacon { from { opacity: .35; transform: rotate(-8deg); } to { opacity: .95; transform: rotate(9deg); } }
@keyframes splash-drift { to { transform: translateX(-3%) translateY(8px); } }
@keyframes splash-load { 0% { transform: translateX(-100%) scaleX(.3); } 65%, 100% { transform: translateX(100%) scaleX(.7); } }
@media (prefers-reduced-motion: reduce) { .app-splash { transition-duration: .01s; } }