/* =====================================================================
   Luna's Night — Birthday Micro-Site
   پالت بر پایه Slate Teal 2058-20 (#18546A)
   بهینه‌شده برای Safari/iOS
   قرار دهید در: assets/css/style.css
   ===================================================================== */

:root{
  --teal-000: #071318;
  --teal-050: #0d1f26;
  --teal-100: #15323c;
  --teal-200: #18546a;
  --teal-300: #2c5b6d;
  --teal-400: #3a7388;
  --teal-500: #5394ac;
  --teal-600: #7fb2c4;
  --teal-700: #a2c2cd;
  --teal-900: #cfdde2;
  --white-soft: #f5f9fb;

  --font-fa: 'Vazirmatn', sans-serif;
  --font-fancy: 'Great Vibes', cursive;
  --font-en: 'Quicksand', sans-serif;

  --box-w: clamp(230px, 68vw, 300px);
  --box-h: calc(var(--box-w) * 0.78);
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body{
  width:100%; height:100%;
  overflow-x:hidden;
  background:var(--teal-000);
  color:var(--teal-900);
  font-family:var(--font-fa);
  -webkit-font-smoothing:antialiased;
}
body{ min-height:100vh; min-height:-webkit-fill-available; min-height:100dvh; }
html{ height:-webkit-fill-available; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; }

/* =====================================================================
   ذرات نور محیطی سراسری
   ===================================================================== */
.ambient-dust{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.dust{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, var(--teal-900) 0%, transparent 70%);
  opacity:.35; animation:dustFloat linear infinite; filter:blur(0.5px);
}
@keyframes dustFloat{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.5; } 90%{ opacity:.4; }
  100%{ transform:translateY(-110vh) translateX(var(--dx,20px)); opacity:0; }
}

/* =====================================================================
   ساختار کلی مراحل
   ===================================================================== */
.app{ position:relative; z-index:2; width:100%; }
.stage{ width:100%; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.stage[hidden]{ display:none; }
.stage-inner{ width:100%; height:100%; }

#stage-1{
  background:
    radial-gradient(circle at 18% 22%, rgba(207,221,226,.05) 0%, transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(83,148,172,.10) 0%, transparent 50%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.015) 0px, transparent 2px, transparent 4px),
    radial-gradient(ellipse at 50% 30%, var(--teal-100) 0%, var(--teal-050) 55%, var(--teal-000) 100%);
  background-blend-mode: screen, screen, overlay, normal;
  transition: opacity 1s ease .3s;
}
#stage-1.is-leaving{ opacity:0; }

#stage-2{
  background:
    radial-gradient(circle at 30% 20%, rgba(207,221,226,.06) 0%, transparent 40%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 50% 60%, var(--teal-300) 0%, var(--teal-050) 60%, var(--teal-000) 100%);
  background-blend-mode: screen, overlay, normal;
}

/* =====================================================================
   Camera Rig
   ===================================================================== */
.camera-rig{
  width:100%; height:100%; position:relative;
  -webkit-perspective:1300px; perspective:1300px;
  -webkit-perspective-origin:50% 62%; perspective-origin:50% 62%;
  transition: -webkit-perspective-origin 1.7s cubic-bezier(.5,0,.3,1), perspective-origin 1.7s cubic-bezier(.5,0,.3,1);
}
.camera-rig.is-diving{ -webkit-perspective-origin:50% 12%; perspective-origin:50% 12%; }

.scene{
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(20px, 4vh, 36px);
  padding:24px 16px;
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  -webkit-transform: translateZ(0) rotateX(0deg); transform: translateZ(0) rotateX(0deg);
  transition: -webkit-transform 1.7s cubic-bezier(.5,0,.25,1), transform 1.7s cubic-bezier(.5,0,.25,1);
}
.scene.is-diving{ -webkit-transform: translateZ(80px) rotateX(-20deg); transform: translateZ(80px) rotateX(-20deg); }

.scene__glow{
  position:absolute; top:40%; left:50%;
  width:min(78vw, 520px); height:min(78vw, 520px);
  -webkit-transform:translate(-50%,-50%) translateZ(0) scale(1);
  transform:translate(-50%,-50%) translateZ(0) scale(1);
  background:radial-gradient(circle, rgba(83,148,172,.28) 0%, rgba(24,84,106,.12) 45%, transparent 72%);
  filter:blur(4px); animation:glowPulse 5s ease-in-out infinite;
  pointer-events:none;
  transition: -webkit-transform 1.7s ease, transform 1.7s ease, opacity 1.7s ease;
}
.scene__glow.is-diving{
  -webkit-transform:translate(-50%,-50%) translateZ(-500px) scale(.5);
  transform:translate(-50%,-50%) translateZ(-500px) scale(.5);
  opacity:.2;
}
@keyframes glowPulse{
  0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); }
}

