/* ============================================================
   ORBIT — BASE / LAYOUT / TYPE  (ui-ux layer)
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--space-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;                 /* replaced by custom cursor on pointer devices */
}
@media (hover: none), (pointer: coarse) { body { cursor: auto; } }

/* deep-space atmosphere behind everything */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 700px at 78% -8%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 60%),
    radial-gradient(1000px 620px at 8% 108%, color-mix(in srgb, var(--cyan-deep) 16%, transparent), transparent 60%),
    var(--space-900);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 640px at 80% -10%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%),
    radial-gradient(900px 560px at 6% 110%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 60%),
    var(--space-900);
}

/* T7 — film grain overlay (forged texture) */
.grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background-image: url("../assets/img/texture/grain.png");
  background-size: 260px 260px;
  opacity: 0.05; mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { .grain { opacity: 0.035; } }

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

a { color: var(--cyan); text-decoration: none; }
::selection { background: var(--violet-bright); color: #fff; }

/* custom scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--space-950); }
::-webkit-scrollbar-thumb {
  background: var(--space-720); border-radius: 99px;
  border: 3px solid var(--space-950);
}
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

/* ---------- TYPE ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--text);
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.015em; }
p { text-wrap: pretty; }

.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: var(--s-3);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.lead { font-size: var(--step-1); color: var(--text-mid); line-height: 1.6; }
.text-muted { color: var(--text-muted); }
.accent { color: var(--cyan); }
.violet { color: var(--violet-hi); }

/* gradient / image-clipped display text */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vh, 148px); position: relative; }
.section--tight { padding-block: clamp(48px, 7vh, 92px); }

.section-head { max-width: 760px; margin-bottom: var(--s-12); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--s-4); }
.section-head p { margin-top: var(--s-5); }

/* utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: 10000;
  background: var(--violet); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-sm); transition: top var(--t) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px;
}

/* T5 — split-reveal primitives (JS adds .is-in) */
.reveal .line, .reveal .word { display: inline-block; }
.reveal .mask { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal .word { transform: translateY(112%); transition: transform 0.9s var(--ease-out); }
.reveal.is-in .word { transform: translateY(0); }
.rise { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal .word { transform: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
}