/* ==========================================================================
   Optra — core system
   Tokens, reset, typography, gradient field, primitives.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Brand field — sampled from the mark */
  --c-peach:   #fbb277;
  --c-apricot: #f9967a;
  --c-coral:   #f77c83;
  --c-salmon:  #f46e8d;
  --c-rose:    #ef5c9a;
  --c-magenta: #e5429b;

  /* Ink — white only, weighted by opacity */
  --ink:    #ffffff;
  --ink-88: rgba(255, 255, 255, 0.92);
  --ink-72: rgba(255, 255, 255, 0.80);
  --ink-56: rgba(255, 255, 255, 0.68);
  --ink-40: rgba(255, 255, 255, 0.54);
  --ink-28: rgba(255, 255, 255, 0.40);

  /* Surfaces & edges */
  --line:       rgba(255, 255, 255, 0.30);
  --line-soft:  rgba(255, 255, 255, 0.20);
  --line-faint: rgba(255, 255, 255, 0.13);
  --wash:       rgba(255, 255, 255, 0.10);
  --wash-lift:  rgba(255, 255, 255, 0.17);
  --wash-solid: rgba(255, 255, 255, 0.22);

  /* Depth — a single warm shadow colour, layered at four strengths. */
  --shadow-text:    0 1px 2px rgba(134, 24, 72, 0.30), 0 2px 10px rgba(134, 24, 72, 0.18);
  --shadow-display: 0 2px 5px rgba(128, 20, 68, 0.32), 0 10px 32px rgba(128, 20, 68, 0.24);
  --shadow-lift:    0 8px 24px -12px rgba(128, 20, 68, 0.50);
  --shadow-panel:   0 20px 50px -22px rgba(122, 18, 66, 0.62);

  /* Type */
  --font-display: "Gabarito", "Avenir Next", system-ui, sans-serif;
  --font-text: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  /* Fluid display scale — clamps track the viewport, not breakpoints */
  --t-mega: clamp(2.9rem, 7.6vw, 7rem);
  --t-xl:   clamp(2.4rem, 5.6vw, 5.5rem);
  --t-lg:   clamp(1.9rem, 3.4vw, 3.25rem);
  --t-md:   clamp(1.35rem, 1.9vw, 1.75rem);
  --t-body: clamp(1rem, 1.05vw, 1.1875rem);
  --t-sm:   0.9375rem;
  --t-xs:   0.8125rem;
  --t-micro: 0.6875rem;

  /* Space */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 12rem;

  /* Radii — the mark is all lobes; nothing here is sharp */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 36px;  --r-pill: 999px;

  /* Motion */
  --e-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --e-in:   cubic-bezier(0.5, 0, 0.75, 0);
  --d-1: 140ms;  --d-2: 240ms;  --d-3: 420ms;  --d-4: 720ms;

  /* Shell */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1680px;
  --nav-h: 76px;

  color-scheme: light;
}

/* --- Reset -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--c-salmon);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* White on a light field needs help; every descendant inherits this. */
  text-shadow: var(--shadow-text);
  /* `clip`, not `hidden`: hidden would make body a scroll container and
     detach position:fixed from the viewport. */
  overflow-x: clip;
}

/* Class-level `display` otherwise outranks the UA rule for [hidden]. */
[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

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

::selection { background: rgba(255, 255, 255, 0.85); color: var(--c-magenta); }

/* --- Gradient field ----------------------------------------------------- */
/* Fixed, painted once. The waves are the identity; they never animate. */

.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 92% 108%, #d92f8f 0%, rgba(217, 47, 143, 0) 58%),
    radial-gradient(110% 80% at 4% -8%, #fdbe82 0%, rgba(253, 190, 130, 0) 55%),
    linear-gradient(116deg,
      #fbb277 0%, #f99a79 22%, #f78081 44%,
      #f47089 62%, #ef5c9a 80%, #e5429b 100%);
}

.field svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.rule { height: 1px; background: var(--line-soft); border: 0; }

/* --- Typography --------------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.028em;
  text-wrap: balance;
  text-shadow: var(--shadow-display);
}

.display--mega { font-size: var(--t-mega); }
.display--xl   { font-size: var(--t-xl); }
.display--lg   { font-size: var(--t-lg); letter-spacing: -0.022em; line-height: 1.0; }
.display--md   { font-size: var(--t-md); letter-spacing: -0.012em; line-height: 1.15; }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-88);
  text-wrap: pretty;
}

.prose { color: var(--ink-72); text-wrap: pretty; }

/* Metadata voice — mono, spaced, small. Carries labels and structure. */
.meta {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-72);
  font-weight: 400;
  /* Small caps at low weight need a tighter, darker shadow than body copy. */
  text-shadow: 0 1px 2px rgba(120, 18, 64, 0.45);
}

.meta--ink { color: var(--ink-88); }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- Primitives --------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.8125rem 1.375rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    background-color var(--d-2) var(--e-soft),
    border-color var(--d-2) var(--e-soft),
    color var(--d-2) var(--e-soft),
    transform var(--d-2) var(--e-out),
    opacity var(--d-2) var(--e-soft);
}

