/* ريّا v60 «pro» — calm motion + continue strip + small UX fixes. Transform/opacity only; everything off under reduced motion. */
:root{--p60e:cubic-bezier(.2,.8,.2,1);--p60s:cubic-bezier(.34,1.4,.64,1)}
/* 1) lighter, faster route + reveal (no blur filter: blur repaints every frame on mid phones) */
@keyframes pm-route{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
.pm-route-in{animation:pm-route .42s var(--p60e) both}
.pm-r{filter:none!important;transform:translate3d(0,16px,0);transition:opacity .55s var(--p60e),transform .6s var(--p60e);transition-delay:var(--pm-d,0ms)}
.pm-r.pm-in{transform:none}
/* 2) continue strip */
.p60c{margin:0 0 14px;border-radius:22px;background:var(--card);border:1px solid var(--line,var(--hl));box-shadow:var(--elev1,var(--sh1));overflow:hidden}
.p60c-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 0;font-size:12.5px;color:var(--muted)}
.p60c-h b{font-weight:700;color:inherit}
.p60c-st{display:inline-flex;align-items:center;gap:5px;color:var(--gold3,var(--gold));font-weight:700}
.p60c-st i{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;animation:p60dot 2.8s ease-in-out infinite}
@keyframes p60dot{50%{opacity:.35;transform:scale(.7)}}
.p60c-g{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px 12px}
.p60t{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 12px 12px;border-radius:16px;background:var(--hs,var(--card2));border:1px solid var(--hl,var(--line));color:inherit;text-decoration:none;font:inherit;text-align:start;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.p60t small{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.p60t b{font-size:15px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p60t em{font-style:normal;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p60t .p60go{position:absolute;inset-inline-end:10px;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:rgb(var(--rc43))}
.p60t .p60go .ico{width:15px;height:15px}
.p60t small{padding-inline-end:34px}
.p60pr{height:3px;border-radius:3px;background:rgba(var(--rc7),.2);margin-top:6px;overflow:hidden}
.p60pr>i{display:block;height:100%;width:100%;background:var(--gold);transform-origin:right center;transform:scaleX(var(--p,0));transition:transform .4s linear}
html[dir=rtl] .p60pr>i{transform-origin:right center}
/* equalizer (playing state) */
.p60eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;width:14px}
.p60eq i{flex:1;height:100%;background:currentColor;border-radius:1px;transform-origin:bottom;transform:scaleY(.3)}
.p60-play .p60eq i{animation:p60eq 1s ease-in-out infinite}
.p60eq i:nth-child(2){animation-delay:-.35s!important}.p60eq i:nth-child(3){animation-delay:-.7s!important}.p60eq i:nth-child(4){animation-delay:-.15s!important}
@keyframes p60eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.hx-last.p60-moved{display:none!important}
/* 3) mini player: live equalizer + breathing play ring */
.pl-info{position:relative}
.player .p60eq{position:absolute;inset-inline-end:0;top:3px;color:var(--gold2);opacity:0;transition:opacity .3s}
.p60-play .player .p60eq{opacity:.9}
.pl-info b{padding-inline-end:20px}
#plPlay{position:relative}
#plPlay::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--gold2);opacity:0;transform:scale(.9);pointer-events:none}
.p60-play #plPlay::after{animation:p60ring 2.6s var(--p60e) infinite}
@keyframes p60ring{0%{opacity:.55;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.25)}}
#plPlay svg{transition:transform .25s var(--p60s)}
#plPlay.p60-tap svg{transform:scale(.82)}
.player:not([hidden]){animation:p60up .45s var(--p60e) both}
@keyframes p60up{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
/* 4) micro-interactions: press feedback everywhere (transform only) */
.hx-btn,.btn,.chip,.sx-t,.sx-band,.hx-card,.li,.p60t,.pl-btn,.pl-mini,.icon-btn,.act,.hx-tile,.hx-srow,.hx-rcard,.tabbar a,.p60chip{transition:transform .18s var(--p60e)}
.hx-btn:active,.btn:active,.chip:active,.sx-t:active,.sx-band:active,.hx-card:active,.li:active,.p60t:active,.pl-btn:active,.pl-mini:active,.icon-btn:active,.act:active,.hx-tile:active,.hx-srow:active,.hx-rcard:active,.p60chip:active{transform:scale(.965)}
.tabbar a:active i{transform:scale(.86)}
.tabbar{isolation:isolate}
.tabbar .p60ind{position:absolute;top:5px;bottom:calc(5px + env(safe-area-inset-bottom));right:0;width:20%;border-radius:14px;background:rgba(var(--rc6),.13);z-index:-1;transform:translateX(var(--x,0));transition:transform .45s var(--p60e),opacity .3s;pointer-events:none}
.tabbar a.on i{animation:p60pop .5s var(--p60s)}
@keyframes p60pop{0%{transform:scale(.8)}100%{transform:translateY(-1px)}}
.toast.show{animation:p60toast .38s var(--p60s)}
@keyframes p60toast{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.92)}to{opacity:1;transform:translateX(-50%)}}
.act[data-a=bm] i{display:inline-block;transition:transform .3s var(--p60s)}
.act[data-a=bm]:active i{transform:scale(1.3) rotate(-8deg)}
#themeBtn svg{transition:transform .5s var(--p60e)}
#themeBtn.p60-spin svg{transform:rotate(180deg)}
/* 5) ornamental shimmer: wordmark tile + hero eyebrow (a light band that slides; transform/opacity only) */
.brand-mark{position:relative}
.brand-mark::after{content:'';position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 35%,rgba(255,248,220,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none;animation:p60sh 7s var(--p60e) 1.2s infinite}
@keyframes p60sh{0%{transform:translateX(120%)}18%,100%{transform:translateX(-120%)}}
.hx-eyebrow{position:relative;overflow:hidden}
.hx-eyebrow::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,240,200,.35) 50%,transparent 70%);transform:translateX(110%);pointer-events:none;animation:p60sh 9s var(--p60e) 2s infinite}
.hx-hero .rx-star{animation:p60rot 140s linear infinite}
@keyframes p60rot{to{rotate:360deg}}
/* 6) reader: smoother page glide + paper edge */
.sw-in-n{animation:p60inN .36s var(--p60e) both}.sw-in-p{animation:p60inP .36s var(--p60e) both}
@keyframes p60inN{from{transform:translate3d(-56px,0,0);opacity:0}to{transform:none;opacity:1}}
@keyframes p60inP{from{transform:translate3d(56px,0,0);opacity:0}to{transform:none;opacity:1}}
.mp-pane .page{box-shadow:0 0 0 1px rgba(0,0,0,.03),0 18px 40px -26px rgba(0,0,0,.55)}
/* 7) empty states + search suggestions */
.p60e{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 18px;border-radius:20px;border:1px dashed var(--gl2,var(--line));background:var(--card)}
.p60e .p60e-i{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--hs,var(--card2));color:var(--gold2);border:1px solid var(--hl,var(--line))}
.p60e .p60e-i .ico{width:26px;height:26px}
.p60e b{font-size:16px}.p60e p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;max-width:34ch}
.p60e .p60e-i{animation:p60float 4s ease-in-out infinite}
@keyframes p60float{50%{transform:translateY(-4px)}}
.p60sg{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.p60sg span{width:100%;font-size:12.5px;color:var(--muted)}
.p60chip{border:1px solid var(--hl,var(--line));background:var(--card);color:inherit;border-radius:999px;padding:7px 14px;font:600 14px var(--ui,inherit);cursor:pointer}
/* 8) small fixes */
#hcNext{word-spacing:.18em}
@media (max-width:420px){body[data-route=quran] .chips.scroll-x{gap:6px}body[data-route=quran] .chips.scroll-x .chip{padding-inline:11px}}
/* reduced motion: everything still */
@media (prefers-reduced-motion:reduce){
 .pm-route-in,.player:not([hidden]),.toast.show,.tabbar a.on i,.sw-in-n,.sw-in-p,.p60e .p60e-i,.hx-hero .rx-star,.p60c-st i,#plPlay::after,.p60-play .p60eq i{animation:none!important}
 .brand-mark::after,.hx-eyebrow::after{display:none}
 .tabbar .p60ind,.p60pr>i,#themeBtn svg{transition:none}
 .p60-anim{animation:none!important}
}
.pm-reduce .brand-mark::after,.pm-reduce .hx-eyebrow::after{display:none}
#src48 details{overflow-x:auto}
.p60fold{margin:18px 0}
.p60fold-btn{width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:20px;border:1px solid var(--hl,var(--line));background:var(--card);color:inherit;font:inherit;text-align:start;cursor:pointer;box-shadow:var(--elev1,var(--sh1))}
.p60fold-btn span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.p60fold-btn b{font-size:16px}.p60fold-btn small{font-size:12.5px;color:var(--muted);line-height:1.6}
.p60fold-btn i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--hs,var(--card2));color:var(--gold2);transform:rotate(-90deg);flex:none}
.p60fold-btn i .ico{width:16px;height:16px}
@media (max-width:600px){table.tbl{display:block;max-width:100%;overflow-x:auto}}
.p60-gone{display:none!important}