/* ريّا — Prime layer. Uses the app's own theme tokens (--g9, --gold…) so every palette the reader picks still works. */
:root{--pm-p1:rgb(var(--rc6));--pm-p2:rgb(var(--rc4));--pm-glow:rgba(201,162,74,.16);--pm-spot:rgba(231,205,133,.12);--pm-intro-bg:#04150F}

/* intro: Bismillah over a star that draws itself */
.rx-intro{display:grid;justify-items:center;gap:6px}
.rx-intro .rx-star{width:min(46vmin,260px);height:auto;color:#E7CD85;animation:rx-spin 30s linear infinite}
.rx-intro .rx-bism{font-family:'Amiri Quran','Amiri',serif;font-size:clamp(28px,6vw,54px);line-height:1.6;margin-top:calc(-1 * min(30vmin,170px));
 background:linear-gradient(100deg,#E7CD85 20%,#FFF6DA 50%,#C9A24A 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
 animation:rx-ink 1.4s .3s cubic-bezier(.16,1,.3,1) both,pm-shine 4s linear infinite}
@keyframes rx-ink{from{opacity:0;filter:blur(10px);letter-spacing:.2em}to{opacity:1;filter:none;letter-spacing:0}}
.pm-intro:has(.rx-intro) .pm-intro-in>b{font-family:'Reem Kufi','Tajawal',sans-serif;color:#E7CD85}

/* star drawing */
.rx-star rect,.rx-star circle{stroke-dasharray:700;stroke-dashoffset:700;animation:rx-draw 2.6s cubic-bezier(.65,0,.35,1) forwards}
.rx-star :nth-child(2){animation-delay:.25s}.rx-star :nth-child(3){animation-delay:.5s}.rx-star :nth-child(4){animation-delay:.7s}.rx-star :nth-child(5){animation-delay:.9s}.rx-star :nth-child(6){animation-delay:1.1s}.rx-star :nth-child(7){animation-delay:1.25s}
@keyframes rx-draw{to{stroke-dashoffset:0}}
@keyframes rx-spin{to{transform:rotate(360deg)}}

/* home hero: night sky, rotating star, light rays, gold dust */
.hx-hero{position:relative;isolation:isolate;overflow:hidden}
.rx-decor{position:absolute;inset:0;z-index:-1;pointer-events:none}
.rx-decor canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.rx-decor .rx-star{position:absolute;width:min(70%,420px);height:auto;left:50%;top:50%;translate:-50% -50%;color:rgba(var(--rc6),.42);filter:drop-shadow(0 0 14px rgba(var(--rc6),.35));animation:rx-spin 90s linear infinite}
.rx-decor::before{content:'';position:absolute;inset:0;background:radial-gradient(45% 70% at 18% 50%,rgba(var(--rc6),.18),transparent 70%),radial-gradient(60% 60% at 80% 0%,rgba(var(--rc4),.18),transparent 70%)}
.rx-decor::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.28))}
.rx-decor .rx-star rect,.rx-decor .rx-star circle{animation-duration:3.4s}
.rx-ray{position:absolute;top:-40%;width:28%;height:180%;background:linear-gradient(180deg,rgba(255,240,200,.16),transparent 70%);filter:blur(18px);transform-origin:top center;mix-blend-mode:screen}
.rx-ray.r1{inset-inline-end:18%;rotate:18deg;animation:rx-sway 9s ease-in-out infinite}
.rx-ray.r2{inset-inline-end:40%;width:16%;rotate:-12deg;animation:rx-sway 12s ease-in-out infinite reverse}
@keyframes rx-sway{0%,100%{opacity:.55;transform:rotate(0)}50%{opacity:1;transform:rotate(6deg)}}

/* ayah of the day: words appear one by one like ink */
.rx-w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),filter .9s;transition-delay:calc(var(--i)*70ms + 200ms)}
.rx-go .rx-w{opacity:1;transform:none;filter:none}
.hx-ref{animation:rx-ink 1.2s .9s both}

/* prayer card: a slow gold light circling its border */
.hx-prayer{position:relative;isolation:isolate}
.hx-prayer::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
 background:conic-gradient(from var(--rx-a,0deg),transparent 0 70%,rgba(var(--rc5),.95) 85%,transparent 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rx-orbit 6s linear infinite}
@property --rx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rx-orbit{to{--rx-a:360deg}}
.cd-time{font-variant-numeric:tabular-nums}

/* section tiles, surahs, reciters */
.sx-t,.sx-feat,.hx-srow,.hx-rcard,.hx-card,.hx-btn{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
@media (hover:hover){
 .sx-t:hover{box-shadow:0 24px 50px -24px rgba(4,32,26,.45)}
 .sx-t:hover .sx-m{animation:rx-bob 1.4s ease-in-out infinite}
 .hx-srow:hover{transform:translateX(-4px)}
 .hx-rcard:hover{box-shadow:0 24px 50px -26px rgba(4,32,26,.5)}
 .hx-btn:hover{transform:translateY(-2px)}
}
@keyframes rx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.sx-feat{position:relative;overflow:hidden}
.sx-feat::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,240,200,.18) 50%,transparent 70%);background-size:250% 100%;animation:pm-shine 5s linear infinite;pointer-events:none}

/* top bar: glass */
.topbar{backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)}
.topnav a{transition:color .25s,background .25s}

/* waqf band */
.pm-inst{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1180px;margin:28px auto 8px;padding:22px 26px;border-radius:22px;text-decoration:none;color:#EFE7D2;
 background:radial-gradient(60% 120% at 100% 0%,rgba(var(--rc6),.20),transparent 60%),linear-gradient(135deg,rgb(var(--rc2)),rgb(var(--rc0)));border:1px solid rgba(var(--rc6),.35);box-shadow:0 24px 60px -30px rgba(var(--rc0),.6);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pm-inst:hover{transform:translateY(-3px)}
.pm-inst b{display:block;font-family:var(--kufi,inherit);font-size:19px;color:#fff}
.pm-inst small{color:rgba(239,231,210,.72);font-size:14px}
.pm-inst span.go{background:linear-gradient(135deg,rgb(var(--rc6)),rgb(var(--rc5)));color:rgb(var(--rc0));font-weight:700;border-radius:12px;padding:10px 18px;font-size:14.5px;white-space:nowrap}
@media (max-width:700px){.pm-inst{margin-inline:12px}}
@media (prefers-reduced-motion:reduce){.rx-w{opacity:1;transform:none;filter:none}.hx-prayer::after{animation:none}}

/* hero presence */
.hx-hero{min-height:clamp(340px,42vh,460px);display:flex;flex-direction:column;justify-content:center;box-shadow:0 40px 90px -40px rgba(4,32,26,.7),inset 0 1px 0 rgba(255,255,255,.08)!important}
.hx-hero .hx-ayah{text-shadow:0 2px 24px rgba(231,205,133,.25)}
.hx-hero .hx-btn.primary{box-shadow:0 10px 30px -8px rgba(201,162,74,.7)}

/* never let a stray element scroll the whole page sideways */
html,body{overflow-x:clip}