/* =====================================================================
   هیروی چرخشی آیفون ۱۸ — بخش اسکرولی بالای لندینگ /iphone-18
   نسخهٔ درون‌صفحه‌ای: برخلاف نمونهٔ مستقل، هدر/فوتر خودش را ندارد و
   به‌جای اسکرول کل سند، فقط از اسکرولِ همین بخش تغذیه می‌شود.
   همه‌چیز زیر .ip18sh اسکوپ شده تا با بقیهٔ صفحه قاطی نشود.
   ===================================================================== */

.ip18sh{
  --ip18sh-bg:#121116;
  --ip18sh-fg:#f4f2ee;
  --ip18sh-fg-soft:rgba(244,242,238,.68);
  --ip18sh-ease:cubic-bezier(.22,.61,.36,1);

  position:relative;
  /* تنها چیزی که به بخش ارتفاع می‌دهد؛ طول اسکرولِ چرخش از همین می‌آید */
  height:460vh;
  min-height:2600px;
  background:var(--ip18sh-bg);
  color:var(--ip18sh-fg);
}

/* قاب چسبان: یک صفحهٔ کامل که حین عبور از بخش سر جایش می‌ماند */
.ip18sh__sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:var(--ip18sh-bg);
}

/* نور استودیویی پشت گوشی‌ها */
.ip18sh__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(26% 34% at 28% 48%, rgba(255,214,196,.30) 0%, rgba(255,214,196,.08) 55%, rgba(18,17,22,0) 78%),
    radial-gradient(18% 24% at 47% 60%, rgba(196,222,255,.20) 0%, rgba(18,17,22,0) 72%),
    radial-gradient(85% 70% at 38% 55%, rgba(120,90,110,.14) 0%, rgba(18,17,22,0) 78%);
}

.ip18sh__canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  transition:opacity .6s var(--ip18sh-ease);
}
.ip18sh.is-ready .ip18sh__canvas{ opacity:1; }

.ip18sh__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(18,17,22,.90) 0%, rgba(18,17,22,.14) 20%, rgba(18,17,22,.14) 80%, rgba(18,17,22,.92) 100%),
    /* واش سمت متن: دسکتاپ متن راست است و گوشی‌ها چپ */
    linear-gradient(to left, rgba(18,17,22,.80) 0%, rgba(18,17,22,.40) 32%, rgba(18,17,22,0) 58%),
    radial-gradient(100% 80% at 40% 50%, rgba(18,17,22,0) 0%, rgba(18,17,22,.55) 100%);
}

/* گرین ریز تا واش‌های تخت باند نیفتند */
.ip18sh__grain{
  position:absolute; inset:-50%; opacity:.09; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
}

/* نوار پیشرفتِ همین بخش (نه کل صفحه) */
.ip18sh__meter{
  position:absolute; top:0; left:0; z-index:5;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--ip18sh-fg); opacity:.5;
}

/* --------------------------- پنل‌های متنی --------------------------- */
.ip18sh__panels{ position:absolute; inset:0; z-index:4; pointer-events:none; }

.ip18sh__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; text-align:center;
  padding-block-start:14vh;
  padding-block-end:12vh;
  padding-inline:clamp(20px, 5vw, 60px);
  opacity:0;
  will-change:opacity, transform;
}

.ip18sh__eyebrow{
  font-size:12.5px; letter-spacing:.03em; color:var(--ip18sh-fg-soft);
  margin-bottom:clamp(14px,2vw,20px); max-width:min(46ch,100%);
}

.ip18sh__title{
  margin:0;
  /* تراکینگ منفی مخصوص تایپ لاتین است و اتصال حروف فارسی را خراب می‌کند */
  font-family:"Morabba Medium","Dana",Tahoma,sans-serif;
  font-weight:500; letter-spacing:0;
  font-size:clamp(32px, 5.4vw, 76px); line-height:1.2;
  max-width:16ch; text-wrap:balance;
  color:var(--ip18sh-fg);
  text-shadow:0 2px 30px rgba(18,17,22,.7);
}

.ip18sh__text{
  margin:clamp(16px,2.2vw,26px) 0 0;
  font-size:clamp(15px,1.2vw,18px); line-height:1.75; color:var(--ip18sh-fg-soft);
  max-width:min(40ch,100%); text-wrap:pretty;
  text-shadow:0 1px 20px rgba(18,17,22,.7);
}

.ip18sh__cta{ margin-top:clamp(24px,3.2vw,40px); pointer-events:auto; display:flex; }

