/* OraCleid WORLD — canonical foundation for the Saudi Visual North Star.
   WO-WEB-BUILD-CANONICAL / P0. Website-layer CSS (editable). No literal colour
   lives here: everything resolves from --ora-* (identity) or --w-* (scene).

   Layers of one place, back to front:
     .w-sky      the dusk/dawn sky                              z 0
     .w-horizon  the warm light line where sky meets city       z 1
     .w-skyline  Riyadh silhouette                              z 2
     .w-haze     atmospheric perspective between city and stage z 3
     .w-floor    reflective ground the actors stand on          z 4
     actors      Director / Orb                                 z 10
     surfaces    glass panes                                    z 20
     chrome      rail / dock                                    z 30+
   Everything in the world is positioned with logical properties so the
   Arabic (RTL) and English (LTR) worlds are mirrors of each other. */

/* ------------------------------------------------------------------ */
/* 1. Scale, motion and material tokens (derived, never literal)        */
/* ------------------------------------------------------------------ */
:root {
  /* type — Cairo carries Arabic display, Sora carries Latin display, IBM Plex
     Sans Arabic is the body (canonical registry). Arabic runs ~12% larger for
     optical parity with Latin at the same nominal size. */
  --w-font-body: 'IBM Plex Sans Arabic', var(--ora-font-sans, system-ui), sans-serif;
  --w-font-display-ar: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
  --w-font-display-en: 'Sora', 'IBM Plex Sans Arabic', sans-serif;
  --w-ar: 1;                               /* set to 1.12 on Arabic documents */
  --w-t-hero:  calc(clamp(2.6rem, 1.4rem + 3.6vw, 5.2rem) * var(--w-ar));
  --w-t-title: calc(clamp(1.9rem, 1.2rem + 2vw, 3.1rem) * var(--w-ar));
  --w-t-head:  calc(clamp(1.35rem, 1rem + 1vw, 1.9rem) * var(--w-ar));
  --w-t-lead:  calc(clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem) * var(--w-ar));
  --w-t-body:  calc(1rem * var(--w-ar));
  --w-t-small: calc(0.875rem * var(--w-ar));
  --w-t-micro: calc(0.75rem * var(--w-ar));
  --w-lh-display: 1.15;
  --w-lh-body: 1.65;

  /* motion hierarchy: world > actor > micro */
  --w-ease-world: cubic-bezier(.7, 0, .2, 1);      /* environment transforms */
  --w-ease-actor: cubic-bezier(.16, 1, .3, 1);     /* Director / Orb / surfaces */
  --w-ease-micro: cubic-bezier(.4, 0, .2, 1);      /* controls */
  --w-dur-world: 900ms;
  --w-dur-actor: 600ms;
  --w-dur-micro: 180ms;
  --w-dur-flag: 7s;

  /* materials */
  --w-blur: 18px;
  --w-radius-pane: 22px;
  --w-radius-plate: 30px;
  --w-radius-pill: 999px;
  --w-edge: 1px solid rgb(var(--w-glass-edge) / .22);
  --w-depth-1: 0 8px 24px rgb(var(--w-shadow) / .18);
  --w-depth-2: 0 24px 60px rgb(var(--w-shadow) / .28), 0 2px 0 rgb(var(--w-glass-edge) / .10) inset;
  --w-depth-3: 0 40px 100px rgb(var(--w-shadow) / .40), 0 1px 0 rgb(var(--w-glass-edge) / .18) inset;
  --w-glow-soft: 0 0 60px rgb(var(--w-glow) / .35);
  --w-glow-core: 0 0 24px rgb(var(--w-glow) / .8), 0 0 90px rgb(var(--w-glow) / .45);

  /* geometry */
  --w-rail-h: 72px;
  --w-dock-h: 76px;
  --w-max: 1440px;
  --w-gutter: clamp(16px, 4vw, 56px);
  --w-safe-b: env(safe-area-inset-bottom, 0px);
}
:lang(ar) { --w-ar: 1.12; }