/* =====================================================================
   نور و ماه
   ===================================================================== */
.light-layer{
  position:absolute; top:34%; left:50%;
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(233,240,244,.65) 40%, transparent 75%);
  filter:blur(5px);
  -webkit-transform:translate(-50%,-50%) scale(0); transform:translate(-50%,-50%) scale(0);
  opacity:0;
  z-index:14; pointer-events:none;
  transition: -webkit-transform 1.1s cubic-bezier(.2,1,.3,1) .1s, transform 1.1s cubic-bezier(.2,1,.3,1) .1s, opacity .5s ease .1s;
}
.light-layer.is-opening{ -webkit-transform:translate(-50%,-50%) scale(15); transform:translate(-50%,-50%) scale(15); opacity:1; }
.light-layer.is-diving{
  -webkit-transform:translate(-50%,-50%) scale(150); transform:translate(-50%,-50%) scale(150);
  opacity:1;
  transition: -webkit-transform 1.7s cubic-bezier(.3,0,.15,1), transform 1.7s cubic-bezier(.3,0,.15,1), opacity 1.7s ease;
}

.moon-layer{
  position:absolute; top:32%; left:50%;
  width:1px; height:1px;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(34px, 9vw, 50px);
  line-height:1;
  -webkit-transform:translate(-50%,-50%) scale(0);
  transform:translate(-50%,-50%) scale(0);
  filter:drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 22px rgba(207,221,226,.8));
  opacity:0;
  z-index:15; pointer-events:none;
  transition: -webkit-transform 1s cubic-bezier(.3,0,.15,1) .25s, transform 1s cubic-bezier(.3,0,.15,1) .25s, opacity .6s ease .25s;
}
.moon-layer.is-opening{ -webkit-transform:translate(-50%,-50%) scale(1); transform:translate(-50%,-50%) scale(1); opacity:1; }
.moon-layer.is-diving{
  -webkit-transform:translate(-50%,-50%) scale(1.5); transform:translate(-50%,-50%) scale(1.5);
  opacity:0;
  transition: -webkit-transform 1s ease, transform 1s ease, opacity .8s ease .2s;
}

/* =====================================================================
   دست — لایهٔ کاملاً دوبعدی و مستقل، بیرون از فضای سه‌بعدی جعبه
   (تا هرگز پشت وجه‌های جعبه گم نشود؛ همان باگی که ماه قبلاً داشت)
   ===================================================================== */
.cube-stand{
  position:relative;
  /* عمداً preserve-3d نیست: فقط خودِ .cube باید فضای سه‌بعدی مستقل داشته باشد */
}

.hand-layer{
  position:absolute;
  width: calc(var(--box-w) * 0.8);
  height:auto;
  top: calc(var(--box-w) * -0.46);
  right: calc(var(--box-w) * -0.3);
  -webkit-transform-origin: 78% 12%; transform-origin: 78% 12%;
  -webkit-transform: rotate(-10deg) translateY(0) translateZ(0);
  transform: rotate(-10deg) translateY(0) translateZ(0);
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.5));
  z-index:50;
  pointer-events:none;
  animation: handHover 3.2s ease-in-out infinite;
  transition: -webkit-transform .42s cubic-bezier(.34,1.1,.4,1), transform .42s cubic-bezier(.34,1.1,.4,1), opacity .6s ease;
  will-change: transform;
}
@keyframes handHover{
  0%,100%{ transform: rotate(-10deg) translateY(0); }
  50%{ transform: rotate(-12deg) translateY(6px); }
}
.hand-layer.is-tapping{
  animation:none;
  -webkit-transform: rotate(3deg) translateY(calc(var(--box-w) * 0.36)) translateX(calc(var(--box-w) * -0.05)) scale(1.03);
  transform: rotate(3deg) translateY(calc(var(--box-w) * 0.36)) translateX(calc(var(--box-w) * -0.05)) scale(1.03);
  transition: -webkit-transform .4s cubic-bezier(.32,1.35,.4,1), transform .4s cubic-bezier(.32,1.35,.4,1);
}
.hand-layer.is-retreating{
  -webkit-transform: rotate(-26deg) translateY(calc(var(--box-w) * -0.55)) translateX(calc(var(--box-w) * 0.22));
  transform: rotate(-26deg) translateY(calc(var(--box-w) * -0.55)) translateX(calc(var(--box-w) * 0.22));
  opacity:0;
  transition: -webkit-transform .85s cubic-bezier(.4,0,.2,1), transform .85s cubic-bezier(.4,0,.2,1), opacity .8s ease .1s;
}

