/* ==========================================================================
   RED ANGEL — شركة الملاك الأصهب
   tokens.css — foundation: design tokens, reset, typography, layout, ambience
   Layer 1 of 3.  Load order: tokens.css → components.css → sections.css
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* ---- Surfaces: midnight navy, from deepest to lifted ---- */
  --ink:        #04070d;
  --navy-900:   #060c18;
  --navy-800:   #0a1428;
  --navy-700:   #0e1c36;
  --navy-600:   #14264a;
  --navy-500:   #1b3159;

  /* ---- Molten gold ---- */
  --gold-100:   #F9EFCB;
  --gold-200:   #F0DDA0;
  --gold-300:   #E6C879;
  --gold-400:   #D9B457;
  --gold-500:   #C9A227;
  --gold-600:   #A8801C;
  --gold-700:   #7A5C12;

  /* ---- Electric azure (the logo's blue ribbon) ---- */
  --azure-200:  #9BD9FA;
  --azure-300:  #6FC6F5;
  --azure-400:  #3BA9E8;
  --azure-500:  #1E90D8;
  --azure-600:  #0B5C9E;

  /* ---- The single warm accent: the logo's bead ---- */
  --ember:      #E0492B;

  /* ---- Text ---- */
  --ivory:      #F4F2EC;
  --text:       #E8E6DF;
  --muted:      rgba(232, 230, 223, .62);
  --faint:      rgba(232, 230, 223, .34);

  /* ---- Lines & glass ---- */
  --line:       rgba(201, 162, 39, .22);
  --line-soft:  rgba(232, 230, 223, .10);
  --glass:      rgba(12, 22, 44, .55);
  --glass-2:    rgba(9, 17, 34, .72);

  /* ---- Gradients ----------------------------------------------------------
     CSS gradient angles are ABSOLUTE — dir="rtl" does not mirror them.
     --grad-gold is the 105deg original; --grad-gold-rtl is its 255deg mirror,
     used on Arabic headings so the metal is lit from the side the eye enters. */
  --grad-gold:     linear-gradient(105deg, var(--gold-600), var(--gold-200) 38%, var(--gold-100) 50%, var(--gold-300) 62%, var(--gold-600));
  --grad-gold-rtl: linear-gradient(255deg, var(--gold-600), var(--gold-200) 38%, var(--gold-100) 50%, var(--gold-300) 62%, var(--gold-600));
  --grad-azure:    linear-gradient(120deg, var(--azure-600), var(--azure-300));
  --grad-rule:     linear-gradient(to left, transparent, var(--gold-600) 34%, var(--gold-300));

  /* ---- Radii ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  /* ---- Elevation & glow (dim and precise — never neon) ---- */
  --shadow-lg:  0 40px 90px -30px rgba(0, 0, 0, .85);
  --shadow-md:  0 24px 55px -26px rgba(0, 0, 0, .8);
  --glow-gold:  0 0 40px rgba(201, 162, 39, .28);
  --glow-azure: 0 0 46px rgba(30, 144, 216, .22);

  /* ---- Easing ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);

  /* ---- Metrics ---- */
  --container: 1280px;
  --gutter:    clamp(18px, 4vw, 64px);
  --nav-h:     82px;
  --section-y: clamp(72px, 10vw, 156px);

  /* ---- Typefaces ---- */
  --font-ar:    'Tajawal', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-kufi:  'Noto Kufi Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --font-latin: 'Cinzel', 'Times New Roman', Georgia, serif;
}

/* ---------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Anchor targets must clear the sticky header. */
:target { scroll-margin-block-start: calc(var(--nav-h) + 24px); }
section[id]  { scroll-margin-block-start: calc(var(--nav-h) + 8px); }

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

img { height: auto; }

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

button { cursor: pointer; }

ul, ol { list-style: none; }

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

/* ------------------------------------------------------------ 3. DOCUMENT */
html, body {
  overflow-x: clip;          /* clip beats hidden: it does not create a scroll container */
  max-width: 100%;
}

