/* Wavematter.ai — site styles. Tokens come from the design system; this file only
   composes layout/rhythm on top of them. No new colors or fonts are introduced. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wm-ink);
  color: var(--wm-paper);
  font-family: var(--wm-font-body);
  font-weight: var(--wm-weight-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
#root { isolation: isolate; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--wm-signal); color: var(--wm-paper); }

/* ---- layout ---- */
.wrap { max-width: var(--wm-maxw); margin: 0 auto; padding: 0 48px; }
.section { padding: 116px 0; position: relative; }
.prog { position: relative; }
/* A different, feathered brand mark behind each section — low-contrast, never busy.
   The four "options for use" marks fill four slots; each page sets a unique, fixed
   slot order via its body class, so the sequence differs page-to-page but is stable. */
:root {
  --mk-if-img: url("assets/interference.svg");   --mk-if-size: 56% auto;
  --mk-wp-img: url("assets/wave-packet.svg");     --mk-wp-size: 80% auto;
  --mk-sp-img: url("assets/superposition.svg");   --mk-sp-size: 80% auto;
  --mk-wf-img: url("assets/wavefront.svg");        --mk-wf-size: 76% auto;
  /* default slot order (overridden per page below) */
  --slot1-img: var(--mk-if-img); --slot1-size: var(--mk-if-size);
  --slot2-img: var(--mk-wp-img); --slot2-size: var(--mk-wp-size);
  --slot3-img: var(--mk-sp-img); --slot3-size: var(--mk-sp-size);
  --slot4-img: var(--mk-wf-img); --slot4-size: var(--mk-wf-size);
}
/* per-page orders — deterministic, unique to each page */
body.pg-home    { --slot1-img: var(--mk-if-img); --slot1-size: var(--mk-if-size); --slot2-img: var(--mk-wp-img); --slot2-size: var(--mk-wp-size); --slot3-img: var(--mk-sp-img); --slot3-size: var(--mk-sp-size); --slot4-img: var(--mk-wf-img); --slot4-size: var(--mk-wf-size); }
body.pg-tech    { --slot1-img: var(--mk-wp-img); --slot1-size: var(--mk-wp-size); --slot2-img: var(--mk-sp-img); --slot2-size: var(--mk-sp-size); --slot3-img: var(--mk-wf-img); --slot3-size: var(--mk-wf-size); --slot4-img: var(--mk-if-img); --slot4-size: var(--mk-if-size); }
body.pg-apps    { --slot1-img: var(--mk-sp-img); --slot1-size: var(--mk-sp-size); --slot2-img: var(--mk-wf-img); --slot2-size: var(--mk-wf-size); --slot3-img: var(--mk-if-img); --slot3-size: var(--mk-if-size); --slot4-img: var(--mk-wp-img); --slot4-size: var(--mk-wp-size); }
body.pg-about   { --slot1-img: var(--mk-wf-img); --slot1-size: var(--mk-wf-size); --slot2-img: var(--mk-if-img); --slot2-size: var(--mk-if-size); --slot3-img: var(--mk-wp-img); --slot3-size: var(--mk-wp-size); --slot4-img: var(--mk-sp-img); --slot4-size: var(--mk-sp-size); }
body.pg-contact { --slot1-img: var(--mk-wp-img); --slot1-size: var(--mk-wp-size); --slot2-img: var(--mk-if-img); --slot2-size: var(--mk-if-size); --slot3-img: var(--mk-sp-img); --slot3-size: var(--mk-sp-size); --slot4-img: var(--mk-wf-img); --slot4-size: var(--mk-wf-size); }
/* edge-fade: a radial gradient composited with the mark so it dissolves toward edges */
:root { --edge-fade: radial-gradient(closest-side, #000 30%, rgba(0,0,0,0) 96%); }
:is(.section, .prog)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--wm-signal); opacity: 0.018;
  --mk-img: var(--slot1-img); --mk-size: var(--slot1-size);
  -webkit-mask: var(--mk-img) no-repeat, var(--edge-fade) no-repeat;
  mask: var(--mk-img) no-repeat, var(--edge-fade) no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  -webkit-mask-size: var(--mk-size), var(--mk-size); mask-size: var(--mk-size), var(--mk-size);
}
:is(.section, .prog):nth-of-type(odd)::before { -webkit-mask-position: right -16px center, right -16px center; mask-position: right -16px center, right -16px center; }
:is(.section, .prog):nth-of-type(even)::before { -webkit-mask-position: left -16px center, left -16px center; mask-position: left -16px center, left -16px center; }
:is(.section, .prog):nth-of-type(4n+2)::before { --mk-img: var(--slot2-img); --mk-size: var(--slot2-size); }
:is(.section, .prog):nth-of-type(4n+3)::before { --mk-img: var(--slot3-img); --mk-size: var(--slot3-size); }
:is(.section, .prog):nth-of-type(4n)::before   { --mk-img: var(--slot4-img); --mk-size: var(--slot4-size); }
/* Wavefield superposition texture — reserved for very large / grid sections */
.tex-field::before { --mk-img: url("assets/wavefield.svg") !important; --mk-size: 96% auto !important; opacity: 0.018; }
.section--paper::before { opacity: 0.016; }
.cta-band::before { display: none; }
:is(.section, .prog) > .wrap, .page-hero .wrap, .contact .wrap { position: relative; z-index: 1; }
.section--tight { padding: 84px 0; }
.section--paper { background: var(--wm-paper); color: var(--wm-ink); }
.section--paper .muted { color: var(--wm-graphite); }
.topline { height: 3px; background: var(--wm-signal); }