/* ---------------- جعبه ---------------- */
.cube{
  position:relative;
  width:var(--box-w);
  height:var(--box-h);
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  -webkit-transform: rotateX(-16deg) rotateY(-32deg) scale(1);
  transform: rotateX(-16deg) rotateY(-32deg) scale(1);
  animation: cubeIdle 4.8s ease-in-out infinite;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  transition: -webkit-transform 1.7s cubic-bezier(.5,0,.2,1), transform 1.7s cubic-bezier(.5,0,.2,1);
}
@keyframes cubeIdle{
  0%,100%{ transform: rotateX(-16deg) rotateY(-32deg) translateY(0) scale(1); }
  25%{     transform: rotateX(-14deg) rotateY(-27deg) translateY(-6px) scale(1); }
  50%{     transform: rotateX(-17deg) rotateY(-36deg) translateY(-11px) scale(1); }
  75%{     transform: rotateX(-14deg) rotateY(-28deg) translateY(-5px) scale(1); }
}
.cube.is-opening{ animation:none; -webkit-transform: rotateX(-4deg) rotateY(-20deg) scale(1.08); transform: rotateX(-4deg) rotateY(-20deg) scale(1.08); }
.cube.is-diving{ -webkit-transform: rotateX(-72deg) rotateY(-6deg) scale(6.2); transform: rotateX(-72deg) rotateY(-6deg) scale(6.2); }

/* ---- سطح مشترک بافت گرانیت + مخمل ---- */
.cube__face, .lid__top{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.12) 0%, transparent 38%),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.06) 0%, transparent 30%),
    radial-gradient(circle at 55% 85%, rgba(0,0,0,.28) 0%, transparent 48%),
    repeating-radial-gradient(circle at 35% 65%, rgba(255,255,255,.05) 0px, transparent 1.5px, transparent 4px),
    linear-gradient(155deg, var(--teal-300) 0%, var(--teal-200) 45%, var(--teal-100) 100%);
  box-shadow: inset 0 0 24px rgba(0,0,0,.5), inset 0 0 50px rgba(83,148,172,.10);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border:1px solid rgba(7,19,24,.55);
}

.cube__face--front{
  -webkit-transform: translateZ(calc(var(--box-w) / 2)); transform: translateZ(calc(var(--box-w) / 2));
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.cube__face--back {
  -webkit-transform: translateZ(calc(var(--box-w) / -2)) rotateY(180deg);
  transform: translateZ(calc(var(--box-w) / -2)) rotateY(180deg);
  filter:brightness(.7);
}
.cube__face--left  {
  -webkit-transform: rotateY(-90deg) translateZ(calc(var(--box-w) / 2));
  transform: rotateY(-90deg) translateZ(calc(var(--box-w) / 2));
  filter:brightness(.55);
}
.cube__face--right {
  -webkit-transform: rotateY(90deg)  translateZ(calc(var(--box-w) / 2));
  transform: rotateY(90deg)  translateZ(calc(var(--box-w) / 2));
  filter:brightness(.62);
}
.cube__face--bottom{
  width:var(--box-w); height:var(--box-w);
  top:50%; left:50%;
  margin: calc(var(--box-w) / -2) 0 0 calc(var(--box-w) / -2);
  inset:auto;
  -webkit-transform: rotateX(-90deg) translateZ(calc(var(--box-h) / 2));
  transform: rotateX(-90deg) translateZ(calc(var(--box-h) / 2));
  filter:brightness(.4);
}

.cube__engrave{
  position:absolute; inset:10% 20%;
  border:1px solid rgba(207,221,226,.22);
  border-radius:4px;
  box-shadow:0 0 18px rgba(207,221,226,.08) inset;
}
.cube__heading{
  position:relative; z-index:3; text-align:center; color:var(--teal-900);
  font-family:var(--font-fancy);
  font-size:clamp(22px, 6.4vw, 30px);
  line-height:1.35;
  text-shadow:0 0 12px rgba(207,221,226,.55), 0 0 26px rgba(83,148,172,.55), 0 2px 3px rgba(0,0,0,.4);
  letter-spacing:.5px;
  padding:0 14%;
}
.cube__spark{
  display:inline-block; color:var(--white-soft);
  animation: sparkTwinkle 2.2s ease-in-out infinite;
  filter:drop-shadow(0 0 6px #ffffff);
}
@keyframes sparkTwinkle{
  0%,100%{ opacity:.55; transform:scale(.9) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.15) rotate(12deg); }
}

/* =====================================================================
   روبان سفید — کنار جعبه، دو نوار باریک که با باز شدن از هم پاره می‌شوند
   ===================================================================== */
.side-ribbon{
  position:absolute; top:0; bottom:0; width:9%;
  background:linear-gradient(180deg, #ffffff 0%, #eef3f5 45%, #ffffff 100%);
  box-shadow:0 0 8px rgba(255,255,255,.45), inset 0 0 5px rgba(255,255,255,.6);
  z-index:1;
  transition: -webkit-transform .5s ease, transform .5s ease, opacity .5s ease;
}
.side-ribbon--left{ left:6%; }
.side-ribbon--right{ right:6%; }

.cube__face--front .side-ribbon{
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.lid-ribbon{
  clip-path: polygon(0 10%, 50% 0, 100% 10%, 100% 100%, 0 100%);
}

.cube.is-opening .cube__face--front .side-ribbon--left{
  -webkit-transform: translateX(-4px) rotate(-3deg);
  transform: translateX(-4px) rotate(-3deg);
  opacity:.85;
}
.cube.is-opening .cube__face--front .side-ribbon--right{
  -webkit-transform: translateX(4px) rotate(3deg);
  transform: translateX(4px) rotate(3deg);
  opacity:.85;
}

.lid__top{
  filter:brightness(1.12) saturate(1.05);
  box-shadow: inset 0 0 22px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.4);
}

.lid-hinge{
  position:absolute; top:0; left:0; width:100%; height:0;
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  -webkit-transform: translateZ(calc(var(--box-w) / -2)); transform: translateZ(calc(var(--box-w) / -2));
  z-index:6;
}
.lid{
  position:absolute; top:0; left:0; width:100%;
  height:var(--box-w);
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d;
  -webkit-transform-origin: top center; transform-origin: top center;
  -webkit-transform: rotateX(90deg); transform: rotateX(90deg);
  transition: -webkit-transform 1.05s cubic-bezier(.6,-0.35,.2,1.28), transform 1.05s cubic-bezier(.6,-0.35,.2,1.28);
}
.cube.is-opening .lid,
.cube.is-diving .lid{ -webkit-transform: rotateX(208deg); transform: rotateX(208deg); }

.cube__sparkle-layer{ position:absolute; inset:-40%; z-index:8; pointer-events:none; }
.spark-particle{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:#ffffff;
  box-shadow:0 0 9px 3px rgba(255,255,255,.95);
  opacity:0; animation: sparkBurst .95s ease-out forwards;
}
@keyframes sparkBurst{
  0%{ opacity:0; transform:translate(0,0) scale(.3); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--tx), var(--ty)) scale(1.2); }
}

