*{box-sizing:border-box}
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;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center}
#slide{display:block;width:100%;height:100%;object-fit:contain;background:#000}
#blackout{position:absolute;inset:0;background:#000;z-index:20}
.hidden{display:none!important}
#transition{position:absolute;inset:0;pointer-events:none;z-index:5;display:none}
#transition.active{display:block}
.shard{position:absolute;top:0;width:50%;height:100%;background-size:200% 100%;background-repeat:no-repeat}
.shard.left{left:0;background-position:left center;clip-path:polygon(0 0,100% 0,96% 23%,100% 43%,94% 58%,100% 78%,96% 100%,0 100%)}
.shard.right{right:0;background-position:right center;clip-path:polygon(0 0,100% 0,100% 100%,4% 100%,0 78%,6% 58%,0 43%,4% 23%)}
.crack{position:absolute;left:50%;top:0;width:2px;height:100%;transform:translateX(-50%);background:linear-gradient(180deg,transparent,#fff1b8 10%,#d4af57 48%,#fff1b8 80%,transparent);opacity:.95;filter:drop-shadow(0 0 5px #d4af57)}
#transition.active .left{animation:splitLeft .75s cubic-bezier(.22,.72,.25,1) forwards}
#transition.active .right{animation:splitRight .75s cubic-bezier(.22,.72,.25,1) forwards}
#transition.active .crack{animation:crackFade .75s ease-out forwards}
@keyframes splitLeft{to{transform:translateX(-105%);opacity:.25}}
@keyframes splitRight{to{transform:translateX(105%);opacity:.25}}
@keyframes crackFade{0%{opacity:1;transform:translateX(-50%) scaleY(.2)}30%{transform:translateX(-50%) scaleY(1)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#transition{display:none!important}}
#reminder{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:3.2vh 4vw;background:radial-gradient(ellipse at center,#123b2c 0%,#071c16 62%,#020806 100%);color:#fff4d2;text-align:center}
#reminder:before{content:"";position:absolute;inset:1.4vh 1.2vw;border:2px solid #c9a44e;outline:1px solid rgba(201,164,78,.4);outline-offset:7px;pointer-events:none}
#reminder:after{content:"";position:absolute;inset:3vh 3vw;border:1px solid rgba(201,164,78,.45);pointer-events:none}
.reminder-inner{position:relative;z-index:1;width:100%;max-width:1500px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vh}
.eyebrow{font:600 clamp(14px,2vw,28px)/1.2 Arial,sans-serif;letter-spacing:.22em;color:#d8b65d}
.gold-rule{height:2px;width:62%;max-width:900px;background:linear-gradient(90deg,transparent,#d9b75e,#fff0b5,#d9b75e,transparent)}
.gold-rule.short{width:34%}
.hadith-ref{font:700 clamp(25px,3.2vw,48px)/1.2 Arial,sans-serif;letter-spacing:.03em;color:#f5d98a;text-shadow:0 2px 10px #000}
.arabic{font-family:"Noto Naskh Arabic","Amiri","Traditional Arabic",serif;font-size:clamp(36px,5.6vw,88px);font-weight:700;line-height:1.7;color:#fff9e9;text-shadow:0 2px 12px #000;max-width:95%;margin:0 auto}
.translation{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4.1vw,62px);font-weight:700;line-height:1.3;color:#fff2c9;max-width:92%;text-shadow:0 2px 10px #000}
.ornament{position:absolute;left:50%;width:min(34vw,460px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#c9a44e,transparent)}
.ornament:after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#e1c16c;background:#0b261d;padding:0 14px;font-size:24px}
.ornament.top{top:5.5vh}.ornament.bottom{bottom:5.5vh}
#error{position:absolute;z-index:30;bottom:10px;left:10px;color:#fff;background:#333;padding:8px;font:14px Arial}