*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000}
body{font-family:Georgia,"Times New Roman",serif;color:#f5e7b0}
#screen{position:fixed;inset:0;background:#000;overflow:hidden}
.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .65s ease;user-select:none;-webkit-user-drag:none}
.slide.active{opacity:1}
.reminder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:3.5vmin;background:radial-gradient(ellipse at center,#103b27 0%,#061b13 64%,#020805 100%);z-index:5}
.reminder.hidden{display:none}
.ornament{position:relative;width:min(92vw,150vh);height:min(84vh,47.25vw);min-height:260px;border:2px solid #c7a64c;outline:1px solid rgba(220,184,91,.55);outline-offset:7px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3.4% 5%;background:linear-gradient(145deg,rgba(7,37,25,.92),rgba(1,13,9,.97));box-shadow:0 0 38px #000,inset 0 0 28px rgba(200,164,70,.13)}
.ornament:before,.ornament:after{content:"۞";position:absolute;color:#d8b75e;font-size:clamp(22px,4vw,56px);line-height:1}
.ornament:before{top:2%;left:2%}.ornament:after{bottom:2%;right:2%}
.brand{font:700 clamp(12px,1.65vw,25px) Arial,sans-serif;letter-spacing:.15em;color:#f4d77e}
.brand span{color:#fff}.rule{width:72%;height:1px;background:linear-gradient(90deg,transparent,#d7b45a,transparent);margin:1.5% 0}
.reminder-title{font:700 clamp(20px,3vw,44px) Arial,sans-serif;letter-spacing:.13em;color:#fff0b9}
.reminder-countdown{font:700 clamp(12px,1.45vw,21px) Arial,sans-serif;letter-spacing:.2em;color:#e8c765;margin-top:1.1%}
.gold-line{width:22%;height:3px;background:#d7b45a;margin:1.7% 0;border-radius:2px}
.hadith-ref{font:700 clamp(16px,2vw,29px) Arial,sans-serif;color:#e8c765;margin:.8% 0}
.arabic{font-family:"Noto Naskh Arabic","Amiri","Traditional Arabic",serif;font-size:clamp(26px,4.25vw,64px);line-height:1.8;color:#fff5d8;margin:1% 0;max-width:100%}
.translation{font:600 clamp(16px,2.35vw,35px)/1.45 Arial,sans-serif;color:#fff4d2;max-width:95%;margin:1% auto}
.footer{font:700 clamp(9px,1.1vw,16px) Arial,sans-serif;letter-spacing:.18em;color:#d9b75d;margin-top:2%}
#crack{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;background:linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.95) 50%,rgba(205,174,102,.8) 50.12%,transparent 50.35%);clip-path:polygon(49.5% 0,50.7% 0,49.8% 18%,51.1% 32%,49.6% 49%,50.8% 66%,49.4% 82%,50.4% 100%,49.3% 100%,50.1% 82%,48.9% 66%,50.4% 49%,49% 32%,50.2% 18%)}
.stage.split::before,.stage.split::after{content:"";position:absolute;inset:0;background-image:var(--next-image);background-repeat:no-repeat;background-position:center;background-size:contain;z-index:4;pointer-events:none}
.stage.split::before{clip-path:inset(0 50% 0 0);animation:leftHalf .72s ease-in forwards}
.stage.split::after{clip-path:inset(0 0 0 50%);animation:rightHalf .72s ease-in forwards}
@keyframes leftHalf{to{transform:translateX(-105%);opacity:.15}}
@keyframes rightHalf{to{transform:translateX(105%);opacity:.15}}
@keyframes crackFlash{0%{opacity:0}25%{opacity:1}75%{opacity:.75}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.slide{transition:none}.stage.split::before,.stage.split::after{animation:none}}