/* =========================================================
   NOOR — شمسين
   ========================================================= */
:root{
  --ink:#030305;
  --gold:#e8c38a;
  --gold-2:#c9974f;
  --bronze:#9a6a3f;
  --white:#f7efe3;
  --vig:.6;
  --leak:.12;
  --ease-cine:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --f-ar:'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --f-ar-display:'Amiri', 'Times New Roman', serif;
  --f-lat:'Cormorant Garamond', 'Didot', 'Times New Roman', serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;height:100%;overflow:hidden;
  background:var(--ink);color:var(--white);
  font-family:var(--f-ar);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
body{position:fixed;inset:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;cursor:pointer}

#stage{position:fixed;inset:0;display:block;width:100%;height:100%}
.layer{position:fixed;inset:0;pointer-events:none}

/* ───── طبقات سينمائية ───── */
#vignette{
  background:radial-gradient(ellipse 75% 70% at 50% 50%,
    transparent calc(62% - var(--vig) * 30%),
    rgba(0,0,0,.55) calc(88% - var(--vig) * 18%),
    rgba(0,0,0,.92) 100%);
}
#grain{
  opacity:.5;background-size:160px 160px;
  animation:grain 1s steps(6) infinite;
  inset:-60px;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-22px,14px)}
  40%{transform:translate(18px,-26px)}60%{transform:translate(-12px,30px)}
  80%{transform:translate(28px,8px)}100%{transform:translate(0,0)}
}

#leaks{opacity:var(--leak);mix-blend-mode:screen;transition:opacity 1.2s var(--ease-cine)}
#leaks::before,#leaks::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);
}
#leaks::before{
  width:70vmax;height:46vmax;left:-24vmax;top:-12vmax;
  background:radial-gradient(closest-side,rgba(255,170,90,.55),rgba(160,80,40,.18) 55%,transparent);
  animation:leakA 19s ease-in-out infinite alternate;
}
#leaks::after{
  width:60vmax;height:40vmax;right:-22vmax;bottom:-14vmax;
  background:radial-gradient(closest-side,rgba(120,100,255,.28),rgba(255,190,120,.16) 50%,transparent);
  animation:leakB 23s ease-in-out infinite alternate;
}
@keyframes leakA{to{transform:translate(18vmax,10vmax) scale(1.15)}}
@keyframes leakB{to{transform:translate(-16vmax,-8vmax) scale(1.1)}}

#flash{
  opacity:0;
  background:radial-gradient(ellipse at center,#fffaf0 0%,#ffe6bd 38%,#e9b46a 78%,#a8692e 100%);
}
#black{opacity:0;background:#000}

#memory{opacity:0;transition:opacity 2.4s var(--ease-cine)}
#memory img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) sepia(.45) brightness(.55) contrast(1.05) blur(1.5px);
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 50%,#000 25%,transparent 75%);
          mask-image:radial-gradient(ellipse 55% 60% at 50% 50%,#000 25%,transparent 75%);
  transform:scale(1.08);animation:kenburns 26s linear infinite alternate;
}
#memory img:not([src]),#memory img[src=""]{display:none}
@keyframes kenburns{to{transform:scale(1.18) translate(-1.5%,1%)}}

/* ───── الكلمات ───── */
#lyrics{z-index:2}
.line{
  position:absolute;left:7vw;right:7vw;
  text-align:center;direction:rtl;
}
.line .txt{
  display:block;
  font-weight:300;
  font-size:clamp(25px,4.1vw,60px);
  line-height:1.75;
  color:#faf2e6;
  text-shadow:0 0 28px rgba(232,195,138,.28),0 0 2px rgba(255,240,220,.4);
  transition:opacity 1.5s var(--ease-cine),filter 1.6s var(--ease-cine),transform 1.9s var(--ease-soft);
}
.pos-center{top:50%;transform:translateY(-50%)}
.pos-low{bottom:15vh}
.pos-top{top:11vh}

.w{
  display:inline-block;opacity:0;
  filter:blur(14px);
  transform:translateY(.35em) scale(1.04);
  transition:opacity 1.2s var(--ease-cine),filter 1.4s var(--ease-cine),transform 1.6s var(--ease-soft);
}
.line.in .w{opacity:1;filter:blur(0);transform:none}
.w .b{display:inline-block}

.line.leave .txt{opacity:0;filter:blur(12px);transform:translateY(-.25em)}

