:root{
--prayer-bg-image:url('/assets/images/prayer-phases/night.svg');
--prayer-bg-overlay:linear-gradient(180deg,rgba(1,10,18,.28),rgba(1,10,18,.72));
}
body.prayer-sky-enabled{
background-color:#031722;
background-image:var(--prayer-bg-overlay),var(--prayer-bg-image);
background-size:cover;
background-position:center;
background-attachment:fixed;
transition:background-image 1.8s ease,background-color 1.8s ease;
}
body.prayer-sky-enabled::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.22));
pointer-events:none;
}
body.prayer-sky-enabled.phase-predawn{
--prayer-bg-image:url('/assets/images/prayer-phases/predawn.svg');
--prayer-bg-overlay:linear-gradient(180deg,rgba(3,14,31,.18),rgba(2,10,18,.66));
}
body.prayer-sky-enabled.phase-sunrise{
--prayer-bg-image:url('/assets/images/prayer-phases/sunrise.svg');
--prayer-bg-overlay:linear-gradient(180deg,rgba(46,37,65,.14),rgba(5,18,25,.62));
}
body.prayer-sky-enabled.phase-morning{
--prayer-bg-image:url('/assets/images/prayer-phases/morning.svg');
--prayer-bg-overlay:linear-gradient(180deg,rgba(14,72,112,.08),rgba(3,20,30,.65));
}
body.prayer-sky-enabled.phase-noon{
--prayer-bg-image:url('/assets/images/prayer-phases/noon.svg');
--prayer-bg-overlay:linear-gradient(180deg,rgba(12,78,126,.08),rgba(3,20,30,.66));
}
body.prayer-sky-enabled.phase-afternoon{
--prayer-bg-image:url('/assets/images/prayer-phases/afternoon.svg');
--prayer-bg-overlay:linear-gradient(180deg,rgba(76,48,31,.10),rgba(3,18,25,.68));
}
body.prayer-sky-enabled.phase-sunset{
--prayer-bg-image:url('/assets/images/prayer-phases/sunset.svg');
--prayer-bg-overlay:linear-gradient(180deg,rgba(67,20,43,.10),rgba(2,10,17,.72));
}
body.prayer-sky-enabled.phase-night{
--prayer-bg-image:url('/assets/images/prayer-phases/night.svg');
--prayer-bg-overlay:linear-gradient(180deg,rgba(0,6,18,.20),rgba(0,6,14,.78));
}
.prayer-sky-status{
position:fixed;
right:18px;
bottom:18px;
z-index:60;
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
background:rgba(2,16,25,.74);
backdrop-filter:blur(12px);
color:#fff;
font-size:.8rem;
box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.prayer-sky-status strong{color:#efb631}
@media(max-width:700px){
body.prayer-sky-enabled{background-attachment:scroll}
.prayer-sky-status{right:10px;bottom:10px;max-width:calc(100% - 20px)}
}
@media(prefers-reduced-motion:reduce){
body.prayer-sky-enabled{transition:none}
}