/* ============================================================
   Munay — Earthen Sanctuary II
   Design tokens, base, motion system, components, RTL
   ============================================================ */

:root {
  /* palette */
  --clay: #bf5f3a;          /* terracotta accent */
  --clay-dark: #9c4a28;
  --clay-deep: #7e3a1f;
  --clay-light: #d98c63;
  --gold: #cfa05a;          /* muted Andean gold */
  --gold-bright: #e2bc7d;
  --cream: #f7f1e8;         /* page background */
  --cream-2: #efe5d6;
  --cream-3: #e7d9c4;
  --cocoa: #241811;         /* deep feature sections */
  --cocoa-2: #33231a;
  --cocoa-3: #46332a;
  --sage: #7e8c6c;          /* conscious-living green */
  --sage-light: #aab797;
  --sage-tint: #edefe4;
  --text: #2c1e15;
  --text-inv: #f7f1e8;
  --muted: #6f5d50;
  --muted-inv: #c9b8a6;
  --border: #e0d2bd;
  --border-dark: rgba(226, 188, 125, .18);

  /* type */
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Barlow', system-ui, sans-serif;
  --fa: 'Vazirmatn', 'Barlow', sans-serif;

  /* rhythm */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.45, 0, .15, 1);
  --shadow-soft: 0 2px 8px rgba(44, 30, 21, .06), 0 12px 32px rgba(44, 30, 21, .08);
  --shadow-lift: 0 4px 12px rgba(44, 30, 21, .08), 0 24px 48px rgba(44, 30, 21, .14);
  --radius: 4px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  font-size: 16.5px;
}
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 480;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 110, 'SOFT' 40;
}
img { display: block; max-width: 100%; }
::selection { background: var(--clay); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

/* Farsi: font swap; layout flip handled by [dir="rtl"] */
html[lang="fa"] body, html[lang="fa"] button, html[lang="fa"] input, html[lang="fa"] textarea { font-family: var(--fa); }
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4 {
  font-family: var(--fa); font-weight: 600; letter-spacing: 0; line-height: 1.35;
}
html[lang="fa"] .font-display { font-family: var(--fa); letter-spacing: 0; }
html[lang="fa"] .italic, html[lang="fa"] em { font-style: normal; }

/* film grain — tactile warmth over everything */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 80;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- typographic helpers ---------- */
.font-display { font-family: var(--serif); font-variation-settings: 'opsz' 130, 'SOFT' 50; }
.kicker {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--clay); font-weight: 600;
}
.kicker::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }
.kicker--center::after { content: ''; width: 2.4rem; height: 1px; background: currentColor; opacity: .6; }
.kicker--gold { color: var(--gold); }
.lead { font-size: 1.16rem; font-weight: 300; line-height: 1.8; color: var(--muted); }
.on-dark .lead, .lead--inv { color: var(--muted-inv); }

/* animated underline links */
.link-line { position: relative; padding-bottom: 2px; }
.link-line::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: var(--tl-origin, left);
  transition: transform .45s var(--ease-out);
}
[dir="rtl"] .link-line::after { --tl-origin: right; }
.link-line:hover::after, .link-line:focus-visible::after { transform: scaleX(1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: 1.05rem 2.4rem; border-radius: 999px;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              background-color .25s, color .25s, border-color .25s;
  min-height: 48px;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--clay); color: #fff; box-shadow: 0 8px 24px rgba(191, 95, 58, .35); }
.btn-primary:hover { background: var(--clay-dark); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(191, 95, 58, .4); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--clay); color: var(--clay); transform: translateY(-2px); }
.on-dark .btn-ghost, .btn-ghost--inv { border-color: var(--border-dark); color: var(--text-inv); }
.on-dark .btn-ghost:hover, .btn-ghost--inv:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ---------- scroll-reveal system ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal { transform: translateY(34px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
[dir="rtl"] .reveal-left { transform: translateX(40px); }
[dir="rtl"] .reveal-right { transform: translateX(-40px); }
.reveal-scale { transform: scale(.94); }
.is-visible { opacity: 1; transform: none; }

/* ---------- parallax bands ---------- */
.parallax { position: relative; overflow: hidden; }
.parallax__img {
  position: absolute; inset: -14% 0; width: 100%; height: 128%;
  object-fit: cover; will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .parallax__img {
    animation: parallax-rise linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes parallax-rise {
    from { transform: translateY(-7%); }
    to   { transform: translateY(7%); }
  }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
@supports (animation-timeline: scroll()) {
  .hero__bg, .hero__drift {
    animation: hero-drift linear both;
    animation-timeline: scroll();
    animation-range: 0 100svh;
  }
  @keyframes hero-drift {
    from { transform: translateY(0) scale(1.06); }
    to   { transform: translateY(9%) scale(1.12); }
  }
}

/* --- pillar scene stack (home hero) --- */
.hero__drift { position: absolute; inset: -10% 0; height: 120%; }
.hero__depth { position: absolute; inset: 0; will-change: transform;
  transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -10px), 0);
  transition: transform .6s var(--ease-soft); }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.hero__slide.is-active { opacity: 1; animation: slide-breathe 9s var(--ease-soft) both; }
@keyframes slide-breathe { from { transform: scale(1.0); } to { transform: scale(1.07); } }

/* --- aurora wash --- */
.hero__aurora { position: absolute; inset: -15%; pointer-events: none; opacity: .8;
  background:
    radial-gradient(42% 36% at 72% 24%, rgba(207,160,90,.20), transparent 65%),
    radial-gradient(38% 42% at 22% 72%, rgba(191,95,58,.22), transparent 65%),
    radial-gradient(30% 30% at 58% 84%, rgba(126,140,108,.20), transparent 65%);
  filter: blur(46px);
  animation: aurora-drift 16s ease-in-out infinite alternate; }
@keyframes aurora-drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) rotate(-1.2deg) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) rotate(1.2deg) scale(1.06); }
}

