*{box-sizing:border-box}
:root{color-scheme:dark;--gold:#d9b86c;--deep:#06140f}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}
body{font-family:Georgia,"Times New Roman",serif}
#stage{position:fixed;inset:0;width:100vw;height:100dvh;background:#000;overflow:hidden;isolation:isolate}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
#transition{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.shard{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;will-change:transform,opacity}
.shard.left{clip-path:polygon(0 0,50% 0,48.7% 16%,51.3% 29%,48.8% 43%,51.4% 58%,48.6% 72%,51.2% 86%,49.5% 100%,0 100%)}
.shard.right{clip-path:polygon(50% 0,100% 0,100% 100%,49.5% 100%,51.2% 86%,48.6% 72%,51.4% 58%,48.8% 43%,51.3% 29%,48.7% 16%)}
.shard.left.out{animation:split-left .82s cubic-bezier(.2,.7,.2,1) forwards}
.shard.right.out{animation:split-right .82s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes split-left{to{transform:translateX(-105%);opacity:.3}}
@keyframes split-right{to{transform:translateX(105%);opacity:.3}}
.fade-out{animation:fade-away .38s ease-out forwards}
@keyframes fade-away{to{opacity:0}}
.reminder{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4.2vh 7vw;background:radial-gradient(ellipse at center,#14251a 0%,#07100b 66%,#020403 100%);color:#fff3cf;border:clamp(5px,.7vw,12px) double var(--gold);outline:2px solid #765a25;outline-offset:-2.5vw}
.reminder:before{content:"";position:absolute;inset:1.8vw;border:1px solid #b18b43;pointer-events:none}
.hidden{display:none!important}
.ornament{color:var(--gold);font-size:clamp(18px,2.1vw,34px);letter-spacing:.45em;line-height:1}
.ornament.top{margin-bottom:1.5vh}.ornament.bottom{margin-top:1.8vh}
.eyebrow{font-family:Arial,sans-serif;font-weight:700;letter-spacing:.22em;font-size:clamp(13px,1.3vw,24px);color:#d7bd7d;margin:0 0 1.1vh}
.kind{font-family:Arial,sans-serif;font-weight:800;letter-spacing:.16em;font-size:clamp(16px,1.65vw,30px);color:#f6dc91;margin:0 0 2.4vh}
.hadith-ref{font-family:Arial,sans-serif;font-weight:700;font-size:clamp(19px,2vw,36px);color:#fff2c8;margin:0 0 2.2vh}
.arabic{font-family:"Noto Naskh Arabic","Amiri","Traditional Arabic",serif;font-size:clamp(31px,4.1vw,76px);font-weight:700;line-height:1.8;max-width:88vw;color:#fff8e6;text-shadow:0 1px 0 #8c6b2c;margin:0 auto 1.4vh}
.gold-line{height:2px;width:22vw;max-width:280px;background:linear-gradient(90deg,transparent,#d9b86c,transparent);margin:1vh 0 2vh}
.translation{font-family:Arial,sans-serif;font-weight:700;font-size:clamp(22px,2.45vw,46px);line-height:1.45;max-width:84vw;color:#fff9e9;margin:0}
.footnote{font-family:Arial,sans-serif;font-size:clamp(13px,1.25vw,23px);color:#d8c18a;margin:2.1vh 0 0}
#blackout{position:absolute;inset:0;z-index:100;background:#000;display:none}
body.blackout,#stage.blackout{background:#000}
#stage.blackout #blackout{display:block}
#stage.blackout .slide,#stage.blackout #transition,#stage.blackout .reminder{display:none!important}
@media (prefers-reduced-motion:reduce){.shard.left.out,.shard.right.out,.fade-out{animation-duration:.01ms!important}}