/* ==========================================================================
   InVer_OS — shared site header
   --------------------------------------------------------------------------
   ONE menu bar for every page. Markup is identical everywhere (behaviour lives
   in scripts/site-header.js, and this file is the only place the bar is styled.
   Do not restyle it per page.

   Everything is namespaced (.site-header / .site-brand / .site-nav /
   .site-subnav) so page stylesheets cannot leak in and this file cannot leak
   out. It deliberately does not reuse .wrap, .btn, .nav or .brand.

   Two skins, the same two the homepage has always had:
     html[data-sh-phase="system"]   corruption < 50   teal, NYXERIN
     (default / "corrupt")          corruption >= 50  pink, Hacked
   scripts/site-header.js sets the attribute on every page from the stored
   corruption value, so the bar looks the same wherever you navigate.

   Colours: on the homepage main.js keeps --pink / --green / --pre50-* live on
   :root and the bar simply inherits them. On every other page
   site-header.js publishes the same mix as --sh-* overrides.
   ========================================================================== */

@font-face {
  font-family: "Hacked";
  src: url("../fonts/HACKED.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "NYXERIN";
  src: url("../fonts/NYXERIN.otf") format("opentype");
  font-display: swap;
}

/* ------------------------------------------------------------- tokens ---- */

.site-header,
.site-subnav {
  --_accent: var(--sh-accent, var(--pink, #ff2492));
  --_green: var(--sh-green, var(--green, #7dff2b));
  --_mint: var(--sh-mint, var(--mint, #caffab));
  --_text: var(--sh-text, var(--pre50-text, #ffffff));
  --_line: var(--sh-border, var(--pre50-border, rgba(255, 36, 146, .48)));
  --_glow: var(--sh-shadow, var(--pre50-shadow, rgba(255, 36, 146, .08)));
  --_pinkglow: var(--sh-pink-shadow, var(--pre50-pink-shadow, rgba(255, 36, 146, .22)));

  --_display: "Hacked", Impact, "Arial Black", sans-serif;
  --_display-spacing: .035em;
  --_display-weight: 400;
  --_body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --_link: rgba(255, 255, 255, .62);
  --_sub: var(--_green);
  --_cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));

  --sh-gutter: 18px;
  --sh-max: 1260px;
}

html[data-sh-phase="system"] .site-header,
html[data-sh-phase="system"] .site-subnav {
  --_display: "NYXERIN", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --_display-spacing: .08em;
  --_link: rgba(219, 252, 255, .76);
  --_sub: rgba(219, 252, 255, .76);
}

.site-header,
.site-header *,
.site-subnav,
.site-subnav * {
  box-sizing: border-box;
}

.site-header [hidden],
.site-subnav [hidden] {
  display: none !important;
}

/* ---------------------------------------------------------- container ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--_body);
  font-size: 16px;           /* pages set different body sizes; nothing in here may inherit them */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  word-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-rendering: auto;
  font-kerning: auto;
  font-feature-settings: normal;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  border-bottom: 1px solid rgba(255, 36, 146, .18);
  background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .34));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: border-color .7s ease, box-shadow .7s ease;
}

/* The homepage keeps its bar fixed over the hero; its layout is built around that. */
.site-header--fixed {
  position: fixed;
  inset: 0 0 auto 0;
}

html[data-sh-phase="system"] .site-header {
  border-bottom-color: var(--_line);
  background: linear-gradient(180deg, rgba(0, 12, 18, .84), rgba(0, 12, 18, .42));
  box-shadow: 0 0 26px var(--_pinkglow);
}

/* ----------------------------------------------------------- bar row ---- */

.site-header__bar {
  position: relative;
  width: min(var(--sh-max), calc(100% - (var(--sh-gutter) * 2)));
  margin-inline: auto;
  min-height: 82px;
  display: grid;
  grid-template-columns: 402px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}

/* -------------------------------------------------------------- brand ---- */

.site-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.site-brand__mark {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 36, 146, .52);
  background:
    radial-gradient(circle at 55% 45%, rgba(255, 36, 146, .42), transparent 50%),
    rgba(0, 0, 0, .72);
  clip-path: var(--_cut);
  box-shadow: 0 0 20px rgba(255, 36, 146, .22);
  color: var(--_green);
  font-weight: 950;
  transition: border-color .7s ease, box-shadow .7s ease;
}

html[data-sh-phase="system"] .site-brand__mark {
  border-color: var(--_line);
  box-shadow: 0 0 0 1px var(--_glow), 0 18px 44px rgba(0, 0, 0, .34), 0 0 34px var(--_glow), 0 0 30px var(--_pinkglow);
}

.site-brand__mark img {
  display: block;
  width: 82%;
  height: 82%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 36, 146, .45));
}

.site-brand__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 328px;
}

