/* ==========================================================================
   BASE — reset, typography, direction, foil & paper primitives
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Fixed header-less page, but anchor jumps still want breathing room */
  scroll-padding-block-start: 4rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-ui);
  font-size: var(--fs-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---- Language / direction ------------------------------------------------
   Every layout rule in this project uses CSS logical properties, so the
   mirror between Arabic and English is automatic. Only the font stack and
   the numeral system are swapped here.                                    */

:root:lang(ar) {
  --ff-display: var(--ff-ar-display);
  --ff-head:    var(--ff-ar-head);
  --ff-ui:      var(--ff-ar-ui);
}
:root:lang(en) {
  --ff-display: var(--ff-en-display);
  --ff-head:    var(--ff-en-head);
  --ff-ui:      var(--ff-en-ui);
}

/* Arabic UI text sits a touch larger and looser than Latin at the same px */
:lang(ar) body { line-height: 1.9; }

/* ---- Page ground ---------------------------------------------------------
   Three stacked layers: a warm radial wash, the fractal paper grain, and
   the content. The grain is an feTurbulence filter rendered into a data URI
   — real texture, zero image weight.                                      */

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFDF9 0%, var(--paper) 42%, var(--paper-2) 78%, var(--paper-3) 100%);
}

body::after {
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* The icon sprite is a definitions-only <svg>. It was carrying an inline
   style attribute, which the production Content-Security-Policy blocks —
   style-src without 'unsafe-inline' covers style attributes, though not
   CSSOM writes from script. */
.sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

/* Every real element rides above the two ground layers */
.shell, .section, .seal-gate, .lang-switch, .dust { position: relative; z-index: 1; }

/* ---- Layout --------------------------------------------------------------*/

.shell {
  inline-size: var(--shell);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-pad);
}

.section + .section { padding-block-start: 0; }

/* ---- Foil ----------------------------------------------------------------
   Flat gold is declared first as the fallback; browsers that support
   background-clip:text upgrade to the moving gradient.                    */

.foil {
  color: var(--gold-deep);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .foil {
    background-image: var(--foil);
    /* 180%, not 250%: the wider the gradient is stretched, the more of the
       sweep is spent showing only the pale stops, and the name washes out
       against ivory at exactly the wrong moment. */
    background-size: 180% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: foil-sweep 9s var(--ease) infinite;
  }
  .foil--soft { background-image: var(--foil-soft); animation-duration: 13s; }
  .foil--still { animation: none; background-position: 30% 50%; }
}

@keyframes foil-sweep {
  0%, 100% { background-position: 18% 50%; }
  50%      { background-position: 82% 50%; }
}

/* Gold applied to an SVG stroke or fill rather than text */
.foil-stroke { stroke: var(--gold-deep); }
.foil-fill   { fill:   var(--gold-deep); }

/* ---- Type primitives -----------------------------------------------------*/

.eyebrow {
  font-family: var(--ff-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Arabic joins break under letter-spacing — never track Arabic text. */
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-size: var(--fs-small); }

.section-title {
  font-family: var(--ff-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--ink);
  text-shadow: var(--deboss);
}
:lang(en) .section-title { letter-spacing: .06em; }

.lede {
  max-inline-size: 46ch;
  margin-inline: auto;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

/* ---- Focus ---------------------------------------------------------------*/

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Scroll reveal -------------------------------------------------------*/

.reveal {
  opacity: 0;
  transform: translateY(1.75rem);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Reduced motion ------------------------------------------------------
   One guard that stands every animation down and renders final states.    */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .foil { animation: none; background-position: 30% 50%; }
}