/* ── فصل ۱: «گیر کردی؟ ← بپرس ← داره حل می‌کنه ← حله!» ──
   هیرو صفحهٔ لندینگ است (گوی و نمادهای درس دورش + تیتر)؛ از مرحلهٔ ۱ به بعد همهٔ رابط اپ فقط داخل قاب یک گوشی دیده می‌شود.
   حرکت‌های اصلی مستقیم به اسکرول وصل‌اند تا با کوچک‌ترین حرکت انگشت چیزی تکان بخورد: JS هر فریم فقط transform/opacity
   گوی، مدار نمادها، متن هیرو و «ریگ» گوشی را می‌نویسد. گوشی در مراحل ثابت است؛ عوض‌شدن تیتر و چیپ‌های هر مرحله با data-step و CSS است.
   صحنه به بلندی صحنهٔ «بی‌نوار» است (--lv) تا وقتی نوار جمع می‌شود پایینش خالی نماند؛ همهٔ محتوا در بخشی چیده می‌شود
   که با نوار باز هم دیده می‌شود (--sv). هر دو یک بار به پیکسل ثابت می‌شوند (اسکریپت head در index.html)، پس جمع و باز شدن نوار چیزی را جابه‌جا نمی‌کند. */
.story { height: calc(var(--lv) + var(--sv) * 1.86); }
/* گوشی بین تیتر بالا (--phy) و دکمهٔ شناور پایین جا می‌شود (۹۰px جای دکمه). قاب ۱:۲ است، پهن‌تر از نسبت اسکرین‌شات،
   تا روی صفحه‌های کوتاه باریک و کشیده دیده نشود؛ اسکرین‌شات با عرض قاب جا می‌شود و فقط کمی از پایینش بریده می‌شود */
.stage { --oc: calc(var(--sv) * .31); --O: min(calc(var(--W) * .62), calc(var(--sv) * .35), 290px);
  --pw: clamp(180px, min(calc(var(--W) * .62), calc((var(--sv) - var(--phy) - 90px) / 2)), 290px);
  --ph: calc(var(--pw) * 2); --phy: max(calc(var(--sv) * .22), 166px);
  position: sticky; top: 0; height: var(--lv); overflow: hidden; touch-action: manipulation; }
/* گوشی‌های کوتاه: گوی کوچک‌تر و بالاتر تا مدار نمادها نه به هدر بخورد نه به تیتر (اندازهٔ دقیق را landing.js از جای تیتر حساب می‌کند) */
:where(.vp-700) .stage { --oc: calc(var(--sv) * .28); --O: min(calc(var(--W) * .62), calc(var(--sv) * .27), 290px); } :where(.vp-700) .stage .cue { display: none; }
.st-bg { position: absolute; inset: 0; background: radial-gradient(95% 55% at 50% 30%, #D9ECFF 0%, #EAF4FF 42%, var(--bg) 72%); }
.st-bg::after { content: ""; position: absolute; width: 130%; aspect-ratio: 1; left: -15%; top: -38%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,92,255,.12), transparent); }

/* گوی خود اپ — با اسکرول کوچک می‌شود و دقیقاً روی گوی داخل صفحهٔ اپ می‌نشیند (مسیرش را JS می‌نویسد) */
.orbx { position: absolute; z-index: 6; left: 50%; top: 0; width: var(--O); height: var(--O); margin-left: calc(var(--O) / -2);
  transform: translate3d(0, calc(var(--oc) - var(--O) / 2), 0); will-change: transform, opacity; cursor: pointer; }