.tone-quiet .txt{font-weight:200;font-size:clamp(21px,3.2vw,46px);color:#ece1d0;letter-spacing:.01em}
.tone-soft .txt{font-weight:300;color:#f6e9da}
.tone-soft.in .w .b{animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.12em) rotate(-.6deg)}}

.tone-climax .txt{font-size:clamp(28px,4.8vw,72px);font-weight:400;color:#fff6e8;
  text-shadow:0 0 30px rgba(255,200,120,.5),0 0 80px rgba(255,170,80,.3)}
.tone-burn .txt{color:#fff6e6;text-shadow:0 0 24px rgba(255,205,130,.55),0 0 70px rgba(255,165,70,.35)}
.line.melt .txt{animation:melt 1.3s cubic-bezier(.55,0,.7,.4) forwards}
@keyframes melt{
  0%{filter:blur(0) brightness(1)}
  45%{filter:blur(2px) brightness(1.8);text-shadow:0 0 40px #fff,0 0 120px rgba(255,190,100,.9)}
  100%{opacity:0;filter:blur(18px) brightness(2.4);transform:translateY(-.35em) scale(1.08);letter-spacing:.12em}
}
.ghost .txt{opacity:.35;font-family:var(--f-lat);letter-spacing:.3em;font-size:22px}

/* ───── الكلمة الضخمة (الذروة) ───── */
#bigword{display:grid;place-items:center;z-index:1}
#bigword span{
  font-family:var(--f-ar-display);font-weight:700;
  font-size:clamp(70px,22vw,360px);line-height:1;white-space:nowrap;
  background:linear-gradient(180deg,#fff7e6 0%,#f2cf92 45%,#b8793a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;filter:blur(24px);transform:scale(.9);
  transition:opacity 2s var(--ease-cine),filter 2.2s var(--ease-cine),transform 6s var(--ease-soft);
  text-shadow:none;
}
#bigword.on span{opacity:.92;filter:blur(0) drop-shadow(0 0 40px rgba(255,190,110,.55));transform:scale(1.04)}

/* ───── الاسم في منتصف التجربة ───── */
#midname{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2vh}
#midname .mn-name{
  font-family:var(--f-lat);font-weight:300;direction:ltr;
  font-size:clamp(64px,13vw,200px);letter-spacing:.55em;text-indent:.55em;
  color:#f3e2c4;opacity:0;filter:blur(20px);
  text-shadow:0 0 50px rgba(232,195,138,.35);
  transition:opacity 3s var(--ease-cine),filter 3s var(--ease-cine),letter-spacing 9s var(--ease-soft),text-indent 9s var(--ease-soft);
}
#midname .mn-sub{
  font-weight:200;font-size:clamp(15px,1.7vw,22px);color:var(--gold);opacity:0;
  letter-spacing:.04em;transition:opacity 2.5s var(--ease-cine) 1.4s;
}
#midname.on .mn-name{opacity:.95;filter:blur(0);letter-spacing:.32em;text-indent:.32em}
#midname.on .mn-sub{opacity:.75}

/* ───── تعليق صغير ───── */
#caption{display:flex;justify-content:center;align-items:flex-start;padding-top:7vh}
#caption span{
  font-family:var(--f-lat);font-size:13px;letter-spacing:.6em;text-indent:.6em;
  color:var(--gold);opacity:0;transition:opacity 2.4s var(--ease-cine);direction:ltr;
}
#caption.on span{opacity:.6}

/* ───── رسائل الختام ───── */
#finaleMsg{display:grid;place-items:center;z-index:3;padding:0 8vw}
.msg{
  grid-area:1/1;text-align:center;
  font-weight:300;font-size:clamp(24px,3.6vw,52px);line-height:1.7;color:#f7ecdc;
  opacity:0;filter:blur(14px);transform:translateY(.3em);
  transition:opacity 1.6s var(--ease-cine),filter 1.8s var(--ease-cine),transform 2.2s var(--ease-soft);
  text-shadow:0 0 30px rgba(232,195,138,.25);
}
.msg.first{font-family:var(--f-ar-display);font-size:clamp(46px,8vw,110px);color:#f4d9a8}
.msg.in{opacity:1;filter:blur(0);transform:none}
.msg.out{opacity:0;filter:blur(10px);transform:translateY(-.2em)}
.msg .lightdot{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  background:#fff6e3;box-shadow:0 0 18px 6px rgba(255,205,140,.8),0 0 70px 24px rgba(255,170,80,.35);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{50%{transform:scale(1.35);box-shadow:0 0 26px 10px rgba(255,205,140,.9),0 0 90px 34px rgba(255,170,80,.4)}}

/* ───── الشاشة الافتتاحية ───── */
#intro{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 6vw;
}
.intro-glow{
  position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,195,138,.14),rgba(150,100,60,.05) 55%,transparent);
  animation:breatheGlow 7s ease-in-out infinite;pointer-events:none;
}
@keyframes breatheGlow{50%{transform:translate(-50%,-50%) scale(1.12);opacity:.75}}