/* ---- سایه زیر جعبه ---- */
.cube-shadow{
  width:calc(var(--box-w) * 1.15);
  height:calc(var(--box-w) * .28);
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.55) 0%, transparent 75%);
  filter:blur(3px);
  margin-top:-10px;
  animation: shadowPulse 4.8s ease-in-out infinite;
  transition: opacity .8s ease;
}
@keyframes shadowPulse{
  0%,100%{ opacity:.6; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.9); }
}
.is-diving .cube-shadow{ opacity:0; }

.hint-btn{ position:relative; z-index:3; padding:8px 12px; animation: hintPulse 2.4s ease-in-out infinite; transition:opacity .4s ease; }
.hint-text{
  font-family:var(--font-en); font-weight:500; font-size:clamp(13px, 3.6vw, 15px);
  color:var(--teal-700); letter-spacing:.5px;
  border-bottom:1px dashed rgba(162,194,205,.5); padding-bottom:2px;
}
@keyframes hintPulse{
  0%,100%{ opacity:.55; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-3px); }
}
.hint-btn.is-hidden{ opacity:0; pointer-events:none; }

/* =====================================================================
   مرحله ۲ — پیش‌نمایش
   ===================================================================== */
.stage2-content{ text-align:center; padding:0 20px; animation: fadeInUp 1s ease both; }
.stage2-title{
  font-family:var(--font-fancy); font-size:clamp(30px, 8vw, 46px);
  color:var(--teal-900); text-shadow:0 0 20px rgba(207,221,226,.4); margin-bottom:12px;
}
.stage2-sub{ font-family:var(--font-fa); color:var(--teal-700); font-size:clamp(14px, 4vw, 16px); }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

/* =====================================================================
   ریسپانسیو دسکتاپ
   ===================================================================== */
@media (min-width:760px){
  :root{ --box-w: 340px; }
  .cube__heading{ font-size:28px; }
  .scene__glow{ width:560px; height:560px; }
}
@media (min-width:1200px){
  :root{ --box-w: 380px; }
}

@media (prefers-reduced-motion: reduce){
  .cube, .cube__spark, .scene__glow, .dust, .hint-btn, .cube-shadow, .hand-layer{ animation:none !important; }
  .scene, .lid, .cube, .moon-layer, .light-layer, .camera-rig, .hand-layer{ transition-duration:.4s !important; }
}