/* ══════════════════════════════════════════════════════════════════════════
   footer.css — فوترِ مشترک.

   🔴 چرا فایلِ جداست: مثلِ header.css، چون index.html خودکفاست و کلِ site.css را
   لود نمی‌کند ولی باید **دقیقا** همان فوتر را داشته باشد.

   🔴 چرا حالا اجباری شد: با ناوبریِ بدونِ ریلود فقط <main> عوض می‌شود، پس فوترِ
   صفحه‌ای که کاربر **اول** رویش نشسته روی همهٔ صفحه‌های بعدی می‌ماند. تا دیروز
   صفحهٔ اصلی فوترِ فورکِ خودش را داشت؛ یعنی هرکس از صفحهٔ اصلی شروع می‌کرد،
   فوترِ صفحهٔ اصلی را تا آخرِ سایت با خودش می‌برد.

   منبع: نسخهٔ خودِ صفحهٔ اصلی، چون غنی‌تر بود (تولدِ نشان و نفس‌کشیدنش). یعنی این
   انتقال برای ۲۴ صفحهٔ دیگر ارتقاست، نه برای صفحهٔ اصلی تنزل.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══ فوتر ═══ */
footer{position:relative;overflow:hidden;padding-top:96px}
/* 🔴 بی‌متن (دستور مالک ۲۴ مرداد: «برگرد بالا در فوتر نیازی نیست، همون آیکن رو
   یکم بزرگ تر کن و انیمیشنش رو طوری کن که جلب توجه کنه»). با رفتنِ متن، سطحِ
   کلیک هم می‌رفت ⇒ padding جایش را پر می‌کند: ۲۶ + ۲×۱۰ = ۴۶px، بالای کفِ ۴۴. */
.toTop{display:grid;place-items:center;padding:10px;
  color:var(--gc-text-mid);margin-inline:auto;width:max-content;
  transition:color .2s var(--ease-ui)}
.toTop:hover{color:var(--gc-text)}
.toTop svg{transition:transform .2s var(--ease-ui);animation:toTopHint 9.13s ease-in-out infinite}
/* 🔴 روی hover انیمیشن خاموش می‌شود، وگرنه transformِ انیمیشن بر transitionِ
   hover غالب است و دکمه زیر موس تکان نمی‌خورد. */
.toTop:hover svg{animation:none;transform:translateY(-4px)}
/* دو جهش کوتاه و بعد ۷.۳ ثانیه سکون ، «جلب توجه» با استراحتِ بلند، نه تکانِ دائم.
   ⚠ ۹.۱۳ عمداً رُند نیست و مضربِ ۳.۴ (نفسِ نشان) هم نیست. این دو تنها حرکت‌های
   حلقه‌ای فوترند و هر دو محلی و چندپیکسلی‌اند ، همان استثنایی که برای نبضِ
   جرقه‌ها در site.css نوشته شده، نه حرکتِ بزرگی که چشم دوتاش را با هم ببیند. */
@keyframes toTopHint{
  0%,80%{transform:translateY(0)}
  85%{transform:translateY(-6px)}
  90%{transform:translateY(0)}
  95%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}
.emblem-wrap{display:grid;place-items:center;position:relative}
/* نشانِ فوتر = خودِ ترکیبِ سه‌لوگو، عینا (خواستهٔ مالک) */
/* ⚠ اندازه‌ها با همان نسبتِ قبل کوچک شدند (بلوم ۰.۸۸ و ۰.۳۷ برابرِ عرضِ نشان)،
   وگرنه هاله دورِ نشانِ کوچک یا حلقه می‌شود یا گم. */