.ip18sh__pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 28px; border-radius:999px;
  background:var(--ip18sh-fg); color:#0a0908;
  -webkit-text-fill-color:#0a0908;
  font-family:"Dana Medium","Dana",Tahoma,sans-serif; font-size:15px;
  text-decoration:none; white-space:nowrap;
  border:1px solid rgba(244,242,238,.14);
  transition:transform .4s var(--ip18sh-ease), background .3s var(--ip18sh-ease);
}
.ip18sh__pill:hover, .ip18sh__pill:focus-visible{
  transform:translateY(-2px); background:#fff; color:#000; -webkit-text-fill-color:#000;
}
.ip18sh__pill:focus-visible{ outline:2px solid var(--ip18sh-fg); outline-offset:2px; }

/* عدد لاتین وسط جملهٔ فارسی: فونت بدنهٔ سایت DanaFaNum است و ارقام ASCII را
   فارسی رندر می‌کند، پس ارقام به یک فونت لاتین سپرده و LTR ایزوله می‌شوند */
.ip18sh__num{
  direction:ltr; unicode-bidi:isolate;
  font-family:"Helvetica Neue",Arial,"Segoe UI",sans-serif;
}
.ip18sh__title .ip18sh__num{ font-family:inherit; }

/* نشانهٔ ادامهٔ اسکرول؛ با شروع چرخش محو می‌شود */
.ip18sh__hint{
  position:absolute; z-index:4; left:0; right:0; bottom:calc(4vh + 8px);
  display:flex; justify-content:center; pointer-events:none;
  font-size:12px; color:var(--ip18sh-fg-soft);
  transition:opacity .4s var(--ip18sh-ease);
}

/* --------------------------- بریک‌پوینت‌ها --------------------------- */
/* دسکتاپ: ستون متن سمت راست (شروع خط در RTL)، نیمهٔ چپ برای گوشی‌ها */
@media (min-width:901px){
  .ip18sh__panel{
    align-items:flex-start; justify-content:center; text-align:start;
    padding-inline-end:52%;
    padding-block-start:12vh; padding-block-end:12vh;
  }
  .ip18sh__cta{ justify-content:flex-start; }
}

@media (max-width:900px){
  .ip18sh__veil{
    background:
      linear-gradient(to bottom, rgba(18,17,22,.92) 0%, rgba(18,17,22,.16) 22%, rgba(18,17,22,.16) 62%, rgba(18,17,22,.96) 100%),
      linear-gradient(to top, rgba(18,17,22,.90) 0%, rgba(18,17,22,.55) 34%, rgba(18,17,22,0) 62%),
      radial-gradient(100% 70% at 50% 34%, rgba(18,17,22,0) 0%, rgba(18,17,22,.45) 100%);
  }
}

@media (max-width:720px){
  .ip18sh{ height:420vh; }
  .ip18sh__title{ max-width:14ch; font-size:clamp(28px, 8.4vw, 44px); }
  .ip18sh__text{ font-size:15px; max-width:34ch; }
  /* فاصلهٔ پایین سخاوتمندانه‌تر است تا دکمه هم از نوار پایینِ ثابتِ سایت فاصله
     بگیرد و هم در همان لحظهٔ ورود — که بخش هنوز به بالای دید نچسبیده و کمی
     پایین‌تر ایستاده — زیر نوار پنهان نشود. */
  .ip18sh__panel{
    padding-inline:18px;
    padding-block-end:calc(22vh + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width:420px){
  .ip18sh__title{ font-size:clamp(26px, 8.6vw, 34px); }
  .ip18sh__eyebrow{ font-size:11px; max-width:28ch; }
  .ip18sh__pill{ height:44px; padding:0 22px; font-size:14px; }
}

@media (max-height:520px) and (orientation:landscape){
  .ip18sh__panel{ justify-content:center; padding-block:10vh; }
  .ip18sh__title{ font-size:clamp(26px, 8vh, 40px); }
  .ip18sh__text{ margin-top:10px; font-size:14px; }
  .ip18sh__cta{ margin-top:14px; }
}

/* «کاهش حرکت»: چرخش با اسکرول می‌ماند (کاربر خودش کنترلش می‌کند)،
   فقط جابه‌جایی ضدـاسکرول پنل‌ها خاموش می‌شود */
@media (prefers-reduced-motion: reduce){
  .ip18sh__panel{ transform:none !important; }
}