/* ------------------------------------------------------------------ */
/* 2. Document base                                                     */
/* ------------------------------------------------------------------ */
.w-doc, .w-doc body { margin: 0; }
.w-doc {
  color: var(--w-ink);
  background: var(--w-ground);
  font-family: var(--w-font-body);
  font-size: var(--w-t-body);
  line-height: var(--w-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: light dark;
}
.w-doc *, .w-doc *::before, .w-doc *::after { box-sizing: border-box; }
/* Arabic is never justified, never letter-spaced. */
.w-doc:lang(ar), .w-doc [lang="ar"] { text-align: start; letter-spacing: 0; text-justify: none; }
.w-doc :is(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ora-border-focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.w-skip {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100;
  transform: translateY(-160%); background: var(--ora-accent-cta); color: var(--ora-text-on-cta);
  padding: 10px 16px; border-radius: var(--w-radius-pill); font-weight: 700; text-decoration: none;
}
.w-skip:focus { transform: none; }

/* ------------------------------------------------------------------ */
/* 3. Typography                                                        */
/* ------------------------------------------------------------------ */
.w-display { font-family: var(--w-font-display-en); font-weight: 700; line-height: var(--w-lh-display); letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.w-display:lang(ar), [lang="ar"] .w-display { font-family: var(--w-font-display-ar); font-weight: 800; letter-spacing: 0; line-height: 1.22; }
.w-hero  { font-size: var(--w-t-hero); }
.w-title { font-size: var(--w-t-title); }
.w-head  { font-size: var(--w-t-head); }
.w-lead  { font-size: var(--w-t-lead); line-height: 1.6; color: var(--w-ink-soft); max-inline-size: 46ch; margin: 0; }
.w-body  { font-size: var(--w-t-body); max-inline-size: 62ch; margin: 0; }
.w-small { font-size: var(--w-t-small); }
.w-micro { font-size: var(--w-t-micro); color: var(--w-ink-soft); }
.w-kicker { font-size: var(--w-t-small); font-weight: 700; color: var(--ora-accent-text); margin: 0 0 var(--ora-space-2); }
.w-num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
/* the accent word: the identity's violet, not a gradient */
.w-accent { color: var(--ora-accent-text); }

/* ------------------------------------------------------------------ */
/* 4. The world: sky, horizon, skyline, haze, floor                     */
/* ------------------------------------------------------------------ */
.w-world { position: relative; isolation: isolate; overflow: clip; min-block-size: 100svh; background: var(--w-ground); }
/* the atmosphere is one viewport tall: the place you arrive in. Everything after it stands on the ground. */
.w-atmos { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 100svh; z-index: 0; pointer-events: none; }
.w-atmos > .w-layer { position: absolute; inset: 0; }
.w-atmos > :is(.w-horizon, .w-skyline, .w-lights, .w-haze, .w-floor) { inset-block-start: auto; }
.w-sky {
  z-index: 0;
  background:
    radial-gradient(120% 70% at 50% 100%, var(--w-horizon) 0%, transparent 55%),
    radial-gradient(70% 60% at 72% 74%, var(--w-sky-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--w-sky-zenith) 0%, var(--w-sky-mid) 38%, var(--w-sky-glow) 60%, var(--w-horizon) 73%, var(--w-ground-deep) 86%, var(--w-ground) 100%);
  transition: filter var(--w-dur-world) var(--w-ease-world);
}
[dir="ltr"] .w-sky { background:
    radial-gradient(120% 70% at 50% 100%, var(--w-horizon) 0%, transparent 55%),
    radial-gradient(70% 60% at 28% 74%, var(--w-sky-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--w-sky-zenith) 0%, var(--w-sky-mid) 38%, var(--w-sky-glow) 60%, var(--w-horizon) 73%, var(--w-ground-deep) 86%, var(--w-ground) 100%); }
/* the horizon line sits at 74% of the viewport: sky above it, city on it, ground below it */
.w-horizon {
  z-index: 1; inset-block-start: auto; inset-block-end: 20%; block-size: 40%;
  background:
    radial-gradient(70% 34% at 50% 84%, var(--w-horizon-hot) 0%, var(--w-horizon) 30%, transparent 62%),
    linear-gradient(180deg, transparent, rgb(var(--w-glow) / .10));
  mix-blend-mode: screen;
}
.w-skyline {
  z-index: 2; inset-block-start: auto; inset-block-end: 26%; block-size: min(34vh, 340px);
  /* the silhouette is a mask so its colour is a token (dusk: near-black violet, dawn: silver) */
  background-color: var(--w-silhouette);
  -webkit-mask: url("/assets/brand/skyline-riyadh.svg") center bottom / auto 100% repeat-x;
  mask: url("/assets/brand/skyline-riyadh.svg") center bottom / auto 100% repeat-x;
}
.w-haze {
  z-index: 3; inset-block-start: auto; block-size: 46%;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--w-haze) 40%, transparent) 42%, color-mix(in srgb, var(--w-ground) 85%, transparent) 62%, var(--w-ground) 100%);
}
.w-floor {
  z-index: 4; inset-block-start: auto; block-size: 30%;
  background:
    radial-gradient(46% 80% at 50% 100%, rgb(var(--w-glow) / .45) 0%, transparent 70%),
    linear-gradient(180deg, transparent, var(--w-ground-deep));
}
/* city lights: a scatter of warm points along the skyline, no image needed */
.w-lights {
  z-index: 2; inset-block-start: auto; inset-block-end: 26%; block-size: min(26vh, 260px); opacity: .6;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 62%, var(--w-city-light) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 23% 71%, var(--w-city-light) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 31% 55%, var(--w-horizon-hot) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 44% 66%, var(--w-city-light) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 57% 58%, var(--w-horizon-hot) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 66% 72%, var(--w-city-light) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 78% 60%, var(--w-city-light) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 89% 68%, var(--w-horizon-hot) 50%, transparent 52%);
  background-size: 520px 100%;
}
/* world states — the environment is what changes when the visitor acts */
.w-world[data-world="working"] .w-sky { filter: saturate(.85) brightness(.9); }
.w-world[data-world="night"] .w-sky { filter: brightness(.7) saturate(.8); }

