/* ==========================================================================
   KHANEYE NOOR — Design System : Layer 2 · Reset, Base & Primitives
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--gold-500); color: var(--ink-900); }

/* --- Focus: visible, on-brand, never removed ---------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* --- Scrollbar ----------------------------------------------------------- */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--ink-950); }
  ::-webkit-scrollbar-thumb {
    background: var(--ink-600);
    border-radius: var(--radius-pill);
    border: 2px solid var(--ink-950);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold-700); }
}

/* --- Skip link ----------------------------------------------------------- */
.skip-link {
  position: fixed;
  inset-inline-start: var(--space-4);
  top: -100px;
  z-index: var(--z-loader);
  background: var(--gold-500);
  color: var(--ink-900);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-4); }

/* ==========================================================================
   TYPOGRAPHY PRIMITIVES
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
html[lang="fa"] .display,
html[lang="ar"] .display { font-weight: var(--weight-medium); }

.display--xl { font-size: var(--text-5xl); }
.display--lg { font-size: var(--text-4xl); }
.display--md { font-size: var(--text-3xl); }
.display--sm { font-size: var(--text-2xl); }

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  max-inline-size: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  direction: ltr;
  unicode-bidi: isolate;
}
.eyebrow::before {
  content: "";
  inline-size: clamp(18px, 3vw, 42px);
  block-size: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-muted);
  max-inline-size: var(--container-text);
  text-wrap: pretty;
}

.prose { color: var(--text-muted); line-height: var(--leading-loose); max-inline-size: var(--container-text); }
.prose + .prose { margin-block-start: var(--space-4); }
.lede + .prose { margin-block-start: var(--space-5); }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.text-accent { color: var(--accent); }
.text-muted  { color: var(--text-muted); }

/* Gold gradient text — used sparingly, on one word per view.
   <em> inside a display heading is the dictionary's highlight marker. */
.gilded,
.display em {
  font-style: normal;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gilded {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  min-inline-size: 0;   /* never let a long unbreakable string widen the page */
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .6); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--space-6) var(--space-9);
  align-items: end;
  margin-block-end: var(--space-9);
}
.section-head__title { margin-block-start: var(--space-4); }
@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}

.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }

.rule {
  block-size: 1px;
  background: linear-gradient(to inline-end, transparent, var(--line-strong) 22%, var(--line-strong) 78%, transparent);
  border: 0;
}

/* ==========================================================================
   COMPONENT · Button
   Variants: primary (filled gold) · ghost (outlined) · link (underline sweep)
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  min-block-size: 48px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out);
}
.btn__label { position: relative; z-index: 2; white-space: nowrap; }
.btn__arrow {
  position: relative;
  z-index: 2;
  inline-size: 1.15em;
  flex: none;
  transition: transform var(--dur-base) var(--ease-light);
}
/* Arrow always points "forward" in the reading direction */
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn:hover .btn__arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(4px); }

/* Light-sweep fill: the signature interaction of the whole system */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--grad-accent);
  transform: translateX(-101%);
  transition: transform var(--dur-slow) var(--ease-light);
}
[dir="rtl"] .btn::before { transform: translateX(101%); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }

.btn:hover, .btn:focus-visible {
  --btn-fg: var(--on-accent);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.btn:active { transform: translateY(0) scale(.985); }

.btn--primary {
  --btn-bg: var(--gold-500);
  --btn-fg: var(--on-accent);
  --btn-border: transparent;
  font-weight: var(--weight-semibold);
}
.btn--primary::before { background: var(--gold-200); }

.btn--ghost { --btn-border: var(--line-strong); }

.btn--on-light {
  --btn-fg: var(--ink-900);
  --btn-border: rgba(4, 16, 31, .28);
}
.btn--on-light:hover, .btn--on-light:focus-visible { --btn-fg: var(--ink-900); }

.btn--sm { min-block-size: 40px; padding: var(--space-2) var(--space-5); font-size: var(--text-xs); }
.btn--xs { min-block-size: 34px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); gap: var(--space-2); }

/* Text link with an underline that draws in from the reading edge */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block-end: 3px;
  color: var(--text);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
}
.link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--accent);
  transform-origin: inline-start;
  transform: scaleX(.25);
  transition: transform var(--dur-base) var(--ease-light);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link:hover { color: var(--accent); }

/* ==========================================================================
   COMPONENT · Tag / Pill
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-4);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   MOTION SYSTEM · scroll reveal
   Elements opt in with [data-reveal]; JS adds .is-in when they enter view.
   Stagger via --i on the element or its parent's children.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-light),
    clip-path var(--dur-slower) var(--ease-light),
    filter var(--dur-slow) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(38px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="in"]    { transform: translateX(calc(38px * var(--dir-sign, 1))); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="blur"]  { filter: blur(12px); transform: translateY(20px); }
/* Curtain / mask clip the CHILD, never the observed element itself:
   a fully clipped box reports zero intersection area and would never
   trigger its own reveal. */
[data-reveal="curtain"],
[data-reveal="mask"] { opacity: 1; transform: none; }
[data-reveal="curtain"] > :first-child,
[data-reveal="mask"] > :first-child {
  transition: clip-path var(--dur-cinema) var(--ease-light),
              transform var(--dur-cinema) var(--ease-light);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal="curtain"] > :first-child { clip-path: inset(0 0 100% 0); transform: scale(1.08); }
[data-reveal="mask"]    > :first-child { clip-path: inset(0 100% 0 0); }
[dir="rtl"] [data-reveal="mask"] > :first-child { clip-path: inset(0 0 0 100%); }
[data-reveal="curtain"].is-in > :first-child,
[data-reveal="mask"].is-in > :first-child { clip-path: inset(0 0 0 0); transform: none; }

/* The badge riding on a curtain image waits for the image to arrive. */
[data-reveal="curtain"] > :first-child ~ * {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) var(--dur-slow);
}
[data-reveal="curtain"].is-in > :first-child ~ * { opacity: 1; }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Word-by-word headline reveal (built by JS) */
/* Each word rides in its own overflow box so it can slide up from nothing.
   The box needs real padding for descenders — pulling it back with a negative
   margin would let stacked lines overlap, so the leading absorbs it instead. */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: .06em .16em;
  line-height: inherit;
}
.split-word > span {
  display: inline-block;
  transform: translateY(112%);
  transition: transform var(--dur-slower) var(--ease-light);
  transition-delay: calc(var(--w, 0) * 70ms);
}
.is-in .split-word > span, .split-ready .split-word > span { transform: translateY(0); }

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.ltr { direction: ltr; unicode-bidi: isolate; }
.no-scroll { overflow: hidden; }

/* ==========================================================================
   REDUCED MOTION — honour it completely
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-reveal] > :first-child,
  [data-reveal] > :first-child ~ * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .split-word > span { transform: none !important; }
  .hero__media img, .loader::after, .scroll-cue__line::after,
  .marquee__track, .hero__rays .ray-beam { animation: none !important; }
}