/* Layout idea: a black screen that opens into a night hall of eight-point stars;
   the photos hang in mehrab arches under a double gold line. */
:root{
  --ink:#09080e;
  --ink-2:#120f1a;
  --plum:#3b1c46;
  --wine:#4a1830;
  --gold:#e8b863;
  --gold-hi:#f7dea0;
  --rose:#d9486d;
  --cream:#f3e8d4;
  --mute:#b8ab9a;
  --display:"Aref Ruqaa","Noto Naskh Arabic","Scheherazade New","Geeza Pro",Tahoma,serif;
  --body:"Vazirmatn","Noto Sans Arabic","Segoe UI",Tahoma,"Geeza Pro",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--ink);color:var(--cream);font-family:var(--body);
  overflow:hidden;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
h1,h2,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ---------- لایه‌ها ---------- */
#bg{
  position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 2.6s ease;
  background:
    radial-gradient(110% 70% at 50% -5%,var(--plum) 0%,transparent 62%),
    radial-gradient(90% 60% at 50% 108%,var(--wine) 0%,transparent 62%),
    var(--ink-2);
}
body.on #bg{opacity:1}
#stars{
  position:absolute;inset:0;width:100%;height:100%;opacity:.17;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 10%,transparent 100%);
  mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 10%,transparent 100%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{50%{opacity:.09}}

#backdrop{
  position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 1.2s ease;background:var(--ink);
}
body[data-scene="gallery"] #backdrop{opacity:1}
#backdrop i{
  position:absolute;inset:-12%;background-size:cover;background-position:center;
  filter:blur(38px) brightness(.38) saturate(1.25);opacity:0;transition:opacity 1.4s ease;
}
#backdrop i.on{opacity:1}
#backdrop::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgba(9,8,14,.65) 100%);
}

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}

.scene{
  position:fixed;inset:0;z-index:3;display:grid;place-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s;
}
.scene.is-active{opacity:1;visibility:visible;transition-delay:0s}

/* ---------- ۱. قفل ---------- */
#lock{z-index:20;background:var(--ink)}
#pin{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;
  font-size:16px;background:transparent;color:transparent;caret-color:transparent;outline:none;
}
.dots{display:flex;gap:20px;direction:ltr;pointer-events:none}
.dots i{
  width:9px;height:9px;border-radius:50%;border:1px solid rgba(232,184,99,.45);
  transition:background .25s,box-shadow .25s,border-color .25s;
  animation:breath 4s ease-in-out infinite;
}
.dots i:nth-child(2){animation-delay:.5s}
.dots i:nth-child(3){animation-delay:1s}
.dots i:nth-child(4){animation-delay:1.5s}
.dots.has i{animation:none}
.dots i.f{background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px rgba(232,184,99,.75)}
.dots.bad{animation:shake .5s}
.dots.bad i.f{background:var(--rose);border-color:var(--rose);box-shadow:0 0 14px rgba(217,72,109,.7)}
@keyframes breath{0%,100%{opacity:.3}50%{opacity:.85}}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

#ring{
  position:fixed;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;
  border-radius:50%;pointer-events:none;z-index:25;opacity:0;transform:scale(0);will-change:transform,opacity;
  background:radial-gradient(circle closest-side,transparent 0 93%,rgba(247,222,160,.5) 97%,transparent 100%);
}
#ring.go{animation:ring 2.2s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes ring{0%{transform:scale(0);opacity:1}70%{opacity:.9}100%{transform:scale(1);opacity:0}}