/* ---- type ---- */
.eyebrow {
  font-family: var(--wm-font-mono);
  font-size: var(--wm-text-label);
  letter-spacing: var(--wm-tracking-label);
  text-transform: uppercase;
  color: var(--wm-signal-300);
  margin: 0;
}
.section--paper .eyebrow { color: var(--wm-signal); }
.display {
  font-family: var(--wm-font-display);
  font-weight: var(--wm-weight-medium);
  font-size: clamp(44px, 6.4vw, var(--wm-text-display));
  line-height: var(--wm-leading-tight);
  letter-spacing: var(--wm-tracking-display);
  margin: 0;
}
.h1 {
  font-family: var(--wm-font-display);
  font-weight: var(--wm-weight-medium);
  font-size: clamp(34px, 4.4vw, var(--wm-text-h1));
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
}
.h2 {
  font-family: var(--wm-font-display);
  font-weight: var(--wm-weight-medium);
  font-size: var(--wm-text-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
}
.h3 {
  font-family: var(--wm-font-display);
  font-weight: var(--wm-weight-semibold);
  font-size: var(--wm-text-h3);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}
.title { font-family: var(--wm-font-display); font-weight: 500; font-size: var(--wm-text-title); margin: 0; }
.lead {
  font-family: var(--wm-font-body);
  font-weight: var(--wm-weight-light);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: var(--wm-leading-body);
  color: var(--wm-signal-100);
  margin: 0;
}
.section--paper .lead { color: var(--wm-ink-500); }
.body {
  font-family: var(--wm-font-body);
  font-weight: var(--wm-weight-light);
  font-size: var(--wm-text-body);
  line-height: var(--wm-leading-body);
  color: #9a9ca3;
  margin: 0;
}
.section--paper .body { color: var(--wm-graphite); }
.mono {
  font-family: var(--wm-font-mono);
  font-size: var(--wm-text-small);
  letter-spacing: 0.06em;
  color: #6a6d75;
}
.muted { color: #8a8c93; }

/* ---- rule with a signal segment ---- */
.rule { position: relative; height: 1px; background: var(--wm-ink-700); margin: 0; }
.section--paper .rule { background: var(--wm-line); }
.rule::before { content: ""; position: absolute; left: 0; top: -0.5px; width: 96px; height: 2px; background: var(--wm-signal); }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(12,13,16,0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--wm-ink-700);
}
.nav__row { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav__brand { display: inline-flex; align-items: center; gap: 12px; }
.nav__brand-text { font-family: var(--wm-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: var(--wm-paper); }
.nav__brand-text .dot { color: var(--wm-signal); }
.nav__links { display: flex; gap: 36px; }
.nav__link {
  font-family: var(--wm-font-body); font-weight: 400; font-size: 14.5px; color: #9a9ca3;
  position: relative; padding: 6px 0; transition: color .2s ease;
}
.nav__link:hover { color: var(--wm-paper); }
.nav__link--active { color: var(--wm-paper); }
.nav__link--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wm-signal);
}
.nav__cta {
  font-family: var(--wm-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wm-paper); background: var(--wm-signal); padding: 11px 18px; border-radius: var(--wm-radius);
  transition: background .18s ease, transform .12s ease;
}
.nav__cta:hover { background: var(--wm-signal-700); }
.nav__cta:active { transform: translateY(1px); }
.nav__burger { display: none; background: none; border: 0; color: var(--wm-paper); cursor: pointer; padding: 8px; }
.nav__mobile { display: none; }

/* ---- footer ---- */
.footer { background: #08090c; border-top: 1px solid var(--wm-ink-700); padding: 72px 0 40px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer__col h4 { font-family: var(--wm-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #5b5d66; margin: 0 0 16px; font-weight: 500; }
.footer__col a { display: block; font-size: 14px; color: #9a9ca3; padding: 5px 0; transition: color .18s ease; }
.footer__col a:hover { color: var(--wm-paper); }
.footer__base { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--wm-ink-700); }

/* ---- reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { animation: wm-rise .7s cubic-bezier(.22,.61,.36,1) both; }
@keyframes wm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .reveal.in { animation: none; } }

/* ---- chips / glyph rows ---- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--wm-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #8a8c93; border: 1px solid var(--wm-ink-700); border-radius: 999px; padding: 7px 14px;
}
.section--paper .chip { color: var(--wm-graphite); border-color: var(--wm-line); }

/* program / item card */
.pcard {
  background: #101116; border: 1px solid var(--wm-ink-700); border-radius: var(--wm-radius);
  padding: 34px 32px; transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.pcard:hover { border-color: #2b3a55; transform: translateY(-3px); background: #12141b; }
.pcard__domain { font-family: var(--wm-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wm-signal-300); }

/* dividers between grid items */
.divider-grid { display: grid; }
.divider-grid > * { border-right: 1px solid var(--wm-ink-700); padding: 4px 30px; }
.divider-grid > *:first-child { padding-left: 0; }
.divider-grid > *:last-child { border-right: 0; padding-right: 0; }
.section--paper .divider-grid > * { border-color: var(--wm-line); }

a.btn, button.btn {
  font-family: var(--wm-font-display); font-weight: 500; font-size: 15px; line-height: 1;
  padding: 14px 26px; border-radius: var(--wm-radius); cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, transform .12s ease, color .18s ease;
}
.btn--primary { background: var(--wm-paper); color: var(--wm-ink); }
.btn--primary:hover { background: #fff; }
.btn--accent { background: var(--wm-signal); color: var(--wm-paper); }
.btn--accent:hover { background: var(--wm-signal-700); }
.btn--ghost { background: transparent; color: var(--wm-paper); border-color: #34363d; }
.btn--ghost:hover { border-color: #50535c; }
.section--paper .btn--ghost { color: var(--wm-ink); border-color: var(--wm-line); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .section { padding: 76px 0; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__mobile { display: block; border-bottom: 1px solid var(--wm-ink-700); background: rgba(12,13,16,0.96); }
  .nav__mobile a { display: block; padding: 15px 0; color: #c9cbd1; font-size: 16px; border-top: 1px solid var(--wm-ink-700); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .divider-grid > * { border-right: 0; border-bottom: 1px solid var(--wm-ink-700); padding: 22px 0; }
  .divider-grid > *:first-child { padding-top: 0; }
  .divider-grid > *:last-child { border-bottom: 0; }
  /* domains / apps grids use inline offsets — flatten them when stacked so
     items align flush-left instead of hanging-indenting, and drop stray dividers */
  .domains > *, .apps > * {
    padding-left: 0 !important; padding-right: 0 !important;
    border-right: 0 !important;
    padding-top: 24px !important; padding-bottom: 0 !important;
    border-top: 1px solid var(--wm-ink-700);
  }
  .domains > *:first-child, .apps > *:first-child { padding-top: 0 !important; border-top: 0; }
  .section--paper .apps > * { border-top-color: var(--wm-line); }
  /* comfortable tap targets */
  a.btn, button.btn { padding: 15px 24px; }
}
/* Background art: on narrow screens the wavefield fields and section marks are
   width-driven, so they leave vertical gaps. Make them fill the box top-to-bottom. */
@media (max-width: 760px) {
  .page-hero .page-hero__field {
    left: 0 !important;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 52%) !important;
    mask-image: linear-gradient(180deg, transparent, #000 52%) !important;
  }
  :is(.section, .prog)::before {
    -webkit-mask-size: auto 58%, auto 58% !important;
    mask-size: auto 58%, auto 58% !important;
  }
  .tex-field::before {
    -webkit-mask-size: auto 64%, auto 64% !important;
    mask-size: auto 64%, auto 64% !important;
  }
}