/* --- drifting motes --- */
.mote { position: absolute; bottom: -3%; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,188,125,.9) 0%, rgba(226,188,125,0) 70%);
  opacity: 0; pointer-events: none;
  animation: mote-rise var(--mt, 16s) linear infinite; animation-delay: var(--md, 0s); }
@keyframes mote-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--mo, .5); }
  85% { opacity: var(--mo, .5); }
  100% { transform: translate3d(var(--mxs, 30px), -108svh, 0); opacity: 0; }
}

/* --- pillar word rotator --- */
.rotator { position: relative; display: block; height: 1.18em; overflow: hidden; }
.rotator .hr-word { position: absolute; inset-inline-start: 0; top: 0; width: 100%;
  white-space: nowrap; opacity: 0; transform: translateY(70%);
  filter: blur(8px); pointer-events: none;
  transition: opacity .65s var(--ease-out), transform .75s var(--ease-out), filter .65s var(--ease-out); }
.rotator .hr-word.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.rotator .hr-word.is-out { opacity: 0; transform: translateY(-65%); filter: blur(10px); }

/* --- pillar chips --- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { display: inline-flex; align-items: center; gap: .55rem;
  padding: .58rem 1.05rem; border-radius: 999px; min-height: 40px;
  border: 1px solid rgba(247,241,232,.28); color: rgba(247,241,232,.82);
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(36,24,17,.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--ease-out); }
.chip i { font-style: normal; font-family: var(--serif); font-size: .78rem; opacity: .6; }
.chip:hover { border-color: var(--gold); color: var(--gold-bright); transform: translateY(-2px); }
.chip.is-active { background: var(--clay); border-color: var(--clay); color: #fff; }
.chip.is-active i { opacity: .85; }
[dir="rtl"] .chip { letter-spacing: .02em; }

/* --- hero pillar counter --- */
.hero__counter { position: absolute; bottom: 2.6rem; inset-inline-end: 3rem; z-index: 5;
  font-family: var(--serif); font-variation-settings: 'opsz' 144;
  font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: 1; font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px rgba(226,188,125,.55); }
html[lang="fa"] .hero__counter { -webkit-text-stroke: 0; color: rgba(226,188,125,.4); }

/* --- five paths (pillars) section --- */
.pillar-row { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 2rem;
  align-items: baseline; padding: 2rem 1rem;
  border-top: 1px solid var(--border); position: relative;
  transition: background-color .4s, padding-inline-start .4s var(--ease-out); }
.pillar-row:last-child { border-bottom: 1px solid var(--border); }
.pillar-row:hover { background: var(--sage-tint); padding-inline-start: 1.7rem; }
.pillar-row .pr-num { font-family: var(--serif); font-variation-settings: 'opsz' 144;
  font-size: 1.05rem; color: var(--sage); letter-spacing: .1em; }
