/* Zaheen — coming soon
   Precision Instrument v1.0. Every value traces to css/tokens.css:
   spacing 4/8/14/22/36 · radius 0 · easing cubic-bezier(0.2,0,0,1)
   Only cyan animates. Everything else holds still. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  background: var(--z-ink-900);
  color: var(--z-text-on-dark);
  font-family: var(--z-font-text);
  font-size: 16px;
  line-height: var(--z-leading-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- field + scrim ---------- */

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 11, 13, 0.55) 0%, rgba(10, 11, 13, 0) 140px),
    linear-gradient(to top, rgba(10, 11, 13, 0.45) 0%, rgba(10, 11, 13, 0) 110px),
    radial-gradient(ellipse 70% 60% at 38% 52%,
      rgba(10, 11, 13, 0.62) 0%,
      rgba(10, 11, 13, 0.30) 55%,
      rgba(10, 11, 13, 0) 100%);
}

html[dir="rtl"] .scrim {
  background:
    linear-gradient(to bottom, rgba(10, 11, 13, 0.55) 0%, rgba(10, 11, 13, 0) 140px),
    linear-gradient(to top, rgba(10, 11, 13, 0.45) 0%, rgba(10, 11, 13, 0) 110px),
    radial-gradient(ellipse 70% 60% at 62% 52%,
      rgba(10, 11, 13, 0.62) 0%,
      rgba(10, 11, 13, 0.30) 55%,
      rgba(10, 11, 13, 0) 100%);
}

/* ---------- bezel ticks ---------- */