body {
  min-block-size: 100vh;
  background-color: var(--navy-900);
  color: var(--text);
  font-family: var(--font-ar);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  font-weight: 400;
  line-height: 2.05;                    /* Arabic needs tall leading for its diacritics */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
  z-index: 0;
}

/* The page sits above the fixed canvas / ambience layers. */
body > main,
body > header,
body > footer { position: relative; z-index: 2; }

/* Lock scroll while the preloader or the mobile drawer owns the screen. */
body.is-loading { overflow: hidden; }
body.menu-open  { overflow: hidden; }

::selection {
  background: rgba(201, 162, 39, .3);
  color: var(--gold-100);
}

/* ------------------------------------------------------------ 4. TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ar);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ivory);
  text-wrap: balance;
}

p { text-wrap: pretty; }

small { font-size: .82em; }

strong, b { font-weight: 700; color: var(--ivory); }

/* Latin runs embedded in Arabic must be isolated or the bidi algorithm
   reorders them (e.g. "68%" would render as "%68"). */
[dir="ltr"] { unicode-bidi: isolate; }

.gold-text {
  color: var(--gold-200);                        /* fallback first, always */
  background-image: var(--grad-gold-rtl);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Display / section scale ------------------------------------------------- */
.section-title {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;                             /* NEVER track Arabic */
  color: var(--gold-200);
  background-image: var(--grad-gold-rtl);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Split words are transformed inline-blocks and paint in their own layer,
   where the parent's background-clip:text can no longer reach them. Without
   their own gradient they would render as invisible glyphs. */
.section-title .word {
  background-image: var(--grad-gold-rtl);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--font-kufi);
  font-size: clamp(.72rem, .68rem + .2vw, .85rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-300);
  letter-spacing: 0;
}

/* The eyebrow's leading tick — drawn from the RTL start edge. */
.eyebrow::before {
  content: "";
  inline-size: clamp(24px, 4vw, 46px);
  block-size: 1px;
  background: linear-gradient(to left, transparent, var(--gold-500));
  transform: scaleX(0);
  transform-origin: 100% 50%;                    /* physical right = RTL start */
  transition: transform .8s var(--ease-out) .1s;
}
.is-revealed .eyebrow::before,
.eyebrow.is-revealed::before { transform: scaleX(1); }

.lead {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.35rem);
  color: var(--ivory);
  line-height: 1.95;
}

/* ------------------------------------------------------------- 5. LAYOUT */
.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  text-align: center;
  margin-block-end: clamp(42px, 6vw, 82px);
}

.section-head .section-title { max-inline-size: 20ch; }

/* -------------------------------------------------- 6. AMBIENT BACKGROUND */
.fx-canvas {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}

.ambient__orb--gold {
  inline-size: 46vmax; block-size: 46vmax;
  inset-block-start: -14vmax;
  inset-inline-end: -12vmax;
  background: radial-gradient(circle, rgba(201, 162, 39, .30), transparent 68%);
  animation: orbDriftA 34s var(--ease-io) infinite alternate;
}

.ambient__orb--azure {
  inline-size: 40vmax; block-size: 40vmax;
  inset-block-end: -12vmax;
  inset-inline-start: -10vmax;
  background: radial-gradient(circle, rgba(30, 144, 216, .26), transparent 70%);
  animation: orbDriftB 42s var(--ease-io) infinite alternate;
}

.ambient__orb--deep {
  inline-size: 52vmax; block-size: 52vmax;
  inset-block-start: 32%;
  inset-inline-start: 24%;
  background: radial-gradient(circle, rgba(27, 49, 89, .55), transparent 72%);
  animation: orbDriftC 56s var(--ease-io) infinite alternate;
  opacity: .7;
}

@keyframes orbDriftA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-6vw, 5vh, 0) scale(1.14); } }
@keyframes orbDriftB { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(7vw, -4vh, 0) scale(.92); } }
@keyframes orbDriftC { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw, -6vh, 0) scale(1.1); } }