.btn { box-shadow: var(--shadow-lift); }
.btn:hover { --btn-bg: var(--wash-lift); --btn-bd: var(--ink-40); }
.btn:active { transform: translateY(1px); }

.btn--solid {
  --btn-bg: var(--ink);
  --btn-fg: #c22a7d;
  --btn-bd: transparent;
  text-shadow: none;
  box-shadow: var(--shadow-lift);
}
.btn--solid:hover { --btn-bg: var(--ink); --btn-fg: var(--c-magenta); transform: translateY(-1px); }

.btn--ghost { --btn-bd: transparent; color: var(--ink-72); }
.btn--ghost:hover { --btn-bg: var(--wash); color: var(--ink); }

.btn--sm { padding: 0.5rem 0.875rem; font-size: var(--t-xs); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.42;
  pointer-events: none;
}

/* Text link that draws its underline on approach */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ink-88);
  transition: color var(--d-2) var(--e-soft);
}
.link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-3) var(--e-out);
}
.link:hover { color: var(--ink); }
.link:hover::after { transform: scaleX(1); }

.link__arrow { transition: transform var(--d-3) var(--e-out); }
.link:hover .link__arrow { transform: translateX(4px); }

.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;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--c-magenta);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  transition: transform var(--d-2) var(--e-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Scroll choreography ------------------------------------------------ */
/* Animated elements read scalars the scroll engine writes: --enter rises 0→1
   as the element arrives, --exit rises 0→1 as it leaves. Both are pure
   functions of scroll position, so the motion is reversible by construction. */

[data-scroll] {
  --p: 0;
  --enter: 0;
  --exit: 0;
  will-change: transform, opacity;
}

[data-scroll="rise"] {
  opacity: calc(var(--enter) * (1 - var(--exit) * 0.9));
  transform: translate3d(0, calc((1 - var(--enter)) * 3.5rem + var(--exit) * -2rem), 0);
}

[data-scroll="settle"] {
  opacity: calc(var(--enter) * (1 - var(--exit) * 0.85));
  transform:
    translate3d(0, calc((1 - var(--enter)) * 2rem), 0)
    scale(calc(0.97 + var(--enter) * 0.03));
}

[data-scroll="recede"] {
  opacity: calc(var(--enter) * (1 - var(--exit)));
  transform:
    translate3d(0, calc(var(--exit) * -3rem), 0)
    scale(calc(1 - var(--exit) * 0.06));
  filter: blur(calc(var(--exit) * 6px));
}

[data-scroll="drift"] {
  --drift: 6rem;
  transform: translate3d(calc((0.5 - var(--p)) * var(--drift) * -1), 0, 0);
}

/* Staggered children — each child offsets its arrival along --enter */
[data-stagger] > * {
  --i: 0;
  --local: clamp(0, calc((var(--enter) - var(--i) * 0.09) / 0.55), 1);
  opacity: calc(var(--local) * (1 - var(--exit) * 0.9));
  transform: translate3d(0, calc((1 - var(--local)) * 2.25rem), 0);
  will-change: transform, opacity;
}

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-scroll],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Shown while a market-data widget loads, removed once its frame paints. */
.tv-loading {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 8rem;
  color: var(--ink-40);
}