.site-brand__word,
.site-brand__sub {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.site-brand__word {
  padding-bottom: .16em;      /* keeps the underscore of INVER_OS inside the clip box ... */
  margin-bottom: -.16em;      /* ... without changing the height of the bar */
  font-family: var(--_display);
  font-weight: var(--_display-weight);
  letter-spacing: var(--_display-spacing);
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1.14;
  color: #fff;
}

html[data-sh-phase="system"] .site-brand__word {
  font-size: clamp(18px, 2.4vw, 34px);
  line-height: 1;
}

.site-brand__sub {
  margin-top: 8px;
  font-family: var(--_body);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--_sub);
  transition: color .7s ease;
}

/* Phone/tablet: a subtitle that does not fit scrolls instead of being cut off. */
.site-brand__sub-track {
  display: inline-flex;
  align-items: center;
  gap: var(--sh-marquee-gap, 28px);
  white-space: nowrap;
  padding-right: var(--sh-marquee-gap, 28px);
  will-change: transform;
}

.site-brand__sub.is-marquee .site-brand__sub-track {
  animation: siteHeaderSubMarquee var(--sh-marquee-duration, 12s) linear infinite;
}

@keyframes siteHeaderSubMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------- nav ---- */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: clamp(14px, 1.8vw, 24px);
  min-width: 0;
  margin: 0;
  padding: 8px 4px;          /* room for focus rings inside the clip below */
  overflow: hidden;          /* never paint over the buttons, whatever a page adds there */
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-family: var(--_display);
  font-weight: var(--_display-weight);
  font-size: clamp(11px, .9vw, 14px);
  letter-spacing: .09em;
  line-height: 1.08;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--_link);
  transition: color .2s ease, text-shadow .2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  color: var(--_mint);
  text-shadow: 0 0 12px rgba(125, 255, 43, .45);
  text-shadow: 0 0 12px color-mix(in srgb, var(--_green) 45%, transparent);
}

.site-nav a[aria-current="page"] {
  cursor: default;
}

.site-nav a.site-nav__legal {
  font-size: 10px;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .44);
}

.site-nav a.site-nav__legal:hover,
.site-nav a.site-nav__legal:focus-visible,
.site-nav a.site-nav__legal[aria-current="page"] {
  color: var(--_mint);
}

/* ------------------------------------------------------------ actions ---- */

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.site-header__btn {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 48%), rgba(0, 0, 0, .46);
  color: rgba(255, 255, 255, .84);
  font-family: var(--_display);
  font-weight: var(--_display-weight);
  font-size: 12px;
  letter-spacing: .13em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  clip-path: var(--_cut);
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.site-header__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .18) 45%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .5s ease;
}

.site-header__btn:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 255, 43, .78);
  box-shadow: 0 0 28px rgba(255, 36, 146, .18), 0 0 22px rgba(125, 255, 43, .08);
}

.site-header__btn:hover::after {
  transform: translateX(130%);
}