/* A faint architectural grid — the "marble wall" behind everything. */
.ambient__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, rgba(201, 162, 39, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201, 162, 39, .05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%);
  opacity: .55;
  animation: gridDrift 60s linear infinite;
}

@keyframes gridDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-88px, -88px, 0); } }

/* Film grain — pure SVG data URI, no external asset. */
.ambient__grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.42'/></svg>");
  opacity: .05;
  mix-blend-mode: overlay;
  animation: grainShift 7s steps(6) infinite;
}

@keyframes grainShift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-6%, 3%, 0); }
  40%  { transform: translate3d(4%, -5%, 0); }
  60%  { transform: translate3d(-3%, 6%, 0); }
  80%  { transform: translate3d(5%, 2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------- 7. REVEAL / SPLIT BASE
   CRITICAL: the hidden state lives inside `.js` + no-preference. If JS never
   runs, or the visitor asks for reduced motion, nothing is ever invisible. */
[data-reveal] { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(38px);
    filter: blur(7px);
    transition-delay: var(--rd, 0ms);
  }
  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Word / char split primitives -------------------------------------------- */
.split { display: inline; }

.split .word,
.split .char {
  display: inline-block;
  will-change: transform, opacity;
}

/* Arabic is split by WORD ONLY. Splitting it per character would put each
   glyph in its own text run and the shaper would render every letter in its
   isolated form — «شركة» would become «ش ر ك ة». */
@media (prefers-reduced-motion: no-preference) {
  .js .split .word,
  .js .split .char {
    opacity: 0;
    transform: translateY(.62em);
    transition: opacity .78s var(--ease-out), transform .78s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 46ms);
  }
  .js .split.is-revealed .word,
  .js .split.is-revealed .char {
    opacity: 1;
    transform: none;
  }
  /* The Latin wordmark gets the extra theatre: it tips up out of the floor. */
  .js .hero__latin.split .char {
    transform: translateY(.5em) rotateX(-55deg);
    filter: blur(5px);
    transition: opacity .82s var(--ease-out), transform .82s var(--ease-out), filter .82s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 52ms);
  }
  .js .hero__latin.split.is-revealed .char {
    transform: none;
    filter: none;
  }
}

/* A whitespace token must never collapse or the words run together. */
.split .space { display: inline; white-space: pre; }

/* The RTL draw: hairlines write themselves right-to-left, the way Arabic does.
   transform-origin has no logical keyword, so 100% is hard-coded — this
   document is always dir="rtl". */
.draw {
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .95s var(--ease-out);
}
.is-revealed .draw,
.draw.is-revealed { transform: scaleX(1); }

/* ------------------------------------------------------ 8. FOCUS & A11Y */
:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove the default ring only where we replace it ourselves. */
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 50%;
  translate: -50% -180%;
  z-index: 999;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  background: var(--navy-700);
  border: 1px solid var(--line);
  color: var(--gold-200);
  font-weight: 700;
  transition: translate .3s var(--ease-out);
}
.skip-link:focus-visible { translate: -50% 0; }

/* --------------------------------------------------------- 9. SCROLLBAR */
html {
  scrollbar-color: var(--gold-600) var(--navy-900);
  scrollbar-width: thin;
}

::-webkit-scrollbar { inline-size: 11px; block-size: 11px; }
::-webkit-scrollbar-track { background: var(--navy-900); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--gold-600), var(--gold-700));
  border: 3px solid var(--navy-900);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, var(--gold-400), var(--gold-600)); }

/* ------------------------------------------------ 10. REDUCED MOTION ---- */
@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;
  }

  /* Everything stays visible — motion is what we remove, never content. */
  [data-reveal],
  .split .word,
  .split .char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .draw { transform: scaleX(1) !important; }

  .ambient__orb,
  .ambient__grid,
  .ambient__grain { animation: none !important; }

  .fx-canvas { display: none; }
}