.tick {
  position: fixed;
  width: 14px;
  height: 14px;
  z-index: 2;
  border-color: var(--z-ink-600);
  border-style: solid;
  border-width: 0;
}
.tick-tl { top: 22px;    left: 22px;   border-top-width: 1px; border-left-width: 1px; }
.tick-tr { top: 22px;    right: 22px;  border-top-width: 1px; border-right-width: 1px; }
.tick-bl { bottom: 22px; left: 22px;   border-bottom-width: 1px; border-left-width: 1px; }
.tick-br { bottom: 22px; right: 22px;  border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- page grid ---------- */

.page {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px;
}

/* ---------- header / lockup ---------- */

.site-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lockup-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lockup-latin {
  font-family: var(--z-font-display);
  font-weight: var(--z-weight-display);
  font-size: 22px;
  letter-spacing: var(--z-tracking-wordmark);
  line-height: 1;
  color: var(--z-text-on-dark);
}

.lockup-arabic {
  font-family: var(--z-font-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: var(--z-accent-500);
}

/* Arabic-lead lockup: same mirrored layout, Arabic on top and larger.
   The mark itself is never mirrored. */
html[dir="rtl"] .lockup-text { gap: 4px; }
html[dir="rtl"] .lockup-latin { font-size: 14px; letter-spacing: -0.03em; color: var(--z-ink-200); order: 2; }
html[dir="rtl"] .lockup-arabic { font-size: 21px; order: 1; }

/* logo build — strokes wipe along their own 45° axis, left then right,
   240ms each, 60ms stagger; shadow bar fades in after. Cyan stroke and
   the build sequence are the canonical exceptions that may move. */
.mark-left,
.mark-right {
  stroke-dasharray: 34;
  stroke-dashoffset: 0;
}
.mark-shadow { opacity: 0.32; }

html.js .mark-left  { stroke-dashoffset: 34; animation: mark-wipe var(--z-duration-logo-stroke) var(--z-ease) 120ms forwards; }
html.js .mark-right { stroke-dashoffset: 34; animation: mark-wipe var(--z-duration-logo-stroke) var(--z-ease) 180ms forwards; }
html.js .mark-shadow { opacity: 0; animation: mark-shadow-in var(--z-duration-logo-stroke) var(--z-ease) 420ms forwards; }

@keyframes mark-wipe { to { stroke-dashoffset: 0; } }
@keyframes mark-shadow-in { to { opacity: 0.32; } }

/* ---------- header right ---------- */

.head-right {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 8px;
}

.mono-data {
  font-family: var(--z-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: var(--z-leading-data);
  font-variant-numeric: tabular-nums;
  color: var(--z-text-muted);
}

.lang-toggle {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--z-radius-0);
  cursor: pointer;
  color: var(--z-text-on-dark);
  font-family: var(--z-font-text); /* Arabic label — JetBrains Mono has no Arabic glyphs */
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  padding: 8px 4px;
  min-height: 36px;
  transition: border-color var(--z-duration-hover) var(--z-ease);
}

.lang-toggle.is-latin {
  font-family: var(--z-font-mono);
  font-weight: 500;
  letter-spacing: var(--z-tracking-label);
  text-transform: uppercase;
}

.lang-toggle:hover { border-bottom-color: var(--z-accent-500); }

.lang-toggle:focus-visible {
  outline: none;
  border-bottom-color: var(--z-accent-500);
  box-shadow: 0 0 0 3px var(--z-accent-800);
}

/* ---------- hero ---------- */

.hero {
  max-width: 760px;
}

.eyebrow {
  font-family: var(--z-font-mono);
  font-weight: var(--z-weight-label);
  font-size: 12px;
  letter-spacing: var(--z-tracking-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--z-text-muted);
  margin-bottom: 22px;
}

/* Arabic eyebrow: script branch — Plex 600, no added tracking
   (letter-spacing breaks Arabic joining). */
html[lang="ar"] .eyebrow {
  font-family: var(--z-font-text);
  font-weight: 600;
  letter-spacing: 0;
}

.display {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.display-latin {
  font-family: var(--z-font-display);
  font-weight: var(--z-weight-display);
  font-size: clamp(56px, 9vw, 96px);
  letter-spacing: var(--z-tracking-display);
  line-height: var(--z-leading-display);
  color: var(--z-text-on-dark);
}

.display-arabic {
  font-family: var(--z-font-text);
  font-weight: 600;
  font-size: clamp(56px, 6.5vw, 72px);
  line-height: 1.15;
  color: var(--z-accent-500);
}

/* Arabic leads in RTL: sizes swap, order swaps.
   The Latin line keeps LTR bidi so its period stays on the right side of the word. */
html[dir="rtl"] .display-latin  { order: 2; font-size: clamp(56px, 6.5vw, 72px); direction: ltr; text-align: right; }
html[dir="rtl"] .display-arabic { order: 1; font-size: clamp(56px, 9vw, 92px); line-height: 1.2; }

.body-copy {
  font-size: 16px;
  line-height: var(--z-leading-body);
  color: var(--z-ink-200);
  max-width: 44ch;
}

html[lang="ar"] .body-copy {
  font-size: 17.28px; /* 1.08 × 16 — Arabic optical ratio */
  line-height: var(--z-leading-body-ar);
}

/* ---------- contact ---------- */

.contact {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.contact-label {
  font-family: var(--z-font-mono);
  font-weight: var(--z-weight-label);
  font-size: 12px;
  letter-spacing: var(--z-tracking-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--z-text-muted);
}

html[lang="ar"] .contact-label {
  font-family: var(--z-font-text);
  font-weight: 600;
  letter-spacing: 0;
}

.contact-link {
  font-family: var(--z-font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: var(--z-leading-data);
  color: var(--z-accent-500); /* link on dark */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: border-color var(--z-duration-hover) var(--z-ease);
}

.contact-link:hover { border-bottom-color: var(--z-accent-500); }

.contact-link:focus-visible {
  outline: none;
  border-bottom-color: var(--z-accent-500);
  box-shadow: 0 0 0 3px var(--z-accent-800);
}

/* ---------- footer ---------- */

.site-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-top: 1px solid var(--z-ink-700);
  padding-top: 22px;
}

.status {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* square, because square is the brand */
.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--z-accent-500);
}

html.js .pulse-dot { animation: inference-pulse var(--z-duration-pulse) var(--z-ease) infinite; }

@keyframes inference-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.25; }
  100% { opacity: 1; }
}

.status-label {
  font-family: var(--z-font-mono);
  font-weight: var(--z-weight-label);
  font-size: 12px;
  letter-spacing: var(--z-tracking-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--z-text-muted);
}

html[lang="ar"] .status-label {
  font-family: var(--z-font-text);
  font-weight: 600;
  letter-spacing: 0;
}

.telemetry {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.clock {
  font-family: var(--z-font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: var(--z-leading-data);
  font-variant-numeric: tabular-nums;
  color: var(--z-accent-500); /* live data is cyan */
}

/* ---------- reveals — opacity only; nothing repositions ---------- */

html.js .reveal { opacity: 0; }

html.js .reveal.is-in {
  animation: reveal-in var(--z-duration-page) var(--z-ease) forwards;
}

html.js .r1.is-in { animation-delay: 360ms; }
html.js .r2.is-in { animation-delay: 420ms; }
html.js .r3.is-in { animation-delay: 480ms; }
html.js .r4.is-in { animation-delay: 540ms; }
html.js .r5.is-in { animation-delay: 600ms; }
html.js .r6.is-in { animation-delay: 660ms; }

@keyframes reveal-in { to { opacity: 1; } }

/* language swap crossfade — page transition, 320ms total */
html.js .page.is-swapping .hero,
html.js .page.is-swapping .site-foot .status,
html.js .page.is-swapping .lockup-text {
  transition: opacity 160ms var(--z-ease);
  opacity: 0;
}
html.js .page .hero,
html.js .page .site-foot .status,
html.js .page .lockup-text {
  transition: opacity 160ms var(--z-ease);
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .page { padding: 22px; }
  .coords { display: none; }
  .tick { display: none; }
  .lang-toggle { min-height: 44px; min-width: 44px; }
  .site-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .display-latin { font-size: clamp(40px, 11.5vw, 56px); }
  .display-arabic { font-size: clamp(40px, 9vw, 56px); }
  html[dir="rtl"] .display-latin  { font-size: clamp(40px, 9vw, 56px); }
  html[dir="rtl"] .display-arabic { font-size: clamp(40px, 11.5vw, 56px); }
}

/* ---------- reduced motion: the field freezes, nothing else moves ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js .mark-left,
  html.js .mark-right,
  html.js .mark-shadow,
  html.js .pulse-dot,
  html.js .reveal,
  html.js .reveal.is-in {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
  html.js .mark-shadow { opacity: 0.32; }
  html.js .page.is-swapping .hero,
  html.js .page.is-swapping .site-foot .status,
  html.js .page.is-swapping .lockup-text { transition: none; opacity: 1; }
}