/* ------------------------------------------------------------------ */
/* 5. Materials                                                         */
/* ------------------------------------------------------------------ */
.w-glass, .w-pane, .w-plate, .w-veil {
  border: var(--w-edge);
  -webkit-backdrop-filter: blur(var(--w-blur)) saturate(140%);
  backdrop-filter: blur(var(--w-blur)) saturate(140%);
  color: var(--w-ink);
}
.w-veil  { background: rgb(var(--w-glass) / .10); border-radius: var(--w-radius-pane); box-shadow: var(--w-depth-1); }
.w-pane  { background: rgb(var(--w-glass) / .18); border-radius: var(--w-radius-pane); box-shadow: var(--w-depth-2); }
.w-plate { background: rgb(var(--w-glass) / .28); border-radius: var(--w-radius-plate); box-shadow: var(--w-depth-3); }
.w-solid { background: color-mix(in srgb, var(--ora-surface-raised) 92%, transparent); border: 1px solid var(--ora-border-subtle); border-radius: var(--w-radius-pane); box-shadow: var(--w-depth-2); color: var(--ora-text-primary); }
/* a black canvas: the one surface where an owner-supplied dark raster is allowed unchanged */
.w-canvas-black { background: #000; color: #fff; border-radius: var(--w-radius-pane); }
.w-pill { border-radius: var(--w-radius-pill); }
.w-hairline { block-size: 1px; background: linear-gradient(90deg, transparent, rgb(var(--w-glass-edge) / .35), transparent); }

/* controls on glass */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 48px; padding-inline: 22px; border-radius: var(--w-radius-pill);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  border: var(--w-edge); background: rgb(var(--w-glass) / .16); color: var(--w-ink);
  transition: transform var(--w-dur-micro) var(--w-ease-micro), background-color var(--w-dur-micro), box-shadow var(--w-dur-micro);
}
.w-btn:hover { transform: translateY(-2px); background: rgb(var(--w-glass) / .26); }
.w-btn--primary { background: var(--ora-accent-cta); border-color: transparent; color: var(--ora-text-on-cta); box-shadow: 0 14px 34px rgb(var(--w-glow) / .35); }
.w-btn--primary:hover { background: var(--ora-accent-cta-hover); }
.w-btn[aria-pressed="true"] { background: var(--ora-accent-cta); border-color: transparent; color: var(--ora-text-on-cta); }
.w-btn svg { inline-size: 18px; block-size: 18px; }
.w-chip { min-block-size: 44px; padding-inline: 16px; font-weight: 600; font-size: var(--w-t-small); }
.w-icon { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ */
/* 6. Actors: Director and Orb                                          */
/* ------------------------------------------------------------------ */
.w-director { position: relative; z-index: 10; display: block; inline-size: 100%; height: auto; filter: drop-shadow(0 30px 60px rgb(var(--w-shadow) / .45)); transform-origin: bottom center; transition: transform var(--w-dur-actor) var(--w-ease-actor), opacity var(--w-dur-actor); }
.w-orb { position: relative; z-index: 11; inline-size: 96px; block-size: 96px; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; transition: inset var(--w-dur-world) var(--w-ease-world), inline-size var(--w-dur-actor) var(--w-ease-actor), block-size var(--w-dur-actor) var(--w-ease-actor); }
.w-orb img { inline-size: 100%; height: auto; display: block; filter: drop-shadow(0 12px 28px rgb(var(--w-glow) / .55)); }
.w-orb::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgb(var(--w-glass-edge) / .35); transition: inset var(--w-dur-actor) var(--w-ease-actor), opacity var(--w-dur-actor); }
.w-orb[data-orb="idle"]     { animation: w-breathe 6s ease-in-out infinite; }
.w-orb[data-orb="listening"]::after { animation: w-pulse 1.6s ease-out infinite; }
.w-orb[data-orb="working"]  { animation: none; }
.w-orb[data-orb="working"]::after { animation: w-pulse 1s ease-out infinite; }
.w-orb[data-orb="done"] img { filter: drop-shadow(0 12px 28px rgb(var(--w-glow) / .9)); }
@keyframes w-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes w-pulse { 0% { opacity: .8; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.8); } }