.pillar-row h3 { font-size: clamp(1.45rem, 3vw, 2.1rem); }
.pillar-row p { color: var(--muted); max-width: 46ch; }
@media (min-width: 768px) {
  .pillar-row { grid-template-columns: 5rem minmax(16rem, 22rem) 1fr; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 12, 7, .55), rgba(20, 12, 7, .25) 38%, rgba(36, 24, 17, .72) 100%),
    radial-gradient(120% 90% at 28% 60%, rgba(20, 12, 7, .5), transparent 60%);
}
/* masked line-by-line headline reveal */
.mask-line { display: block; overflow: hidden; }
.mask-line > span {
  display: block; transform: translateY(110%);
  animation: line-up 1.1s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes line-up { to { transform: translateY(0); } }
/* gold shimmer keyword */
.shimmer {
  background: linear-gradient(100deg, var(--gold-bright) 20%, #fff4dd 38%, var(--gold) 55%, var(--gold-bright) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer-slide 7s var(--ease-soft) infinite;
}
@keyframes shimmer-slide { 0%, 100% { background-position: 10% 0; } 50% { background-position: 90% 0; } }
.fade-up { opacity: 0; transform: translateY(26px); animation: fade-up 1.1s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes fade-up { to { opacity: 1; transform: none; } }
/* breathing sun mark + scroll cue */
.breathe { animation: breathe 6s ease-in-out infinite; transform-origin: center; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.scroll-cue { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 5; }
.scroll-cue span {
  display: block; width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(247, 241, 232, .8));
  animation: cue-drop 2.4s var(--ease-soft) infinite;
}
@keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* drifting smoke wisp (palo santo) */
.wisp {
  position: absolute; pointer-events: none; opacity: .5; filter: blur(1px);
  animation: wisp-drift 14s ease-in-out infinite;
}
@keyframes wisp-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: .35; }
  50% { transform: translate(14px, -30px) rotate(6deg); opacity: .6; }
}

/* ---------- word ribbon (marquee) ---------- */
.ribbon { overflow: hidden; white-space: nowrap; user-select: none; }
.ribbon__track { display: inline-flex; gap: 0; animation: ribbon-scroll 36s linear infinite; }
[dir="rtl"] .ribbon__track { animation-name: ribbon-scroll-rtl; }
.ribbon__track > span {
  display: inline-flex; align-items: center; gap: 2.6rem; padding-inline-end: 2.6rem;
  font-family: var(--serif); font-variation-settings: 'opsz' 130;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 400; font-style: italic;
  color: var(--cream-3);
}
.ribbon__track .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: .7; flex: none; }
@keyframes ribbon-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ribbon-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- chakana divider ---------- */
.chakana { display: flex; align-items: center; justify-content: center; gap: 1.2rem; color: var(--gold); }
.chakana::before, .chakana::after { content: ''; height: 1px; width: min(120px, 18vw); background: currentColor; opacity: .45; }

/* ---------- cards ---------- */
.card {
  background: #fffdf9; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card__media { overflow: hidden; }
.card__media img { transition: transform 1.2s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }
.num-ghost {
  font-family: var(--serif); font-variation-settings: 'opsz' 144;
  font-size: clamp(4.5rem, 9vw, 7rem); line-height: 1; font-weight: 300;
  color: transparent; -webkit-text-stroke: 1px var(--clay-light);
  opacity: .55;
}
html[lang="fa"] .num-ghost { -webkit-text-stroke: 0; color: var(--clay-light); opacity: .4; }

/* ---------- dark sections ---------- */
.on-dark { background: var(--cocoa); color: var(--text-inv); }
.on-dark ::selection { background: var(--gold); color: var(--cocoa); }

/* ---------- nav ---------- */
#navbar { transition: background-color .35s, box-shadow .35s, backdrop-filter .35s; }
#navbar.nav-scrolled {
  background: rgba(247, 241, 232, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(44, 30, 21, .06);
}
#navbar.nav-scrolled .nav-ink { color: var(--text); }
#navbar.nav-scrolled .lang-pill { border-color: var(--border); }
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; inset-inline: 12px; bottom: 4px; height: 1px;
  background: var(--clay); transform: scaleX(0); transition: transform .35s var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--clay); }
.lang-btn { min-width: 34px; min-height: 34px; border-radius: 999px; transition: background-color .25s, color .25s; }
.lang-btn[aria-pressed="true"] { background: var(--clay); color: #fff; }
#mobileMenu a { padding: .85rem 0; border-bottom: 1px solid var(--border); }

/* ---------- forms ---------- */
.field input, .field textarea {
  width: 100%; background: #fffdf9; border: 1px solid var(--border); border-radius: var(--radius);
  padding: .95rem 1.1rem; font-size: 1rem; color: var(--text);
  transition: border-color .25s, box-shadow .25s; min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(191, 95, 58, .14); }
.field label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }

/* ---------- RTL fine-tuning ---------- */
[dir="rtl"] .flip-x { transform: scaleX(-1); }
[dir="rtl"] .kicker { letter-spacing: .06em; }
[dir="rtl"] .btn, [dir="rtl"] .nav-link, [dir="rtl"] .field label { letter-spacing: .02em; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mask-line > span { transform: none; animation: none; }
  .fade-up { opacity: 1; transform: none; animation: none; }
  .parallax__img, .hero__bg, .hero__drift, .hero__slide.is-active { animation: none !important; transform: none !important; }
  .ribbon__track, .breathe, .wisp, .shimmer, .scroll-cue span, .hero__aurora, .mote { animation: none !important; }
  .mote { display: none; }
  .hero__depth { transform: none !important; transition: none; }
  .rotator .hr-word { transition: none; filter: none; }
  .card, .card__media img, .btn, .pillar-row, .chip { transition: none; }
}