.prayer-page{
    --prayer-audio-level:0;
    min-height:100%;
    color:#e8fbff;
    background:#031d3b;
}

.prayer-sanctuary{
    position:relative;
    min-height:100svh;
    overflow:hidden;
    isolation:isolate;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 50% 42%, rgba(76,213,255,.16), transparent 34%),
        linear-gradient(160deg, #02152e 0%, #063b68 48%, #041f43 100%);
}

.prayer-sanctuary::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(circle at 50% 44%, rgba(119,229,255,.16), transparent 48%);
    opacity:calc(.08 + (var(--prayer-audio-level) * .025));
}

.prayer-light{
    position:absolute;
    inset:-20%;
    z-index:-2;
    background:radial-gradient(ellipse at center, rgba(89,225,255,.11), transparent 52%);
    animation:prayer-breathe 14s ease-in-out infinite alternate;
    filter:brightness(calc(1 + (var(--prayer-audio-level) * .04))) saturate(calc(1 + (var(--prayer-audio-level) * .03)));
}

.prayer-messages{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

.prayer-message{
    position:absolute;
    top:var(--prayer-y);
    left:100%;
    width:max-content;
    max-width:80vw;
    color:#d9f8ff;
    font-size:var(--prayer-size);
    letter-spacing:.035em;
    opacity:min(1, calc(var(--prayer-opacity) + (var(--prayer-audio-level) * .025)));
    text-shadow:0 0 calc(12px + (var(--prayer-audio-level) * 3px)) rgba(138,236,255,.2);
    animation:prayer-cross var(--prayer-duration) linear forwards;
    will-change:transform;
}

.prayer-messages--still .prayer-message{
    left:clamp(5%, 18vw, 28%);
    transform:none;
    animation:none;
}

.prayer-audio-toggle{
    appearance:none;
    border:1px solid rgba(216,249,255,.38);
    border-radius:999px;
    padding:.68rem 1.25rem;
    color:#eefcff;
    background:rgba(3,29,59,.28);
    box-shadow:0 0 24px rgba(92,218,255,.08);
    font:inherit;
    cursor:pointer;
    backdrop-filter:blur(7px);
    transition:border-color .2s ease, background .2s ease;
}

.prayer-audio-toggle[aria-pressed="true"]{
    transform:scale(calc(1 + (var(--prayer-audio-level) * .012)));
    filter:brightness(calc(1 + (var(--prayer-audio-level) * .025)));
    box-shadow:0 0 calc(24px + (var(--prayer-audio-level) * 5px)) rgba(92,218,255,.12);
}

.prayer-audio-toggle[aria-pressed="false"]{
    transform:none;
    filter:none;
}

.prayer-audio-toggle:hover,
.prayer-audio-toggle:focus-visible{
    border-color:rgba(216,249,255,.78);
    background:rgba(20,79,116,.42);
}

.prayer-footer{
    min-height:38svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.3rem;
    padding:4rem max(1.5rem, env(safe-area-inset-left));
    text-align:center;
    background:linear-gradient(180deg, #031d3b, #020d1c);
}

.prayer-footer p{ max-width:48rem; margin:0; color:rgba(221,245,250,.7); line-height:1.8; }
.prayer-footer .prayer-session-label{ color:#e8fbff; font-size:1.05rem; letter-spacing:.025em; }

@keyframes prayer-cross{ to{ transform:translateX(calc(-100vw - 110%)); } }
@keyframes prayer-breathe{ from{ opacity:.55; transform:scale(.96); } to{ opacity:1; transform:scale(1.05); } }

@media (prefers-reduced-motion:reduce){
    .prayer-light{ animation:none; }
    .prayer-audio-toggle{ transition:none; }
    .prayer-sanctuary::before,
    .prayer-light,
    .prayer-message,
    .prayer-audio-toggle[aria-pressed="true"]{
        filter:none;
        transform:none;
    }
}