/* ------------------------------------------------------------------ */
/* 7. Motion primitives                                                 */
/* ------------------------------------------------------------------ */
.w-rise { opacity: 0; transform: translateY(18px); transition: opacity var(--w-dur-actor) var(--w-ease-actor), transform var(--w-dur-actor) var(--w-ease-actor); }
.w-rise.is-in { opacity: 1; transform: none; }
.w-morph { transition: transform var(--w-dur-world) var(--w-ease-world), opacity var(--w-dur-world) var(--w-ease-world), inset var(--w-dur-world) var(--w-ease-world); }
.w-stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* Saudi flag primitive: calm continuous cloth. The emblem/text is supplied as
   an unmodified asset; this only moves the cloth. The wave is one wind
   direction (from the hoist to the fly), slow, with fabric inertia. */
/* the hoist is physical (left) in both reading directions: wind does not mirror with text */
.w-flag { position: relative; inline-size: min(42vw, 360px); aspect-ratio: 3 / 2; transform-origin: 0 50%; direction: ltr; }
.w-flag__cloth { position: absolute; inset: 0; filter: url(#w-cloth); }
.w-flag__cloth > * { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.w-flag__fold { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background: repeating-linear-gradient(100deg, transparent 0 18%, rgb(var(--w-shadow) / .35) 30%, transparent 42%);
  background-size: 200% 100%; animation: w-fold var(--w-dur-flag) linear infinite; }
.w-flag__sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .35;
  background: linear-gradient(100deg, transparent 30%, rgb(var(--w-glass-edge) / .6) 50%, transparent 70%);
  background-size: 220% 100%; animation: w-fold var(--w-dur-flag) linear infinite; }
.w-flag__pole { position: absolute; inset-block: -6% -10%; left: -10px; inline-size: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--w-silver), var(--w-silver-bright), var(--w-silver)); box-shadow: var(--w-depth-1); }
.w-flag--sway { animation: w-sway calc(var(--w-dur-flag) * 1.4) ease-in-out infinite; }
@keyframes w-fold { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@keyframes w-sway { 0%, 100% { transform: rotate(0deg) skewY(0deg); } 50% { transform: rotate(-.6deg) skewY(.8deg); } }

/* ------------------------------------------------------------------ */
/* 8. Chrome: rail and dock                                             */
/* ------------------------------------------------------------------ */
.w-rail { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: var(--w-rail-h); padding-inline: var(--w-gutter); }
.w-dock { position: fixed; inset-block-end: calc(12px + var(--w-safe-b)); inset-inline: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.w-dock > * { pointer-events: auto; }
.w-dock__list { list-style: none; margin: 0; padding: 6px; display: flex; gap: 2px; max-inline-size: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.w-dock__btn { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-inline-size: 72px; min-block-size: 56px; padding: 6px 12px; border: 0; border-radius: var(--w-radius-pill); background: transparent; color: var(--w-ink-soft); font: inherit; font-size: var(--w-t-micro); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color var(--w-dur-micro), color var(--w-dur-micro); }
.w-dock__btn:hover { color: var(--w-ink); }
.w-dock__btn[aria-pressed="true"] { background: var(--ora-accent-cta); color: var(--ora-text-on-cta); }

/* ------------------------------------------------------------------ */
/* 9. Responsive foundation                                             */
/* ------------------------------------------------------------------ */
.w-container { inline-size: min(100% - 2 * var(--w-gutter), var(--w-max)); margin-inline: auto; }
@media (max-width: 1024px) { :root { --w-rail-h: 64px; } .w-atmos { block-size: 118svh; } }
@media (max-width: 640px)  {
  :root { --w-blur: 14px; --w-radius-plate: 24px; }
  .w-flag { inline-size: min(60vw, 260px); }
  /* the dock fits the phone: labels may wrap to two short lines instead of scrolling off */
  .w-dock__list { gap: 0; padding: 4px; }
  .w-dock__btn { min-inline-size: 44px; flex: 1 1 0; padding: 6px 4px; font-size: 10px; line-height: 1.15; white-space: normal; text-align: center; max-inline-size: 84px; }
}

/* ------------------------------------------------------------------ */
/* 10. Reduced motion: the world stands still, the flag holds its form   */
/* ------------------------------------------------------------------ */
/* `data-w-motion="force"` is a QA/dev escape hatch only (motion evidence on a
   reduced-motion machine); production never sets it. */
@media (prefers-reduced-motion: reduce) {
  .w-doc:not([data-w-motion="force"]) *, .w-doc:not([data-w-motion="force"]) *::before, .w-doc:not([data-w-motion="force"]) *::after { transition-duration: .001s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .w-doc:not([data-w-motion="force"]) :is(.w-orb, .w-orb::after, .w-flag, .w-flag__fold, .w-flag__sheen) { animation: none !important; }
  .w-doc:not([data-w-motion="force"]) .w-flag__cloth { filter: none; }
  .w-doc:not([data-w-motion="force"]) .w-rise { opacity: 1; transform: none; }
}