#intro .noor{
  margin:0;font-family:var(--f-lat);font-weight:300;direction:ltr;
  font-size:clamp(70px,17vw,230px);line-height:1;
  letter-spacing:.7em;text-indent:.7em;color:#f4e4c8;
  text-shadow:0 0 60px rgba(232,195,138,.35);
  opacity:0;filter:blur(24px);
}
#intro .to{margin:4.5vh 0 0;font-size:clamp(19px,2.3vw,28px);font-weight:300;color:var(--gold);opacity:0}
#intro .hint{margin:1.6vh 0 0;font-size:clamp(14px,1.4vw,17px);font-weight:200;color:#d9cdbb;opacity:0;letter-spacing:.02em}
#start{
  margin-top:6vh;position:relative;
  padding:15px 54px;border-radius:999px;
  background:rgba(232,195,138,.04);color:#f4dfb8;
  border:1px solid rgba(232,195,138,.42);
  font-size:19px;font-weight:300;letter-spacing:.08em;
  box-shadow:0 0 0 rgba(232,195,138,0);
  opacity:0;transform:translateY(8px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:box-shadow .9s var(--ease-cine),background .9s var(--ease-cine),border-color .9s var(--ease-cine);
}
#start:hover,#start:focus-visible{
  outline:none;background:rgba(232,195,138,.09);border-color:rgba(242,210,160,.75);
  box-shadow:0 0 40px rgba(232,195,138,.22),inset 0 0 20px rgba(232,195,138,.08);
}
#intro.play .noor{animation:noorIn 3.4s var(--ease-soft) .4s forwards}
#intro.play .to{animation:fadeUp 2s var(--ease-cine) 2.4s forwards}
#intro.play .hint{animation:fadeUp 2s var(--ease-cine) 4.4s forwards}
#intro.play #start{animation:fadeUp 1.8s var(--ease-cine) 5.6s forwards}
@keyframes noorIn{to{opacity:1;filter:blur(0);letter-spacing:.32em;text-indent:.32em}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.burst{
  position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:radial-gradient(circle,#fffaf0 0%,#ffdca0 40%,rgba(230,160,80,0) 70%);
  opacity:0;pointer-events:none;
}
#intro.leaving{pointer-events:none}
#intro.leaving > :not(.burst){transition:opacity 1.1s var(--ease-cine),filter 1.2s var(--ease-cine);opacity:0 !important;filter:blur(10px)}
#intro.leaving .burst{animation:burst 2.2s cubic-bezier(.7,0,.2,1) forwards}
@keyframes burst{
  0%{opacity:0;transform:scale(1)}
  15%{opacity:1;transform:scale(3)}
  70%{opacity:.9;transform:scale(300)}
  100%{opacity:0;transform:scale(340)}
}
#intro.gone{display:none}

/* ───── شاشة النهاية ───── */
#endscreen{
  position:fixed;inset:0;z-index:20;display:none;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 7vw;
}
#endscreen.show{display:flex}
#endscreen > *{opacity:0;transform:translateY(8px);filter:blur(8px);
  transition:opacity 2s var(--ease-cine),transform 2.4s var(--ease-soft),filter 2s var(--ease-cine)}
