/* ==========================================================================
   motion.css — بخش‌های لغزان، پس‌زمینه‌های عکسی، نوارِ آبیِ آینه و «خانه».
   بعد از fa.css و پیش از mobile.css بار می‌شود.
   ========================================================================== */

/* ---------------------------------------------------------- «خانه» ----- */
.nav-home{display:inline-flex;align-items:center;gap:.5rem}
.ico-igloo{width:22px;height:auto;flex:none;color:var(--bronze)}
.nav-links a.nav-home[aria-current="page"]{color:var(--bone)}

/* ------------------------------------------------- پس‌زمینه‌ی عکسی ----
   لایه در ‎z-index:-1‎ی یک زمینه‌ی ایزوله: بالای رنگِ خودِ بخش، زیرِ همه‌ی
   محتوایش — بی‌آنکه لازم باشد به تک‌تکِ فرزندها ‎z-index‎ بدهیم. */
[data-bg]{isolation:isolate}
[data-bg-into] > .stage{isolation:isolate}
.sbg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 1s var(--ease)}
.sbg.is-in{opacity:1}
.sbg img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);transition:transform 2.4s var(--ease)}
.sbg.is-in img{transform:none}
/* پرده‌ی تیره تا متن روی هر عکسی خوانا بماند. */
.sbg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,9,6,.66) 0%,rgba(11,9,6,.42) 38%,rgba(11,9,6,.58) 70%,rgba(11,9,6,.9) 100%)}
.band.has-bg{background:var(--black)}
/* ---------------------------------------------- بنرِ مجموعه با عکس ----
   (فقط دسکتاپ) عکس «زمینه‌ی کلِ بنر» است، نه تصویری که کنارِ متن چسبانده شده باشد:
   تمام‌عرض، هم‌قدِ خودِ عکس (۱۶:۹، با سقف)، زیرِ نوارِ بالا هم ادامه دارد،
   و متن روی بخشِ تیره‌ی راست می‌نشیند. جعبه‌های کروسل برداشته می‌شوند —
   قابِ دورِ متن روی عکس همان حسِ «پیوست» را می‌داد. */
@media(min-width:761px){
  .cbanner.has-bg{
    min-height:clamp(560px,52vw,92vh);
    display:grid;align-content:end;
    padding-block:clamp(7rem,12vw,9rem) clamp(2.5rem,5vw,4rem);
  }
  .cbanner.has-bg .sbg img{object-position:50% 22%}
  .cbanner.has-bg .sbg::after{
    background:
      linear-gradient(to left,rgba(11,9,6,.9) 0%,rgba(11,9,6,.62) 30%,rgba(11,9,6,.12) 62%,rgba(11,9,6,.05) 100%),
      linear-gradient(to top,var(--black) 0%,rgba(11,9,6,.55) 18%,transparent 42%),
      linear-gradient(to bottom,rgba(11,9,6,.55) 0%,transparent 22%);
  }
  .cbanner.has-bg .cb-in{grid-template-columns:minmax(0,34rem);justify-content:start;align-items:end;gap:1.6rem;width:100%}
  .cbanner.has-bg .cb-id h1{text-shadow:0 2px 30px rgba(0,0,0,.45)}
  .cbanner.has-bg .cb-id .lede{color:rgba(242,237,228,.82)}
  /* اسلایدها: فقط نوشته، کوچک و بی‌قاب، با یک خطِ طلایی. */
  .cbanner.has-bg .cb-media{display:none}
  .cbanner.has-bg .cb-slide .cb-cap,
  .cbanner.has-bg .cb-slide:has(.cb-media.is-art) .cb-cap{
    border:0;border-inline-start:2px solid var(--c-accent);border-radius:0;
    padding:.1rem 0;padding-inline-start:1rem;
  }
  .cbanner.has-bg .cb-cap h2,
  .cbanner.has-bg .cb-slide:has(.cb-media.is-art) .cb-cap h2{font-size:clamp(1.15rem,1.8vw,1.45rem);margin:0 0 .3rem}
  .cbanner.has-bg .cb-cap p{color:rgba(242,237,228,.72);font-size:.86rem}
  .cbanner.has-bg .cb-nav{margin-block-start:.9rem}
  .cbanner.has-bg .cb-arrow{background:rgba(11,9,6,.35);border-color:rgba(242,237,228,.22)}
  /* نوارِ بالا روی عکس: شفاف تا وقتی اسکرول نشده، وگرنه تاریِ نوار صورت را
     پاک می‌کند. */
  body:has(.cbanner.has-bg) .nav:not([data-stuck=true]){
    background:linear-gradient(rgba(11,9,6,.6),rgba(11,9,6,0));
    -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;
  }
}
/* گوشی: همان حالتِ اول — عکس زیرِ کلِ بنر، و در پایین در سیاهی محو می‌شود.
   (نسخه‌ی «عکسِ کامل بالای متن» برگردانده شد؛ روی گوشی نیازی نبود.) */