/* ---------- ظاهر شدن نوشته‌ها ---------- */
.rise{opacity:0}
.is-active .rise{animation:rise 1.3s var(--ease) var(--d,0s) both}
@keyframes rise{
  from{opacity:0;transform:translateY(16px);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.sheen{
  display:inline-block;padding-block:.1em;
  background-image:linear-gradient(100deg,#9c6a28 0%,#f7dea0 32%,#e8b863 50%,#fff2cc 66%,#a8742c 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 8px 36px rgba(232,184,99,.28));
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.orn{width:min(220px,52vw);height:24px;color:var(--gold);opacity:.85}

/* ---------- ۲. رونمایی ---------- */
.hello,.fin{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(.3rem,1.6dvh,.9rem)}
.h-small{font-family:var(--display);font-size:clamp(1.5rem,6.2vw,2.3rem);color:var(--gold-hi)}
.h-name{font-family:var(--display);font-weight:700;font-size:clamp(6.5rem,36vw,14rem);line-height:1.2}
.h-wish{font-weight:500;font-size:clamp(1.25rem,5.2vw,1.9rem);color:var(--cream)}
.go{
  margin-top:clamp(1.2rem,4dvh,2.4rem);display:inline-flex;align-items:center;gap:.7rem;
  padding:.8rem 1.7rem;border:1px solid rgba(232,184,99,.6);border-radius:999px;
  color:var(--gold-hi);background:rgba(232,184,99,.07);font-weight:500;font-size:1.05rem;
  transition:background .25s,border-color .25s;
}
.go:hover{background:rgba(232,184,99,.16);border-color:var(--gold)}
.go svg{width:18px;height:18px}

/* ---------- ۳. گالری ---------- */
#gallery{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.g-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(.7rem,2.2dvh,1.3rem);width:100%;max-width:520px}
.bars{display:flex;gap:6px;width:min(86vw,440px)}
.bars span{flex:1;height:2px;border-radius:2px;overflow:hidden;background:rgba(243,232,212,.18)}
.bars i{display:block;height:100%;width:0;background:var(--gold)}
.bars .done i{width:100%}
.bars .cur i{animation:fill var(--ms,7500ms) linear forwards}
@keyframes fill{to{width:100%}}

.frame{--w:min(78vw,calc(50vh * .75),400px);position:relative;width:var(--w);aspect-ratio:3/4;margin-block:12px}
@supports (height:1dvh){.frame{--w:min(78vw,calc(50dvh * .75),400px)}}
.frame::before{
  content:"";position:absolute;inset:-11px;pointer-events:none;
  border:1px solid rgba(232,184,99,.55);
  border-radius:calc(var(--w) / 2 + 11px) calc(var(--w) / 2 + 11px) 26px 26px;
}
.slides{
  position:absolute;inset:0;overflow:hidden;background:#000;
  border-radius:calc(var(--w) / 2) calc(var(--w) / 2) 14px 14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(232,184,99,.25);
}
.slide{position:absolute;inset:0}
.slide img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform-origin:var(--o,50% 38%);animation:kb 9.5s ease-out both;
}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.1)}}

.cap{
  min-height:6em;max-width:21em;text-align:center;font-size:clamp(1.02rem,4.1vw,1.28rem);
  line-height:1.95;color:var(--cream);text-wrap:balance;opacity:0;
}
.cap.in{animation:rise 1.1s var(--ease) .45s both}

.nav{display:flex;justify-content:space-between;width:min(86vw,440px)}
.nav button{
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(232,184,99,.45);color:var(--gold-hi);
  background:rgba(9,8,14,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s,transform .2s;
}
.nav button:hover{background:rgba(232,184,99,.16)}
.nav button:active{transform:scale(.94)}
.nav svg{width:20px;height:20px}

/* ---------- ۴. پیام آخر ---------- */
.f-a{font-weight:500;font-size:clamp(1.2rem,5vw,1.7rem);color:var(--cream)}
.f-b{font-family:var(--display);font-weight:700;font-size:clamp(2.8rem,14.5vw,6.4rem);line-height:1.35;white-space:nowrap}
.f-c{font-size:clamp(1.05rem,4.4vw,1.45rem);color:var(--mute)}
.f-d{font-family:var(--display);font-size:clamp(1.8rem,7vw,2.6rem);color:var(--gold-hi)}
.ghost{
  margin-top:1.2rem;padding:.55rem .9rem;color:var(--mute);font-size:.95rem;
  border-bottom:1px solid rgba(184,171,154,.35);transition:color .25s,border-color .25s;
}
.ghost:hover{color:var(--cream);border-color:var(--cream)}

/* ---------- دکمه‌ی صدا ---------- */
.sound{
  position:fixed;z-index:30;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(232,184,99,.4);color:var(--gold-hi);
  background:rgba(9,8,14,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;animation:fadein 1.5s 1s forwards;transition:background .25s;
}
.sound:hover{background:rgba(232,184,99,.16)}
.sound .slash{opacity:0}
.sound.muted .slash{opacity:1}
.sound.muted .w1,.sound.muted .w2{opacity:.25}
@keyframes fadein{to{opacity:1}}

/* ---------- حرکت کمتر ---------- */
@media (prefers-reduced-motion:reduce){
  .rise,.cap.in{animation-duration:.01ms!important;animation-delay:0s!important}
  .sheen,#stars,.dots i,.slide img,#ring.go{animation:none!important}
  #ring{display:none}
}