.orbx__glow { position: absolute; inset: -26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(56,189,248,.32), rgba(124,92,255,.1) 55%, transparent); }
.orbx__core { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; animation: breathe 5s ease-in-out infinite; }
.orbx__core img, .orbx__core video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(circle, #000 50%, transparent 70%); mask: radial-gradient(circle, #000 50%, transparent 70%); }
.orbx.tap .orbx__core { animation: tapPop .5s var(--ease-spring); }
@keyframes breathe { 0%, 100% { transform: scale(.97); } 50% { transform: scale(1.02); } }
@keyframes tapPop { 40% { transform: scale(1.12); } }

/* مدار نمادهای درس — همان چهار نماد و رنگ درسیِ دور گوی داخل اپ (ریاضی، شیمی، ادبیات، جغرافیا)، کمی دورتر از گوی.
   گوی دیدنی ۶۸٪ قاب ویدیوست (شعاع ۰٫۳۴ × --O)؛ لبهٔ داخلی نمادها --gap بیرون از آن می‌نشیند. مدار آرام می‌چرخد و نمادها صاف می‌مانند. */
.orbit { --chip: clamp(36px, calc(var(--sv) * .054), 44px); --gap: clamp(10px, calc(var(--sv) * .026), 22px); --r: calc(var(--O) * .34 + var(--gap) + var(--chip) / 2);
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; will-change: transform, opacity; }
.orbit__spin { position: absolute; left: 0; top: 0; animation: ring 34s linear infinite; }
.og { position: absolute; transform: rotate(var(--a)) translateX(var(--r)); }
.ou { position: absolute; display: block; animation: ringBack 34s linear infinite; }
.ofix { position: absolute; display: block; transform: rotate(calc(var(--a) * -1)); }
.ochip { position: absolute; width: var(--chip); height: var(--chip); margin: calc(var(--chip) / -2); border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(9,45,72,.16), 0 0 0 1px rgba(14,116,165,.07); animation: chipIn .7s var(--ease-spring) both; animation-delay: calc(.45s + var(--i) * .12s); }
.ochip svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.ochip b { font-size: calc(var(--chip) * .38); font-weight: 900; letter-spacing: -.5px; line-height: 1; }
@keyframes ringBack { to { transform: rotate(-360deg); } }
@keyframes chipIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.lite .orbit__spin, .lite .ou { animation: none; }

/* «ریگ»: گوشی و هرچه کنارش است با هم جابه‌جا می‌شوند. با اسکرول دورِ گوی ظاهر می‌شود، کمی بالا می‌آید و بزرگ می‌شود
   (مبدأ بزرگ‌شدنش خود گوی است، پس هیچ‌وقت دو گوی جدا دیده نمی‌شود)؛ از مرحلهٔ ۱ به بعد کاملاً ثابت می‌ماند */
.rig { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transform: translate3d(0, 140px, 0) scale(.94); will-change: transform, opacity; }
.ph { position: absolute; z-index: 1; left: 50%; top: 0; width: var(--pw); margin-left: calc(var(--pw) / -2); aspect-ratio: 1 / 2; padding: 7px; border-radius: calc(var(--pw) * .15);
  background: linear-gradient(160deg, #3A4A5E, #0B121C 38%, #1F2B3C); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 40px 80px -24px rgba(0,20,60,.45);
  transform: translate3d(0, var(--phy), 0); }
.ph__screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .13); overflow: hidden; background: var(--bg); }
.ph__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .45s var(--ease-out); }
.ph__screen > img.on { opacity: 1; }
/* مرحلهٔ تایپ: صفحهٔ گوشی کم‌رنگ می‌شود تا چشم روی کادر تایپ بماند و متن‌های ریز اپ کسی را وسوسهٔ زوم نکند */
.ph__screen::before { content: ""; position: absolute; z-index: 2; inset: 0; background: rgba(246,251,255,.72); opacity: 0; transition: opacity .45s var(--ease-out); pointer-events: none; }
.stage[data-step="1"] .ph__screen::before { opacity: 1; }
/* قاب ۱:۲ پایین اسکرین‌شات را کمی می‌بُرد؛ یک محوشدگی نرم جای بریدگی را می‌پوشاند تا کادر تایپ اپ نصفه دیده نشود */
.ph__screen::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 9%; background: linear-gradient(rgba(246,251,255,0), #F6FBFF 75%); pointer-events: none; }
.ph__island { position: absolute; z-index: 3; top: calc(7px + var(--pw) * .024); left: 50%; width: calc(var(--pw) * .042); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #05080D; box-shadow: 0 0 0 1.5px rgba(255,255,255,.1); }

/* کادر تایپِ درشت: همان کادر پایین اپ، بزرگ‌شده و بیرون‌زده از گوشی (روی لبهٔ پایین قاب)، تا تایپ شدن سؤال با اسکرول واضح دیده شود.
   ترتیب مثل خود اپ: دکمهٔ ارسال سمت راست، دوربین سمت چپ. ارسال تا سؤال کامل نشده خاموش است. */
.typer { --tw: min(calc(var(--W) - 28px), 380px); position: absolute; z-index: 6; left: 50%; top: 0; width: var(--tw); height: 56px; margin-left: calc(var(--tw) / -2);
  display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 999px; background: #fff; box-shadow: 0 20px 40px -14px rgba(9,45,72,.5), 0 0 0 2px rgba(14,165,233,.45);
  opacity: 0; transform: translate3d(0, calc(var(--phy) + var(--ph) - 62px), 0) scale(.55); transition: transform .5s var(--ease-spring), opacity .25s; }
.stage[data-step="1"] .typer { opacity: 1; transform: translate3d(0, calc(var(--phy) + var(--ph) - 62px), 0); }
.typer__txt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1px; font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; }
.typer__txt i { flex-shrink: 0; width: 2px; height: 24px; margin-inline-start: 2px; border-radius: 2px; background: var(--blue); animation: caret 1s steps(1) infinite; }
.typer__send, .typer__cam { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.typer__send svg, .typer__cam svg { width: 20px; height: 20px; }
.typer__send { background: #CFE3F2; color: #fff; transition: background .3s, transform .35s var(--ease-spring); }
.typer.ready .typer__send { background: linear-gradient(145deg, #29C6F7, #0B8BD9); transform: scale(1.1); animation: sendPulse 1.1s var(--ease-out) infinite; }
.typer__cam { background: #EEF6FD; color: var(--acc-ink); }
@keyframes caret { 50% { opacity: 0; } }
@keyframes sendPulse { 0% { box-shadow: 0 0 0 0 rgba(14,165,233,.6); } 100% { box-shadow: 0 0 0 14px rgba(14,165,233,0); } }
/* پیشرفت تایپ: هرچه پایین‌تر بروی پرتر می‌شود و بی‌کلام نشان می‌دهد که انگشت خود کاربر سؤال را تایپ می‌کند */
.typer__bar { position: absolute; left: 58px; right: 58px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(14,165,233,.16); overflow: hidden; }
.typer__bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform: scaleX(0); transform-origin: 100% 50%; will-change: transform; }
/* گزینهٔ عکس: دکمهٔ دوربین همین کادر دو بار آرام می‌تپد، به‌جای کارت عکسِ جدا که صحنه را شلوغ می‌کرد */
.stage[data-step="1"] .typer__cam { animation: camPing 1.2s .8s var(--ease-out) 2; }
@keyframes camPing { 0% { box-shadow: 0 0 0 0 rgba(11,107,255,.45); } 100% { box-shadow: 0 0 0 12px rgba(11,107,255,0); } }

/* «انگشتتو بکش بالا»: فقط وقتی کاربر وسط صحنه ایستاده و هنوز نفهمیده صحنه با انگشت خودش جلو می‌رود (JS کلاس on را می‌گذارد).
   زرد و کج، به زبان برچسب‌های خود لندینگ، تا با اعلان‌های داخل اپ اشتباه گرفته نشود. */
.swipe { position: absolute; z-index: 8; left: 50%; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
  opacity: 0; transform: translate3d(-50%, calc(var(--phy) + var(--ph) - 146px), 0) scale(.9); transition: opacity .3s, transform .45s var(--ease-spring); }
.swipe.on { opacity: 1; transform: translate3d(-50%, calc(var(--phy) + var(--ph) - 146px), 0); }
.swipe__hand { font-size: 34px; line-height: 1.1; animation: swipeUp 1.35s var(--ease-io) infinite; }
.swipe b { padding: 6px 13px; border-radius: 13px; background: var(--sun); color: #3D2800; font-size: 14px; font-weight: 900; line-height: 1.5; white-space: nowrap; transform: rotate(-3deg); box-shadow: 0 4px 0 rgba(0,0,0,.12), 0 12px 22px rgba(0,20,60,.16); }
@keyframes swipeUp { 0% { transform: translateY(14px); opacity: 0; } 25%, 75% { opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }


/* کرونومتر بیرون گوشی (عددش با اسکرول جلو می‌رود) */
.watch { position: absolute; z-index: 4; left: 50%; top: 0; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px 0 12px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 900; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: var(--sh);
  opacity: 0; transform: translate3d(calc(var(--pw) / -2 - 10px), calc(var(--phy) + var(--ph) * .52), 0) scale(.8); transition: opacity .35s, transform .6s var(--ease-spring), background .3s, color .3s; }
.watch svg { width: 19px; height: 19px; color: var(--blue); }
.stage[data-step="2"] .watch { opacity: 1; transform: translate3d(calc(var(--pw) / -2 - 10px), calc(var(--phy) + var(--ph) * .52), 0); transition-delay: .15s; }
.watch.done { background: var(--green); color: #fff; }
.watch.done svg { color: #fff; }

/* چیپ‌های قدم کنار بخش‌های جواب */
.sc { position: absolute; z-index: 4; top: 0; left: 50%; display: flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; padding-inline-start: 8px; border-radius: 16px; background: #fff; color: var(--ink); font-weight: 900; font-size: 13px; white-space: nowrap; box-shadow: var(--sh);
  opacity: 0; transform: translate3d(var(--cx), calc(var(--phy) + var(--ph) * var(--cy) + 20px), 0) scale(.7); transition: transform .6s var(--ease-spring), opacity .35s; }
.sc i { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: 13px; color: #fff; }
.stage[data-step="3"] .sc { opacity: 1; transform: translate3d(var(--cx), calc(var(--phy) + var(--ph) * var(--cy)), 0) rotate(var(--r)); transition-delay: var(--td); }

/* تیترِ هر مرحله (بیرون از گوشی) */
.scap { position: absolute; z-index: 9; left: var(--gut); right: var(--gut); top: calc(60px + var(--sv) * .01); height: 90px; text-align: center; pointer-events: none; }
.scap p { position: absolute; inset: 0; font-size: clamp(22px, 6.6vw, 29px); font-weight: 900; line-height: 1.45; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-smooth); }
.scap small { display: block; font-size: 14px; font-weight: 700; color: var(--sub); margin-top: 2px; }
.stage[data-step="1"] .scap [data-s="1"], .stage[data-step="2"] .scap [data-s="2"], .stage[data-step="3"] .scap [data-s="3"] { opacity: 1; transform: none; transition-delay: .1s; }

/* متن هیرو (با اسکرول بالا می‌رود و محو می‌شود)؛ پایینش به لبهٔ صفحهٔ «با نوار» بسته است، نه لبهٔ صحنه */
.s-copy { position: absolute; z-index: 10; left: var(--gut); right: var(--gut); bottom: calc(var(--lv) - var(--sv) + 22px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; will-change: transform, opacity; }
.s-title { position: relative; font-size: clamp(46px, 14.5vw, 76px); line-height: 1.12; font-weight: 900; letter-spacing: -1.4px; color: var(--ink); }
.s-title .g { background: linear-gradient(95deg, #0B6BFF, #0EA5E9 45%, #7C5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-title svg { position: absolute; left: 6%; right: 6%; bottom: -10px; width: 88%; height: 20px; }
.s-title svg path { fill: none; stroke: var(--sun); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1s .8s var(--ease-out) forwards; }
.s-sub { font-size: 15.5px; font-weight: 700; line-height: 1.85; color: var(--sub); max-width: 22em; margin-top: 4px; }
.s-sub b { color: var(--ink); }
.s-meta { font-size: 12.5px; font-weight: 800; color: var(--mut); }
.cue { width: 26px; height: 26px; display: grid; place-items: center; color: var(--mut); }
.cue svg { width: 18px; height: 18px; animation: bobUp 1.5s ease-in-out infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bobUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.s-copy > * { animation: rise .8s var(--ease-smooth) both; }
.s-copy > :nth-child(2) { animation-delay: .12s; } .s-copy > :nth-child(3) { animation-delay: .24s; } .s-copy > :nth-child(4) { animation-delay: .36s; } .s-copy > :nth-child(5) { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.s-copy > .stk { position: relative; }

/* نوار پیشرفت و «رد کردن»، سمت راست وسط صفحهٔ دیدنی (جای خالی کنار گوشی، دور از دکمهٔ پایین) */
.sdots { position: absolute; z-index: 9; right: 18px; top: calc(var(--sv) * .5); transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; opacity: 0; transition: opacity .4s; }
.stage:not([data-step="0"]) .sdots { opacity: 1; }
.sdots i { width: 5px; height: 5px; border-radius: 99px; background: rgba(12,27,38,.18); transition: height .4s var(--ease-smooth), background .4s; }
.sdots i.on { height: 20px; background: var(--blue); }
.skip { position: absolute; z-index: 9; right: 6.5px; top: calc(var(--sv) * .5 + 40px); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,27,38,.07); color: var(--sub); opacity: 0; pointer-events: none; transition: opacity .4s; }
.skip svg { width: 16px; height: 16px; }
.stage[data-step="1"] .skip, .stage[data-step="2"] .skip { opacity: 1; pointer-events: auto; }