@font-face{font-family:Vz;src:url(../../fonts/Vazirmatn-Regular.woff2)format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vz;src:url(../../fonts/Vazirmatn-Medium.woff2)format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vz;src:url(../../fonts/Vazirmatn-SemiBold.woff2)format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Vz;src:url(../../fonts/Vazirmatn-Bold.woff2)format('woff2');font-weight:700;font-display:swap}

:root{--ink:#1C1A18;--gold:#AF7D42;--gold2:#C8A163;--paper:#F1EFEB;
  --ease:cubic-bezier(.22,.8,.3,1)}
*{box-sizing:border-box}
html{background:#0E0C0B;-webkit-text-size-adjust:100%}
/* صفحه **اسکرول نمی‌شود**. نسخهٔ اول با یک ریلِ بلند و `scrollY` کار می‌کرد و
   مومنتومِ فلیکِ موبایل فیلم را پرتاب می‌کرد؛ حالا خودِ حرکتِ انگشت پیشرفت را
   می‌سازد و صفحه ثابت می‌ماند — همان کاری که ویدئوی ورودِ بیس می‌کند. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{margin:0;background:#0E0C0B;color:#fff;font-family:Vz,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;touch-action:none}

/* صحنه: چسبیده به بالای صفحه، تمام‌صفحه. بوم اندازهٔ **فریم** را می‌گیرد و
   `object-fit:cover` پوشاندن را به لایهٔ ترکیب می‌سپارد — نه به CPU. */
.film3d{position:fixed;inset:0;z-index:1;overflow:hidden;background:#0E0C0B}
.film3d canvas{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.film3d.on canvas{opacity:1}

/* نوارِ پیشرفت */
.bar{position:fixed;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.14);z-index:6}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));
  transform:scaleX(0);transform-origin:left;will-change:transform}

/* «به پایین اسکرول کنید» */
.hint{position:fixed;z-index:5;left:50%;bottom:clamp(22px,4vh,46px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hint svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(6px);opacity:1}}
.film3d.moved .hint{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}

/* پیامِ شکست — اگر فریم‌ها نیامدند، صفحه سیاهِ بی‌توضیح نماند. */
.film3d .failmsg{display:none}
.film3d.failed .failmsg{position:absolute;inset:0;display:grid;place-items:center;
  padding:28px;text-align:center;font-size:13.5px;line-height:2;color:#D9D4CC}

/* لایهٔ متن — **پایینِ** صفحه. بالا روی خودِ خیمه می‌افتد و خوانده نمی‌شود؛
   پایین آسمان و زمینِ خالیِ قاب است. هر بلوک به بازهٔ ثانیهٔ فیلم بسته است و
   روی هم می‌نشینند تا جابه‌جایی‌شان نرم باشد، نه پرشی. */
.cap{position:fixed;left:0;right:0;bottom:0;z-index:4;pointer-events:none;
  display:grid;align-items:end;justify-items:center;
  padding:0 clamp(18px,5vw,46px) clamp(84px,14vh,150px);
  background:linear-gradient(to top,rgba(14,12,11,.72) 12%,rgba(14,12,11,.42) 48%,rgba(14,12,11,0));
  min-height:clamp(220px,34vh,360px);opacity:0;transition:opacity .6s var(--ease)}
.cap.lit{opacity:1}
.cap .box{grid-area:1/1;max-width:min(94%,620px);text-align:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cap .box.in{opacity:1;transform:none}
.cap h2{margin:0;font-size:clamp(21px,4.6vw,36px);font-weight:700;letter-spacing:-.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.6)}
.cap p{margin:10px 0 0;font-size:clamp(12.5px,2.1vw,15px);line-height:2;color:#EFEAE2;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
.film3d.ended ~ .cap,.ended .cap{opacity:0}

/* پایانِ مسیر — روی همان فریمِ آخر بالا می‌آید، مثل فرمِ ورودِ بیس. */
.end{position:fixed;z-index:7;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(241,239,235,.99) 62%,rgba(241,239,235,0));
  color:var(--ink);padding:clamp(40px,9vw,90px) clamp(18px,5vw,46px) clamp(30px,6vw,56px);
  text-align:center;opacity:0;transform:translateY(26px);pointer-events:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.film3d.ended ~ .end,.ended .end{opacity:1;transform:none;pointer-events:auto}
.end h2{margin:0;font-size:clamp(20px,3.4vw,30px);font-weight:700}
.end p{margin:14px auto 0;max-width:46ch;font-size:13.5px;line-height:2.1;color:#5A544D}
.end .go{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:13px 26px;
  border-radius:999px;background:var(--gold);color:#fff;text-decoration:none;
  font-size:13.5px;font-weight:600;transition:background .3s,transform .3s}
.end .go:hover{background:var(--ink);transform:translateY(-2px)}
.end .go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

@media(prefers-reduced-motion:reduce){
  .hint svg{animation:none}
  .film3d canvas,.cap .box,.hint{transition:none}
}