@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. */
.c3d{position:fixed;inset:0;z-index:1;overflow:hidden;background:#0E0C0B}
.c3d canvas{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.c3d.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}}
.c3d.moved .hint{opacity:0;transform:translateX(-50%) translateY(10px);pointer-events:none}

/* پیامِ شکست — اگر فریم‌ها نیامدند، صفحه سیاهِ بی‌توضیح نماند. */
.c3d .failmsg{display:none}
.c3d.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;inset:0;z-index:4;display:grid;place-items:center;
  pointer-events:none;padding:clamp(22px,6vw,70px)}
.cap .box{max-width:min(92%,640px);text-align:center;opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.cap .box.in{opacity:1;transform:none}
.cap h2{margin:0;font-size:clamp(22px,5vw,42px);font-weight:700;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(0,0,0,.55)}
.cap p{margin:14px 0 0;font-size:clamp(13px,2.2vw,16px);line-height:2.1;color:#EFEAE2;
  text-shadow:0 1px 16px rgba(0,0,0,.5)}

/* پایانِ مسیر — روی همان فریمِ آخر بالا می‌آید، مثل فرمِ ورودِ بیس. */
.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)}
.c3d.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}
  .c3d canvas,.cap .box,.hint{transition:none}
}