.app-splash { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 44%, #36251b 0%, #151318 37%, #090a0e 76%); color: #f9f1e7; transition: opacity .42s ease, visibility .42s ease; }
.app-splash.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.app-splash::before, .app-splash::after { content: ''; position: absolute; left: 50%; top: 46%; width: min(86vw, 540px); aspect-ratio: 1; border: 1px solid #c98b4830; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.app-splash::after { width: min(116vw, 730px); border-color: #c98b4812; }
.app-splash-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(#d7a76b0a 1px, transparent 1px), linear-gradient(90deg, #d7a76b0a 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at center, #000 10%, transparent 75%); }
.app-splash-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(88vw, 430px); padding: 20px 0 34px; text-align: center; }
.app-splash-kicker { display: flex; align-items: center; gap: 9px; font-size: 9px; font-weight: 800; letter-spacing: .25em; color: #d8ab78; }
.app-splash-kicker span { width: 6px; height: 6px; border-radius: 50%; background: #ffc481; box-shadow: 0 0 12px #ffb35b; animation: splash-signal 1.6s ease-in-out infinite; }
.app-splash-art { position: relative; display: grid; place-items: center; width: min(76vw, 340px); aspect-ratio: 1; margin: 9px 0 -16px; }
.app-splash-art::before { content: ''; position: absolute; width: 74%; height: 58%; border-radius: 50%; background: #e6903152; filter: blur(52px); }
.app-splash-art img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 27px #000a); animation: splash-float 3.8s ease-in-out infinite; }
.app-splash-wordmark { font: 800 clamp(39px, 10vw, 62px)/1 var(--display, Tektur, sans-serif); letter-spacing: -.075em; text-shadow: 0 7px 22px #0009; }
.app-splash-wordmark span { color: #ffbb67; }
.app-splash-subtitle { margin-top: 10px; color: #c3b9ae; font-size: 12px; }
.app-splash-progress { width: min(100%, 284px); height: 4px; margin-top: 31px; overflow: hidden; border-radius: 20px; background: #ffffff1c; box-shadow: 0 0 0 1px #ffffff0d; }
.app-splash-progress span { display: block; width: 8%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d47c36, #ffd796); box-shadow: 0 0 16px #f5ad60; transition: width .25s ease; }
.app-splash-status { min-height: 20px; margin-top: 11px; color: #b09b87; font: 10px var(--mono, monospace); letter-spacing: .06em; }
.app-splash-footer { position: absolute; z-index: 1; right: 24px; bottom: max(22px, env(safe-area-inset-bottom)); left: 24px; display: flex; justify-content: space-between; color: #a28e7c; font: 9px var(--mono, monospace); letter-spacing: .12em; }
@keyframes splash-float { 0%, 100% { transform: translateY(5px); } 50% { transform: translateY(-7px); } }
@keyframes splash-signal { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-height: 600px) { .app-splash-art { width: min(48vh, 260px); } .app-splash-content { padding: 6px 0 20px; } .app-splash-progress { margin-top: 19px; } }
@media (prefers-reduced-motion: reduce) { .app-splash-art img, .app-splash-kicker span { animation: none; } }