#endscreen.reveal > *{opacity:1;transform:none;filter:blur(0)}
.end-light{
  width:12px;height:12px;border-radius:50%;margin-bottom:6vh;
  background:#fff4de;box-shadow:0 0 20px 8px rgba(255,205,140,.7),0 0 90px 30px rgba(255,170,80,.25);
  animation:pulse 3.2s ease-in-out infinite;
}
#endscreen p{margin:0}
.e1{font-family:var(--f-ar-display);font-size:clamp(34px,5.4vw,76px);color:#f4dcae;line-height:1.5}
.e2{margin:2.4vh 0 !important;color:var(--gold-2);font-size:20px}
.e3{font-weight:300;font-size:clamp(18px,2.2vw,28px);color:#e9dfcf;line-height:1.8}
#replay{
  margin-top:8vh;padding:12px 38px;border-radius:999px;background:transparent;color:var(--gold);
  border:1px solid rgba(232,195,138,.32);font-size:15px;font-weight:300;letter-spacing:.06em;
  pointer-events:auto;transition:border-color .8s,box-shadow .8s,opacity 2s var(--ease-cine),transform 2.4s var(--ease-soft),filter 2s;
}
#replay:hover,#replay:focus-visible{outline:none;border-color:rgba(242,210,160,.7);box-shadow:0 0 30px rgba(232,195,138,.18)}
#endscreen.reveal .end-light{transition-delay:.2s}
#endscreen.reveal .e1{transition-delay:2s}
#endscreen.reveal .e2{transition-delay:4.6s}
#endscreen.reveal .e3{transition-delay:6s}
#endscreen.reveal #replay{transition-delay:9.5s,9.5s,9.5s,9.5s,9.5s,9.5s}

/* ───── التحكم ───── */
#mute{
  position:fixed;z-index:30;top:max(18px,env(safe-area-inset-top));left:18px;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(10,8,8,.25);color:var(--gold);
  border:1px solid rgba(232,195,138,.22);
  font-size:15px;line-height:1;opacity:0;pointer-events:none;
  transition:opacity 1.6s var(--ease-cine),border-color .6s,color .6s;
}
#mute.on{opacity:.75;pointer-events:auto}
#mute:hover{opacity:1;border-color:rgba(232,195,138,.5)}
#mute.muted{color:rgba(232,195,138,.35);text-decoration:line-through}

#progress{
  position:fixed;z-index:30;left:50%;bottom:max(22px,env(safe-area-inset-bottom));
  width:132px;height:10px;margin-left:-66px;opacity:0;transition:opacity 2s var(--ease-cine);
  direction:ltr;pointer-events:none;
}
#progress.on{opacity:.8}
#progress .track{position:absolute;left:0;right:0;top:4.5px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,195,138,.28),transparent)}
#progress .dot{
  position:absolute;top:2.5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:#ffe7bf;box-shadow:0 0 8px 2px rgba(255,195,120,.55);
}
#progress .dot.a{left:0}
#progress .dot.b{left:100%}

#toast{
  position:fixed;z-index:40;left:50%;bottom:58px;transform:translateX(-50%);
  max-width:min(92vw,520px);padding:10px 18px;border-radius:12px;
  background:rgba(20,16,12,.7);border:1px solid rgba(232,195,138,.2);
  color:#e9dcc6;font-size:13px;font-weight:300;text-align:center;line-height:1.7;
  opacity:0;transition:opacity .8s;pointer-events:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
#toast.on{opacity:1}

/* ───── أداة ضبط التوقيت ───── */
#sync{
  position:fixed;z-index:50;right:14px;bottom:14px;width:min(330px,calc(100vw - 28px));
  padding:14px;border-radius:14px;background:rgba(12,10,9,.88);
  border:1px solid rgba(232,195,138,.25);font-size:13px;color:#eadfcd;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);user-select:text;
}
#sync[hidden]{display:none}
#sync .s-head{color:var(--gold);font-weight:400;margin-bottom:6px}
#sync .s-time{font-family:ui-monospace,Menlo,monospace;font-size:26px;direction:ltr;text-align:left;color:#fff}
#sync .s-next{margin:6px 0;min-height:1.6em;color:#f4dfb8}
#sync .s-help{font-size:11.5px;opacity:.6;line-height:1.7;margin-bottom:8px}
#sync .s-row{display:flex;gap:6px;flex-wrap:wrap}
#sync button{
  flex:1;padding:8px 6px;border-radius:8px;border:1px solid rgba(232,195,138,.3);
  background:rgba(232,195,138,.08);color:#f4dfb8;font-size:12.5px;
}
#sync textarea{
  width:100%;height:84px;margin-top:8px;border-radius:8px;resize:vertical;
  background:#0a0807;color:#cdbfa8;border:1px solid rgba(232,195,138,.18);
  font-family:ui-monospace,Menlo,monospace;font-size:10.5px;direction:ltr;padding:6px;
}

/* ───── الهاتف ───── */
@media (max-width:760px){
  .line{left:5vw;right:5vw}
  .pos-low{bottom:17vh}
  .pos-top{top:10vh}
  .line .txt{line-height:1.7}
  #grain{opacity:.38}
  #start{padding:14px 46px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  #grain,#leaks::before,#leaks::after,#memory img{animation:none}
}