.site-header__btn:focus-visible,
.site-nav a:focus-visible,
.site-brand:focus-visible,
.site-subnav a:focus-visible {
  outline: 2px solid var(--_mint);
  outline-offset: 3px;
}

html[data-sh-phase="system"] .site-header__btn {
  font-weight: 800;
  border-color: var(--_line);
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 48%), rgba(84, 255, 215, .10);
  color: #e7feff;
  box-shadow: 0 0 0 1px var(--_glow), 0 18px 44px rgba(0, 0, 0, .34), 0 0 34px var(--_glow), 0 0 30px var(--_pinkglow);
}

/* The person icon before the Patreon button, and the menu it opens:
   Vault, Settings, Preferences. Hangs off the icon like the nav panel does off the bar. */
.site-header__profile-wrap { position: relative; flex: 0 0 auto; display: flex; }
.site-header__profile-wrap[hidden] { display: none; }
.site-header__profile { width: 44px; padding-inline: 0; }
.site-header__profile svg { display: block; }
.site-header__profile[data-current],
.site-header__profile-wrap[data-open] .site-header__profile { border-color: rgba(125, 255, 43, .64); color: var(--_mint); }

.site-header__profile-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 6;
  display: none;
  flex-direction: column;
  min-width: 190px;
  padding: 6px 12px;
  border: 1px solid var(--_line);
  background: #08000c;
  clip-path: var(--_cut);
}

html[data-sh-phase="system"] .site-header__profile-menu { background: #000c12; }

.site-header__profile-wrap[data-open] .site-header__profile-menu { display: flex; }

.site-header__profile-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .84);
  font-family: var(--_display);
  font-weight: var(--_display-weight);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__profile-menu a:last-child { border-bottom: 0; }
.site-header__profile-menu a:hover,
.site-header__profile-menu a:focus-visible,
.site-header__profile-menu a[aria-current="page"] { color: var(--_mint); }
.site-header__profile-menu a:focus-visible { outline: 2px solid var(--_mint); outline-offset: -2px; }

.site-header__profile-menu a[aria-current="page"]::before {
  content: "//";
  margin-right: 8px;
  color: var(--_accent);
}

.site-header__btn.is-logged-in {
  border-color: rgba(125, 255, 43, .64);
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 48%), rgba(125, 255, 43, .12);
  color: var(--_mint);
}

.site-header__btn.is-checking,
.site-header__btn:disabled {
  opacity: .72;
  cursor: progress;
}

/* Roadmap only, and only in its local simulation mode. */
.site-header__btn.is-admin {
  border-color: rgba(154, 60, 255, .68);
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 48%), rgba(154, 60, 255, .16);
  color: #dfbdff;
  box-shadow: 0 0 18px rgba(154, 60, 255, .16);
}

/* Login label: full wording where there is room, short wording on phones. */
.site-header__auth-short { display: none; }

/* Menu toggle: only exists below the desktop breakpoint. */
.site-header__menu { display: none; }

.site-header__menu-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  transition: box-shadow .18s ease, background .18s ease;
}

.site-header[data-menu-open] .site-header__menu {
  border-color: rgba(125, 255, 43, .78);
  color: var(--_mint);
}

/* ------------------------------------------------- desktop fine-tuning ---- */

@media (max-width: 1380px) {
  .site-nav { gap: clamp(10px, 1.2vw, 16px); }
  .site-nav a { font-size: 12px; letter-spacing: .08em; }
}

@media (max-width: 1240px) {
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 11px; letter-spacing: .07em; }
  .site-header__btn { padding: 10px 12px; font-size: 11px; }
}

/* ------------------------------------------------ tablet: menu button ---- */