@media(max-width:760px){
  .cbanner .sbg{-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
}
.band.has-bg::after{opacity:.5}
.hero-track.has-bg .stage-sun{opacity:.35}
@media(prefers-reduced-motion:reduce){.sbg,.sbg img{transition:none;transform:none}}

/* ---------------------------------------------------- بخش‌های لغزان ----
   js/stack.js ‎--stick‎ (جای چسبیدن) و ‎--cover‎ (چقدر بخشِ بعدی رویش
   آمده) را می‌نویسد. بدون جاوااسکریپت یا با «حرکتِ کم»، ‎.is-stacked‎
   روی ‎<html>‎ نیست و بخش‌ها ساده پشتِ هم‌اند. */
.is-stacked [data-stack] > *{
  position:sticky;top:var(--stick,0px);
  background-color:var(--black);
  transform-origin:50% var(--oy,50vh);
  transform:scale(calc(1 - var(--cover,0) * .045));
  will-change:transform;
}
.is-stacked [data-stack] > .band{background-color:var(--ice-deep)}
.is-stacked [data-stack] > .band.has-bg{background-color:var(--black)}
.is-stacked [data-stack] > * + *{
  border-radius:28px 28px 0 0;overflow:clip;
  box-shadow:0 -28px 60px -24px rgba(0,0,0,.85),0 -1px 0 rgba(201,160,99,.18);
}
/* تیرگیِ بخشِ زیرین — یک لایه‌ی جدا، چون ‎filter‎ روی کلِ بخش در هر
   فریمِ اسکرول گران است. */
.stack-dim{display:none}
.is-stacked [data-stack] > * > .stack-dim{
  display:block;position:absolute;inset:0;z-index:40;pointer-events:none;
  background:#050403;opacity:calc(var(--cover,0) * .6);
}
.is-stacked [data-stack] > *[data-cover="0.000"] > .stack-dim{display:none}
/* کارت‌ها و بخش‌ها بعد از پشته بی‌سایه‌ی اضافه. */
.is-stacked [data-stack] + *{position:relative;z-index:1;background:var(--black)}

/* ------------------------------------------------ نوارِ آبیِ آینه ------ */
.mirror-band{display:grid;gap:clamp(2.4rem,6vw,4rem);justify-items:center}
.mirror-band .band-in b{color:var(--bronze-lit);font-weight:600}
.mirror-band .band-in .stamp.dim{margin-top:.2rem}
.band-steps{
  position:relative;z-index:2;list-style:none;margin:0;padding:0;
  width:100%;max-width:1100px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,2vw,1.4rem);
  text-align:start;
}
.bstep{
  display:grid;gap:.7rem;align-content:start;
  padding:clamp(1.2rem,2.4vw,1.7rem);
  border:1px solid rgba(143,180,196,.24);border-radius:16px;
  background:linear-gradient(160deg,rgba(143,180,196,.10),rgba(8,12,15,.28));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.bstep .key{background:var(--ice);color:var(--black)}
.bstep h3{margin:0;font-size:1.06rem;font-weight:600;color:var(--bone)}
.bstep p{margin:0;font-size:.92rem;line-height:1.8;color:rgba(237,230,217,.72)}

/* بخشِ فعلیِ صفحه‌ی اول در نوار (js/site.js) */
.nav-links a.is-here{color:var(--bronze-lit)}
.nav-links a.nav-home:not(.is-here){color:var(--bone-dim)}
.nav-links a.nav-home.is-here{color:var(--bone)}
@media(min-width:881px) and (max-width:1180px){
  .nav-links{gap:1.1rem}
  /* فقط ایگلو؛ جا برای هفت پیوند. نام برای صفحه‌خوان می‌ماند. */
  .nav-home span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* بخشی که عکس دارد: کارت‌های کناری شیشه‌ای می‌شوند تا عکس از پشتشان
   پیدا باشد، به‌جای یک مستطیلِ مات که نیمی از عکس را بپوشاند. */
.has-bg .origin{
  background:linear-gradient(180deg,rgba(30,23,16,.62),rgba(16,12,8,.72));
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  border-color:rgba(201,160,99,.28);
}
.has-bg .card{background:rgba(14,11,8,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ------------------------------------ بخش‌های دوستونه با عکس (دسکتاپ) ----
   کارتِ کناری (نشانِ ایگاک، «چه چیزی را چک می‌کنیم»، تماس) روی صورتِ سوژه‌ی
   عکس می‌افتاد — روی چهره‌ی اینوئیت در «ریشه‌ی نام» دقیقاً روی چشم‌ها. حالا
   وقتی بخش عکس دارد، همه‌ی محتوا در ستونِ راست است و کارت زیرِ متن
   می‌نشیند؛ سمتِ چپ (جای سوژه در پرامپت‌ها) خالی می‌ماند. */
@media(min-width:901px){
  .section.has-bg .split{grid-template-columns:minmax(0,40rem);justify-content:start}
  .section.has-bg .split > aside{max-width:34rem}
}
/* نشانِ بزرگِ ایگاک روی عکس اضافه است (نوار هم نشان را دارد) و روی گوشی
   درست روی صورتِ پایینِ عکس می‌افتاد؛ فقط یادداشتش می‌ماند. */
#origin.has-bg aside figure{display:none}
#origin.has-bg aside{background:rgba(11,9,6,.42)}