/* QiblaAstro premium cinematic splash — presentation only */
#splash{position:fixed;inset:0;z-index:999;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:max(16px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));isolation:isolate;perspective:1200px;background:radial-gradient(circle at 50% 31%,rgba(34,76,128,.27) 0%,rgba(10,27,49,.11) 28%,transparent 49%),radial-gradient(circle at 50% 57%,rgba(193,126,27,.10),transparent 31%),linear-gradient(180deg,#06101d 0%,#02060f 60%,#010207 100%);transition:opacity .42s cubic-bezier(.2,.7,.2,1),filter .42s ease}
#splash::before{content:"";position:absolute;inset:-20%;z-index:-3;pointer-events:none;opacity:.43;background-image:radial-gradient(circle at 8% 19%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 77% 12%,#fff6cd 0 1px,transparent 1.5px),radial-gradient(circle at 88% 61%,#9fc4ff 0 1px,transparent 1.4px),radial-gradient(circle at 31% 70%,#fff 0 1px,transparent 1.4px),radial-gradient(circle at 64% 84%,#e7bd63 0 1px,transparent 1.4px);background-size:113px 127px,171px 153px,139px 191px,157px 131px,211px 167px;animation:splashStarDrift 11s linear infinite alternate}
#splash::after{content:"";position:absolute;left:-20%;right:-20%;bottom:-13vh;height:30vh;z-index:-2;border-radius:50% 50% 0 0/42% 42% 0 0;background:radial-gradient(ellipse at 50% 0%,rgba(249,194,75,.15),transparent 12%),radial-gradient(ellipse at 50% 0%,rgba(58,112,183,.22),rgba(5,12,25,.7) 47%,#02040a 72%);box-shadow:0 -1px 20px rgba(236,186,70,.11),0 -16px 68px rgba(43,88,151,.09)}
#splash.hide{opacity:0;filter:blur(1.25px);pointer-events:none}
#sp-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.18;pointer-events:none;mix-blend-mode:screen}
#splash-logo{display:none!important}
#splash-glow{position:relative;z-index:2;width:min(79vw,340px,42vh);aspect-ratio:1;flex:0 0 auto;margin:-7px 0 0;border-radius:50%;pointer-events:none;background:url('../images/splash-qiblaastro-emblem.svg') center/contain no-repeat;transform-style:preserve-3d;will-change:transform,filter;image-rendering:auto;filter:contrast(1.055) saturate(1.06) brightness(1.015) drop-shadow(0 24px 25px rgba(0,0,0,.78)) drop-shadow(0 0 22px rgba(223,160,44,.18));animation:splashEmblem3D 5.4s ease-in-out infinite}
#splash-glow::before{content:"";position:absolute;inset:10%;border-radius:50%;z-index:-1;background:radial-gradient(circle at 42% 34%,rgba(255,228,149,.19),rgba(247,196,76,.085) 24%,rgba(28,78,131,.055) 49%,transparent 71%);filter:blur(14px);animation:splashAura 4.1s ease-in-out infinite}
#splash-glow::after{content:"";position:absolute;inset:7%;border-radius:50%;background:linear-gradient(115deg,transparent 24%,rgba(255,247,201,.10) 41%,rgba(255,255,255,.23) 48%,rgba(255,221,126,.065) 56%,transparent 70%);mix-blend-mode:screen;transform:translateX(-34%) rotate(-8deg);animation:splashMetalSweep 4.1s ease-in-out infinite;mask-image:radial-gradient(circle,#000 0 61%,transparent 73%)}
#splash h1{position:relative;z-index:2;margin:-3px 0 0;direction:ltr;font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.02rem,8vw,2.6rem);line-height:1;font-weight:600;letter-spacing:.047em;text-indent:.047em;color:#f2c963;text-shadow:0 1px 0 #6b3c09,0 3px 10px rgba(0,0,0,.79),0 0 16px rgba(218,158,45,.20)}
#splash>p:not(#splash-tagline){position:relative;z-index:2;margin:7px 0 0;color:#dac89c;font-size:clamp(.81rem,3.2vw,.95rem);letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.55)}
#splash-tagline{position:relative;z-index:2;width:min(75vw,326px);margin:4px 0 0!important;padding-top:9px;border-top:1px solid rgba(220,173,67,.15);direction:ltr;text-align:center;font-size:0!important;color:transparent!important;line-height:1.35;text-transform:none}
#splash-tagline::before{content:"Powered by QiblaLabs";display:block;font-family:Georgia,'Times New Roman',serif;font-size:clamp(.73rem,3vw,.87rem);font-weight:500;letter-spacing:.06em;color:rgba(239,207,129,.81);text-shadow:0 2px 8px rgba(0,0,0,.58)}
#splash-tagline::after{content:"";display:block;width:68%;height:3px;margin:10px auto 0;border-radius:999px;background:linear-gradient(90deg,transparent 0%,rgba(222,172,63,.23) 10%,#d9a43a 42%,#fff0ad 50%,#c88922 58%,rgba(222,172,63,.23) 90%,transparent 100%);background-size:220% 100%;box-shadow:0 0 12px rgba(226,169,49,.19);animation:splashLoadSweep 1.5s ease-in-out infinite}
@keyframes splashEmblem3D{0%,100%{transform:translateY(1px) rotateX(1.6deg) rotateY(-2.6deg) scale(1);filter:contrast(1.055) saturate(1.06) brightness(1.015) drop-shadow(0 24px 25px rgba(0,0,0,.78)) drop-shadow(0 0 20px rgba(221,159,43,.16))}50%{transform:translateY(-4px) rotateX(-1deg) rotateY(3deg) scale(1.012);filter:contrast(1.07) saturate(1.07) brightness(1.025) drop-shadow(-3px 27px 29px rgba(0,0,0,.8)) drop-shadow(0 0 31px rgba(234,175,54,.25))}}
@keyframes splashMetalSweep{0%,20%{opacity:0;transform:translateX(-44%) rotate(-8deg)}46%{opacity:.78}72%,100%{opacity:0;transform:translateX(44%) rotate(-8deg)}}
@keyframes splashAura{0%,100%{opacity:.48;transform:scale(.97)}50%{opacity:.92;transform:scale(1.06)}}
@keyframes splashStarDrift{from{transform:translate3d(-1.5%,-1%,0)}to{transform:translate3d(1.5%,1%,0)}}
@keyframes splashLoadSweep{0%{background-position:100% 0;opacity:.4}50%{opacity:.95}100%{background-position:-110% 0;opacity:.45}}
/* Short phones: preserve the complete composition without clipping. */
@media(max-height:700px){#splash{gap:3px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(14px,env(safe-area-inset-bottom))}#splash-glow{width:min(61vw,260px,37vh);margin-top:-5px}#splash h1{font-size:1.74rem}#splash>p:not(#splash-tagline){font-size:.76rem;margin-top:3px}#splash-tagline{padding-top:7px;margin-top:3px!important}#splash-tagline::before{font-size:.69rem}#splash-tagline::after{margin-top:8px}}
/* Very short / landscape phone windows: compact rather than crop. */
@media(max-height:540px){#splash{gap:2px;padding-top:max(7px,env(safe-area-inset-top));padding-bottom:max(9px,env(safe-area-inset-bottom))}#splash-glow{width:min(46vw,210px,34vh);margin:0}#splash h1{font-size:1.45rem}#splash>p:not(#splash-tagline){font-size:.68rem;margin-top:2px}#splash-tagline{width:min(68vw,290px);padding-top:5px;margin-top:2px!important}#splash-tagline::before{font-size:.62rem}#splash-tagline::after{height:2px;margin-top:6px}}
/* Tall phones: prevent the emblem from becoming oversized just because width is available. */
@media(min-height:900px){#splash-glow{width:min(76vw,350px,39vh)}#splash{gap:6px}}
@media(prefers-reduced-motion:reduce){#splash::before,#splash-glow,#splash-glow::before,#splash-glow::after,#splash-tagline::after{animation:none!important}#splash-glow{transform:none!important}#splash.hide{filter:none}}