@media (max-width: 1180px) {
  .site-header,
  .site-subnav {
    --sh-gutter: clamp(14px, 3.2vw, 28px);
  }

  .site-header,
  html[data-sh-phase="system"] .site-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .62));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .site-header__bar {
    min-height: 78px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-brand__mark {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  .site-brand__text { max-width: 284px; }
  .site-brand__sub { font-size: 10px; }

  .site-header__menu { display: inline-flex; }

  /* The links become a dropdown panel hanging off the bar. */
  .site-nav {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 5;
    width: min(320px, 100%);
    max-height: calc(100vh - 110px);
    max-height: calc(100dvh - 110px);
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 12px 10px;
    border: 1px solid var(--_line);
    background: #08000c;
    clip-path: var(--_cut);
  }

  html[data-sh-phase="system"] .site-nav {
    background: #000c12;
  }

  .site-header[data-menu-open] .site-nav {
    display: flex;
  }

  .site-nav a,
  .site-nav a.site-nav__legal {
    min-height: 46px;
    padding: 0 6px;
    font-size: 13px;
    letter-spacing: .1em;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  .site-nav a.site-nav__legal {
    font-size: 11px;
    border-bottom: 0;
  }

  .site-nav a[aria-current="page"]::before {
    content: "//";
    margin-right: 8px;
    color: var(--_accent);
  }
}

/* ------------------------------------------------------------- phones ---- */

@media (max-width: 860px) {
  .site-header__bar { min-height: 74px; }

  .site-brand { gap: 13px; }

  .site-brand__mark {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }

  .site-brand__text { max-width: none; }
  .site-brand__word { font-size: 22px; }

  .site-brand__sub {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: .08em;
  }
}

@media (max-width: 520px) {
  .site-header,
  .site-subnav {
    --sh-gutter: 12px;
  }

  .site-header__bar {
    min-height: 70px;
    column-gap: 8px;
  }

  .site-brand { gap: 11px; }

  .site-brand__mark {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .site-brand__word { font-size: 19px; }

  .site-header__actions { gap: 6px; }

  .site-header__btn {
    padding: 10px 11px;
    font-size: 11px;
    letter-spacing: .1em;
  }

  .site-header__menu-label { display: none; }
  .site-header__menu { width: 44px; padding-inline: 0; }

  .site-header__auth-full { display: none; }
  .site-header__auth-short { display: inline; }

  .site-nav { width: 100%; }
}

@media (max-width: 520px) {
  .site-header__bar:has(.site-header__actions > :nth-child(3):not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    padding-block: 10px;
  }

  .site-header__bar:has(.site-header__actions > :nth-child(3):not([hidden])) .site-header__actions {
    justify-content: flex-start;
  }

  /* the buttons now start at the left edge, so the profile menu opens rightwards */
  .site-header__profile-menu { right: auto; left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-brand__sub.is-marquee .site-brand__sub-track { animation: none; }
  .site-header__btn,
  .site-header__btn::after { transition: none; }
  .site-header__btn:hover { transform: none; }
}

/* ==========================================================================
   Page-local links ("jump to a section of THIS page")
   These used to live inside each page's own menu bar, which is one reason no
   two bars looked alike. They now sit in a slim strip under the global bar:
   same style on every page that has one, and it scrolls away with the page.
   ========================================================================== */

.site-subnav {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(0, 0, 0, .3);
  font-family: var(--_body);
}

.site-subnav__inner {
  width: min(var(--sh-max), calc(100% - (var(--sh-gutter) * 2)));
  margin-inline: auto;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  overflow-x: auto;
  scrollbar-width: none;
}

.site-subnav__inner::-webkit-scrollbar { display: none; }

.site-subnav__label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--_sub);
}

.site-subnav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-family: var(--_display);
  font-weight: var(--_display-weight);
  font-size: 11px;
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--_link);
  transition: color .2s ease, text-shadow .2s ease;
}

.site-subnav a:hover,
.site-subnav a:focus-visible {
  color: var(--_mint);
  text-shadow: 0 0 12px rgba(125, 255, 43, .45);
  text-shadow: 0 0 12px color-mix(in srgb, var(--_green) 45%, transparent);
}