/* ==========================================================================
   کویر مصر — Design Tokens  (shared across all 3 directions)
   Earthy / adobe palette · IRANSans (embedded, self-hosted) type
   NOTE: every visual decision is a CSS variable here. The IRANSans family is
   embedded below via @font-face (assets/fonts/*.woff2) — fully offline.
   ========================================================================== */

/* FULLY OFFLINE & SELF-HOSTED — the IRANSans family is embedded locally in
   assets/fonts/ (woff2). Nothing is fetched from any network/CDN. These are the
   exact glyphs/weights the design already used, so the look is byte-for-byte the
   same on every device — it no longer depends on a font being installed. */
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/IRANSans-Light.woff2')   format('woff2'); }
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/IRANSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/IRANSans-Medium.woff2')  format('woff2'); }
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/IRANSans-Bold.woff2')    format('woff2'); }
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/IRANSans-Black.woff2')   format('woff2'); }

:root {
  /* —— Sand & adobe surfaces —— */
  --sand-50:  #faf5ec;
  --sand-100: #f4ebda;
  --sand-200: #ecdcc2;
  --sand-300: #ddc49d;
  --clay-400: #cda674;
  --clay-500: #bd8b50;   /* adobe clay */
  --clay-600: #a06f3a;

  /* —— Terracotta / rust (primary accent) —— */
  --terra-400: #d57a4c;
  --terra-500: #c25a30;  /* primary terracotta */
  --terra-600: #a4441f;
  --rust-700:  #823315;

  /* —— Warm browns / ink —— */
  --brown-700: #5b3a25;
  --brown-800: #3c2516;
  --ink-900:   #25160d;
  --ink-950:   #170d07;

  /* —— Dune gold (highlight) —— */
  --gold-400: #e9b24a;
  --gold-500: #d9982f;

  /* —— Desert night (for dark sections) —— */
  --night-700: #2a2018;
  --night-800: #1c1510;
  --night-900: #120c08;

  /* —— Semantic —— */
  --bg:        var(--sand-50);
  --bg-alt:    var(--sand-100);
  --surface:   #fffdf8;
  --text:      var(--ink-900);
  --text-soft: #6b5640;
  --text-faint:#94816a;
  --line:      rgba(60, 37, 22, 0.14);
  --accent:    var(--terra-500);
  --accent-2:  var(--gold-500);

  /* —— Type (offline system stack: device Persian font, Tahoma fallback) —— */
  --font-body:    'IRANSans', 'IRANYekan', 'IRANSansX', Tahoma, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'IRANSans', 'IRANYekanX', 'IRANYekan', Tahoma, 'Segoe UI', system-ui, sans-serif;

  /* fluid type scale */
  --fs-hero:   clamp(2.6rem, 1.2rem + 6.2vw, 7rem);
  --fs-h1:     clamp(2rem, 1.2rem + 3.4vw, 4.25rem);
  --fs-h2:     clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  --fs-h3:     clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
  --fs-lead:   clamp(1.05rem, 0.95rem + 0.55vw, 1.4rem);
  --fs-body:   clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --fs-small:  0.875rem;
  --fs-eyebrow:0.78rem;

  /* —— Spacing & shape —— */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 40px;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --maxw: 1280px;

  /* —— Shadow (warm, never grey) —— */
  --sh-sm: 0 2px 8px rgba(60,37,22,.08);
  --sh-md: 0 14px 40px -12px rgba(60,37,22,.28);
  --sh-lg: 0 40px 90px -30px rgba(37,22,13,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ==========================  reset  ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  direction: rtl;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.12; font-weight: 800; letter-spacing: -.01em; }
::selection { background: var(--terra-500); color: #fff; }

/* numeric / latin runs keep Vazirmatn but tabular for stats */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "ss01"; }

/* ==========================  shared utilities  ============================ */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: .28em;
  font-weight: 700;
  color: var(--terra-600);
  text-transform: none;
}
.eyebrow--light { color: var(--gold-400); }

/* —— reveal-on-scroll (driven by effects.js) —— */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .kenburns, .kenburns img { animation: none !important; }
}

/* —— Ken Burns slow zoom on hero images —— */
.kenburns { overflow: hidden; }
.kenburns > img, .kenburns > .kb {
  width: 100%; height: 100%; object-fit: cover;
  animation: kb 22s var(--ease) infinite alternate;
}
@keyframes kb {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -2%, 0); }
}

/* —— sand grain / particle canvas sits behind content —— */
.particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* —— language switch base —— */
[data-lang-en] { display: none; }
html[lang="en"] body { direction: ltr; }
html[lang="en"] [data-lang-fa] { display: none; }
html[lang="en"] [data-lang-en] { display: revert; }