/* ==========================================================================
   base.css — فونت‌ها، توکن‌های طراحی، ریست، تایپوگرافی و ابزارهای پایه
   --------------------------------------------------------------------------
   زبان طراحی: مینیمال ادیتوریال، الهام‌گرفته از big.dk / haditeherani.com /
   fmzd.co / challenge-studio.com — عکس بزرگ، تایپوگرافی درشت، خطوط مویی،
   حرکت‌های آرام.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱. فونت‌ها (میزبانی محلی؛ بدون وابستگی به Google Fonts)
   -------------------------------------------------------------------------- */
/* --- نیان: فونت فارسی دفتر (ارسالی کارفرما، ساب‌ست و WOFF2 شده) ---
   خانواده نیان وزن ۴۰۰ سالم ندارد؛ وزن ۳۰۰ (Light) برای بازه ۳۰۰–۴۰۰ اعلام
   می‌شود تا متن بدنه با ظاهر سبک و ادیتوریالِ پورتفولیو رندر شود. */
@font-face {
  font-family: "Nian";
  src: url("../fonts/nian-100.3dac6197f0fd.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nian";
  src: url("../fonts/nian-200.35d204f11e8e.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nian";
  src: url("../fonts/nian-300.39774d8e88c6.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nian";
  src: url("../fonts/nian-600.a91403c44d7e.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nian";
  src: url("../fonts/nian-700.bcb0b286cf48.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* --- لاتو: فونت انگلیسی (موقت، طبق درخواست کارفرما) --- */
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-300.716309aab2bc.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.e1b3b5908c9c.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.de69cf9e514d.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* --- وزیرمتن: فقط به‌عنوان پشتیبان برای نویسه‌های خارج از ساب‌ست نیان --- */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-arabic.05d9ce2a23d3.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plexmono-400.79936b18df9f.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   ۲. توکن‌ها
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* رنگ — تم روشن (سنگ گرم) */
  --bg: #f1efea;
  --bg-2: #e8e5df;
  --bg-3: #dcd8d0;
  --ink: #121211;
  --ink-2: #3b3a36;
  --muted: #86837b;
  --line: rgba(18, 18, 17, 0.12);
  --line-2: rgba(18, 18, 17, 0.24);
  --accent: #9c7a54;               /* با تنظیمات سایت بازنویسی می‌شود */
  --on-image: #f6f4ef;
  --shade: rgba(9, 9, 8, 0.55);
  --danger: #b24a33;
  --success: #3d7a55;

  /* فونت‌ها */
  --font-fa: "Nian", "Vazirmatn", Tahoma, sans-serif;
  --font-en: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-display-en: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-body: var(--font-fa);
  --font-display: var(--font-fa);
  --font-label: var(--font-fa);

  /* مقیاس تایپوگرافی */
  --fs-hero: clamp(2.9rem, 8.4vw, 9rem);
  --fs-d1: clamp(2.5rem, 6.2vw, 6.4rem);
  --fs-d2: clamp(2rem, 4.2vw, 4.25rem);
  --fs-d3: clamp(1.45rem, 2.5vw, 2.4rem);
  --fs-h4: clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-lead: clamp(1.1rem, 1.55vw, 1.5rem);
  --fs-body: clamp(0.97rem, 0.92rem + 0.2vw, 1.0625rem);
  --fs-small: 0.84rem;
  --fs-micro: 0.7rem;

  /* فاصله‌ها */
  --gutter: clamp(1.25rem, 3.6vw, 3.5rem);
  --section: clamp(6rem, 13vw, 15rem);
  --gap-xs: 0.5rem;
  --gap-sm: clamp(0.85rem, 1.4vw, 1.25rem);
  --gap-md: clamp(1.5rem, 2.6vw, 2.5rem);
  --gap-lg: clamp(3rem, 6vw, 6.5rem);
  --max: 1680px;
  --max-text: 46rem;
  /* عرض ستون تکی پروژه‌ها — ریتم پورتفولیوی چاپی، مثل سایت مرجع */
  --max-stack: 1120px;
  --header-h: 84px;

  /* حرکت */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.8s;
  --dur-fast: 0.35s;

  --radius: 0;
  --radius-pill: 999px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0b;
  --bg-2: #151514;
  --bg-3: #1f1f1d;
  --ink: #eceae4;
  --ink-2: #c7c4bc;
  --muted: #8b887f;
  --line: rgba(236, 234, 228, 0.13);
  --line-2: rgba(236, 234, 228, 0.28);
  --shade: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0c0b;
    --bg-2: #151514;
    --bg-3: #1f1f1d;
    --ink: #eceae4;
    --ink-2: #c7c4bc;
    --muted: #8b887f;
    --line: rgba(236, 234, 228, 0.13);
    --line-2: rgba(236, 234, 228, 0.28);
    --shade: rgba(0, 0, 0, 0.6);
  }
}

html[lang="en"] {
  --font-body: var(--font-en);
  --font-display: var(--font-display-en);
  --font-label: var(--font-mono);
}

/* --------------------------------------------------------------------------
   ۳. ریست
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  font-weight: 400;
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color 0.5s var(--ease-in-out), color 0.5s var(--ease-in-out);
}

html[lang="en"] body { line-height: 1.65; letter-spacing: -0.005em; }

body.is-locked { overflow: hidden; }

img, picture, video, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); }

/* ویژگی hidden همیشه پنهان کند (منو و لایت‌باکس برای انیمیشن خروج استثنا هستند) */
[hidden]:not(.menu):not(.lightbox) { display: none !important; }

:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--ink); color: var(--bg); }

/* ورود نرم محتوای هر صفحه */
.main { animation: page-in 0.7s var(--ease) both; }
@keyframes page-in { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   ۴. تایپوگرافی
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4 {
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0;
}

.t-hero { font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.035em; font-weight: 300; }
.t-d1 { font-size: var(--fs-d1); line-height: 1; letter-spacing: -0.03em; }
.t-d2 { font-size: var(--fs-d2); line-height: 1.06; }
.t-d3 { font-size: var(--fs-d3); line-height: 1.15; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 400; }

html[lang="fa"] .t-hero { line-height: 1.16; letter-spacing: 0; font-weight: 300; }
html[lang="fa"] .t-d1 { line-height: 1.2; letter-spacing: 0; }
html[lang="fa"] .t-d2 { line-height: 1.28; }

.t-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); font-weight: 300; }
html[lang="fa"] .t-lead { line-height: 1.95; font-weight: 300; }

.t-muted { color: var(--muted); }
.t-small { font-size: var(--fs-small); }

/* برچسب‌های کوچک فنی (شماره، سال، دسته) */
.label {
  display: inline-flex;
  flex-wrap: wrap;           /* خطوط مشخصات بلند روی موبایل نباید عرض صفحه را بشکنند */
  align-items: center;
  gap: 0.2em 0.6em;
  max-width: 100%;
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

html[lang="fa"] .label { letter-spacing: 0.02em; font-size: 0.78rem; font-weight: 600; }

.label--dash::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.num { font-variant-numeric: tabular-nums; }

.prose { max-width: var(--max-text); }
.prose > * + * { margin-top: 1.1em; }
.prose p { color: var(--ink-2); }
.prose a { border-bottom: 1px solid var(--line-2); transition: border-color var(--dur-fast); }
.prose a:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   ۵. چیدمان پایه
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--text { max-width: calc(var(--max-text) + 2 * var(--gutter)); }

.section { padding-block: var(--section); }
.section--sm { padding-block: calc(var(--section) * 0.55); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-md);
  margin-block-end: var(--gap-lg);
}

.section-head__title { max-width: 18ch; }
html[lang="fa"] .section-head__title { max-width: 22ch; }

.rule { height: 1px; background: var(--line); border: 0; }

.visually-hidden,
.skip-link:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  padding: 0.75rem 1.1rem;
  background: var(--ink);
  color: var(--bg);
}

.honeypot { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.6rem; height: 1.6rem; }

.media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
}

/* --------------------------------------------------------------------------
   ۶. قاب تصاویر و انیمیشن‌های ورود
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  isolation: isolate;
}

.frame > img,
.frame > video,
.frame > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* تصویر هنگام بارگذاری آرام ظاهر می‌شود */
.js .frame img { opacity: 0; transition: opacity 0.6s var(--ease); }
.js .frame img.is-loaded { opacity: 1; }

/* ورود آرام هنگام اسکرول — تنها جلوه حرکتی باقی‌مانده */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0s);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}