.emblem-bloom{position:absolute;width:205px;height:85px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--gc-violet-rgb),.22),transparent)}
/* 🔴 مرکزِ بصری = مرکزِ نشانِ T، نه مرکزِ هندسیِ فایل.
   خودِ T را جدا اندازه گرفتم: تنها عنصری است که تا بالای بوم می‌رسد، پس در نوارِ
   y=4..55 فقط اوست ⇒ x462..812، مرکز ۶۳۷. مرکزِ بومِ ۱۳۵۱ برابر ۶۷۵.۵ است، یعنی
   T حدود ۳۸.۵px چپ‌تر می‌افتد = ۲.۸۵٪ عرضِ تصویر.
   ⚠ بارِ اول از مرزهای برشِ دستی حساب کردم و ۱.۷٪ درآمد که نصفِ راه بود؛ مرزِ برش
   مرزِ شکل نیست. با درصد می‌دهیم تا در هر اندازه‌ای درست بماند، و در همهٔ کیفریم‌ها
   تکرار می‌شود چون transform جایگزین می‌شود نه جمع. */
.emblem{width:min(230px,54vw);height:auto;opacity:0;transform:translateX(2.85%) translateY(14px)}
.emblem-wrap.born .emblem{animation:embBirth .7s var(--ease-ui) 1 both,embBreath 3.4s ease-in-out .9s infinite}
.emblem-wrap.born .emblem-bloom{animation:bloomBreath 3.4s ease-in-out .9s infinite}
@keyframes embBirth{to{opacity:1;transform:translateX(2.85%)}}
@keyframes embBreath{0%,100%{transform:translateX(2.85%) scale(1)}50%{transform:translateX(2.85%) scale(1.012)}}
@keyframes bloomBreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:1}}
html:not(.rv-on) .emblem{opacity:1;transform:translateX(2.85%)}   /* بدونِ JS: کامل دیده شود */
/* minmax(0,1fr): با کفِ ۲۰۰px، در پنجرهٔ ۹۰۱–۹۹۲ ستون‌ها از قاب بیرون می‌زدند */
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px;margin-top:56px}
.fcols h3{font-size:13px;font-weight:700;opacity:.4;margin:0 0 14px}
.fcols a{display:block;font-size:14px;line-height:2.2;color:var(--gc-text-mid);transition:color .18s}
.fcols a:hover{color:var(--gc-text)}
/* 🔴 گرید و نه flex با space-between: نشان باید **وسطِ نوار** بنشیند، و در
   space-between وسط‌بودنش به هم‌عرض‌بودنِ دو طرف بند است (کپی‌رایت ۱۱۰px،
   نماد ۱۰۰px) ⇒ چند پیکسل کج می‌افتاد. ستونِ میانیِ auto بینِ دو ۱fr همیشه وسط است. */
.fbar{border-top:1px solid var(--gc-hairline);margin-top:48px;padding-block:20px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.fbar .fmeta{justify-self:start}
.fbar .enamad{justify-self:end}
.enamad{width:100px;height:100px;border:1px solid var(--gc-hairline);border-radius:8px;
  display:grid;place-items:center;font-size:11px;color:var(--gc-text-low)}
.copy{font-size:12.5px;color:var(--gc-text-low)}
/* ⚠ خطِ نسخه («فونیکس گاردین ۱.۴.۹۳ (۱۷ مرداد ۱۴۰۵)، تغییرات این نسخه») و
   قاعده‌های `.ver` با دستور مالک ۲۴ مرداد حذف شدند. اگر برگردد، هم span در
   `site.js::buildFooter` و هم این قاعده‌ها با هم برمی‌گردند. */
.fmeta{display:flex;flex-direction:column;gap:4px}

/* ═══ ریسپانسیوِ فوتر ═══ */
@media (max-width:1024px){ .fcols{gap:32px} }
@media (max-width:900px){
  .fcols{grid-template-columns:repeat(2,1fr);gap:32px}
  /* سه ستونِ نوار در عرضِ موبایل جا نمی‌شوند ⇒ زیرِ هم و وسط‌چین */
  .fbar{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px}
  .fbar .fmeta,.fbar .enamad{justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  .emblem-wrap.born .emblem,.emblem-wrap.born .emblem-bloom{animation:none}
  .emblem{opacity:1;transform:translateX(2.85%)}
  .toTop svg{animation:none}
}