/* ============================================================
   HEWCORE, shared layer for the redesigned surfaces
   (the homepage and /investors). Tokens are taken from the
   Hewcore design system handoff; the inner pages still run
   on style.css until they are redesigned.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- base theme ---- */
  --paper: #28313d;   --paper-rgb: 40, 49, 61;
  --panel: #181e25;   --panel-rgb: 24, 30, 37;
  --panel-2: #202833;
  --ink: #e8ecef;     --ink-rgb: 232, 236, 239;
  --gray: #a4aeb9;
  --orange: #fc8603;  --orange-rgb: 252, 134, 3;
  --border: rgba(var(--ink-rgb), 0.16);

  /* ---- section bands, lightest to darkest ---- */
  --band-1: #2e3a4a;  --band-1-rgb: 46, 58, 74;
  --band-2: #28313d;  --band-2-rgb: 40, 49, 61;
  --band-3: #1f2731;  --band-3-rgb: 31, 39, 49;
  --band-4: #171d25;  --band-4-rgb: 23, 29, 37;
  --deep-rgb: 9, 14, 24;
  --sky-rgb: 96, 136, 184;

  /* ---- division accents ---- */
  --lcjr-green: #1abe57;  --lcjr-green-rgb: 26, 190, 87;
  --complete-green: #5ac74a;

  /* ---- classification tiers ---- */
  --tier-restricted: #b3261e;    --tier-restricted-ink: #ffffff;
  --tier-confidential: #fc8603;  --tier-confidential-ink: #1c1d20;
  --tier-internal: #2f5f99;      --tier-internal-ink: #ffffff;
  --tier-public: #1abe57;        --tier-public-ink: #10301c;

  /* ---- ink alphas ---- */
  --ink-62: rgba(var(--ink-rgb), 0.62);
  --ink-50: rgba(var(--ink-rgb), 0.5);
  --ink-45: rgba(var(--ink-rgb), 0.45);
  --ink-28: rgba(var(--ink-rgb), 0.28);
  --ink-22: rgba(var(--ink-rgb), 0.22);
  --ink-14: rgba(var(--ink-rgb), 0.14);
  --ink-08: rgba(var(--ink-rgb), 0.08);

  /* ---- wash: the band-2 ground under each holding panel ---- */
  --wash-2:
    radial-gradient(ellipse 600px 480px at 5% 92%, rgba(var(--orange-rgb), 0.115), transparent 64%),
    radial-gradient(ellipse 1040px 680px at 18% -12%, rgba(var(--sky-rgb), 0.130), transparent 68%),
    radial-gradient(ellipse 1180px 800px at 106% 104%, rgba(var(--deep-rgb), 0.54), transparent 72%),
    radial-gradient(ellipse 760px 520px at 100% -6%, rgba(var(--deep-rgb), 0.36), transparent 68%);

  /* ---- type ---- */
  --font-display: 'Archivo', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-body: 'DM Sans', sans-serif;
  --label-xs: 8.5px;

  /* ---- space and motion ---- */
  --gutter: 56px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.2s ease;
  --pulse-dur: 2.4s;
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --label-xs: 9.5px; }
}

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

html { background: var(--band-4); }

body {
  margin: 0;
  background: var(--band-4);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--orange); }
button { font: inherit; color: inherit; }
img { display: block; }
::selection { background: var(--ink); color: var(--panel-2); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.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;
}

/* ---- display type ---- */
.hc-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
  color: var(--ink);
  margin: 0;
}
.hc-outline { color: var(--gray); }

/* ---- mono label: the 9px tracked caps used everywhere ---- */
.hc-mono {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---- status chip ---- */
.hc-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  font-family: var(--font-mono);
  font-size: var(--label-xs);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gray);
}
.hc-chip::before { content: ''; width: 6px; height: 6px; background: currentColor; flex: none; }
.hc-chip--accent { color: var(--orange); border-color: rgba(var(--orange-rgb), 0.45); }
.hc-chip--green  { color: var(--lcjr-green); border-color: rgba(var(--lcjr-green-rgb), 0.45); }
.hc-chip--pulse::before { animation: hcPulse var(--pulse-dur) ease-in-out infinite; }

@keyframes hcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

/* ---- action ---- */
.hc-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid rgba(var(--ink-rgb), 0.5);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), gap var(--transition);
}
.hc-action::after { content: '→'; }
.hc-action:hover { gap: 16px; border-color: var(--orange); color: var(--orange); }
.hc-action--primary { background: var(--ink); border-color: var(--ink); color: var(--panel-2); }
.hc-action--primary:hover { background: var(--orange); border-color: var(--orange); color: var(--panel-2); }

/* ---- square marker, the 6px block that leads a line ---- */
.hc-sq { display: inline-block; width: 6px; height: 6px; flex: none; background: var(--orange); }

/* ============================================================
   FOCUS, the site-wide text transition.
   A swap is a stack of variants in one grid cell. The variant
   in view carries .is-on; the one leaving carries .is-out and
   animates away; anything else sits hidden with no transition.
   --i is the line index inside a variant, for the stagger.
   ============================================================ */
.fx-stack { display: grid; }
.fx-stack > * { grid-area: 1 / 1; }

.fx {
  --fx-scale: 1.07;
  --fx-blur: 18px;
  --fx-op: 0.6s;
  --fx-fl: 0.8s;
  --fx-tf: 1s;
  --fx-on: 0.12s;
  --fx-step: 0.08s;
  display: block;
  transform-origin: 0 50%;
  opacity: 0;
  filter: blur(var(--fx-blur));
  transform: scale(var(--fx-scale));
  pointer-events: none;
}
.fx.hc-chip { display: inline-flex; justify-self: start; }
.fx.is-on {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  pointer-events: auto;
  transition:
    opacity var(--fx-op) ease calc(var(--fx-on) + var(--i, 0) * var(--fx-step)),
    filter var(--fx-fl) var(--ease-out-expo) calc(var(--fx-on) + var(--i, 0) * var(--fx-step)),
    transform var(--fx-tf) var(--ease-out-expo) calc(var(--fx-on) + var(--i, 0) * var(--fx-step));
}
.fx.is-out {
  transition:
    opacity var(--fx-op) ease calc(var(--i, 0) * 0.04s),
    filter var(--fx-fl) var(--ease-out-expo) calc(var(--i, 0) * 0.04s),
    transform var(--fx-tf) var(--ease-out-expo) calc(var(--i, 0) * 0.04s);
}
/* the softer setting the portal uses */
.fx--soft {
  --fx-scale: 1.04;
  --fx-blur: 16px;
  --fx-op: 0.55s;
  --fx-fl: 0.75s;
  --fx-tf: 0.9s;
  --fx-on: 0.22s;
  --fx-step: 0.09s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* ============================================================
   SITE PIECES shared by the homepage and the inner pages
   ============================================================ */

/* ---- nav: fixed over the homepage, absolute on the inner pages ---- */
.hn {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px var(--gutter);
  pointer-events: none;
}
.hn > * { pointer-events: auto; }
.hn-left { display: flex; align-items: center; gap: 12px; }
.hn-brand { display: flex; align-items: center; gap: 10px; }
.hn-brand img { height: 18px; width: auto; }
.hn-brand .hc-display,
.hn-crumb .hc-display { font-size: 13px; line-height: 16px; letter-spacing: 0.1em; }
.hn-brand:hover .hc-display { color: var(--ink); }
.hn-crumb { width: 360px; height: 16px; display: flex; align-items: center; white-space: nowrap; }
.hn-crumb--lm { color: var(--orange); }
.hn-crumb--lcjr { color: var(--lcjr-green); }
.hn-links {
  display: flex;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hn-links a { color: var(--ink-62); }
.hn-links a:hover { color: var(--ink); }
.hn-links a.hn-strong { color: var(--ink); }
.hn-links a.hn-strong:hover { color: var(--orange); }

.hn-links a[aria-current="page"] { color: var(--ink); }
.hn-crumb--page { color: var(--gray); }
/* on a narrow phone the five links need the room the wordmark takes;
   the HC mark stays */
@media (max-width: 480px) {
  .hn .hn-brand .hc-display { display: none; }
  .hn .hn-links { gap: 12px; letter-spacing: 0.08em; }
}
@media (max-width: 359px) {
  .hn .hn-links { gap: 9px; font-size: 9px; letter-spacing: 0.04em; }
}

/* ---- phase pips ---- */
.pips { display: flex; align-items: center; gap: 5px; }
.pips i { width: 9px; height: 9px; border: 1px solid rgba(var(--acc-rgb), 0.6); }
.pips i.done { border: 0; background: rgba(var(--acc-rgb), 0.5); }
.pips i.cur { border: 0; background: var(--acc); }
.pips__n { margin-left: auto; color: var(--acc); }

/* ---- milestone tracker ---- */
.h-track { position: relative; height: 80px; }
.h-track__line { position: absolute; left: 0; right: 0; top: 35px; height: 2px; background: var(--ink-28); }
.h-track__pts { margin: 0; padding: 0; list-style: none; }
.h-track__pts li {
  --c: var(--ink);
  --ring: rgba(var(--ink-rgb), 0.18);
  position: absolute;
  top: 24px;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  transition: opacity 0.3s ease;
}
.h-track__pts li[data-own="lm"]   { --c: var(--orange);     --ring: rgba(var(--orange-rgb), 0.2); }
.h-track__pts li[data-own="lcjr"] { --c: var(--lcjr-green); --ring: rgba(var(--lcjr-green-rgb), 0.2); }
.h-track__pts li:hover,
.h-track__pts li:focus-within { z-index: 2; }
.h-track__pts button {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.h-track__pts button::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c);
  outline: 4px solid var(--ring);
}

.h-tip {
  position: absolute;
  bottom: 32px;
  left: 0;
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 9px 12px;
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--ink-22);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink);
}
.h-tip .hc-mono { font-size: 8.5px; }
.h-track__pts li.flip .h-tip { left: auto; right: 0; align-items: flex-end; }
.h-track__pts li:hover .h-tip,
.h-track__pts li:focus-within .h-tip { display: flex; }

.h-track__cap {
  position: absolute;
  right: -6px;
  top: 30px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--band-4);
}
.h-track__start, .h-track__end { position: absolute; top: 62px; }
.h-track__start { left: 0; }
.h-track__end { right: 0; }

/* phase ladder */
.h-ladder {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 8px;
}
.h-ladder li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 2px solid var(--ink-22);
}
.h-ladder li.done { border-top-color: rgba(var(--acc-rgb), 0.5); }
.h-ladder li.cur { border-top-color: var(--acc); }
.h-ladder__t { display: flex; align-items: baseline; gap: 10px; }
.h-ladder__t .hc-mono { text-transform: none; }
.h-ladder li.cur .h-ladder__t .hc-mono { color: var(--acc); }
.h-ladder__t .hc-display { font-size: 14px; line-height: 1; }
.h-ladder li:not(.done):not(.cur) .hc-display { color: var(--gray); }
.h-ladder .ok { color: var(--complete-green); }

/* ---- footer ---- */
.h-foot {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 40px;
  padding: 24px var(--gutter);
  background: var(--band-4);
  border-top: 1px solid var(--border);
}
.h-foot a { color: var(--gray); }
.h-foot a:hover { color: var(--ink); }
.h-foot a.h-foot__strong { color: var(--ink); }
.h-foot a.h-foot__strong:hover { color: var(--orange); }
.h-foot__end { margin-left: auto; }

@media (max-width: 900px) {
  .h-foot { gap: 14px 28px; }
  .h-foot__end { margin-left: 0; flex-basis: 100%; }
}

/* ---- glass, as on the investor portal: the one place a corner
   is rounded. A little band under the frosting keeps type legible
   where it sits over a bright patch of the photograph. ---- */
.hc-glass {
  border-radius: 20px;
  background:
    linear-gradient(160deg, rgba(var(--ink-rgb), 0.09), rgba(var(--ink-rgb), 0.025)),
    rgba(var(--band-1-rgb), 0.38);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ============================================================
   VEIL: the move between the homepage and the inner pages.
   The page being left draws a veil up over itself and the HC
   mark comes in on it; the next page opens under the same veil,
   the mark goes, and the veil lifts away. hewcore.js sets
   veil-in on the way out; the head script sets veil on arrival.
   ============================================================ */
html.veil body::before,
html.veil-in body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%, rgba(var(--orange-rgb), 0.07), transparent 70%),
    radial-gradient(ellipse at 50% 45%, var(--band-1), var(--band-4));
}
/* the mark, with the name set under it */
html.veil body::after,
html.veil-in body::after {
  content: 'Hewcore Corporation';
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 1001;
  margin-top: -44px;
  padding-top: 76px;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  background: url('/images/hewcore-logo-web.svg') center top / 84px 54px no-repeat;
}
html.veil-in body::before { animation: hcVeilUp 0.5s cubic-bezier(0.7, 0, 0.3, 1) both; }
html.veil-in body::after { animation: hcMarkIn 0.6s var(--ease-out-expo) 0.18s both; }
html.veil body::before { pointer-events: none; animation: hcVeilOff 0.75s cubic-bezier(0.7, 0, 0.3, 1) 0.42s both; }
html.veil body::after { pointer-events: none; animation: hcMarkOut 0.5s cubic-bezier(0.5, 0, 0.75, 0) 0.08s both; }
@keyframes hcVeilUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hcVeilOff { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes hcMarkIn {
  from { opacity: 0; transform: scale(0.82); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes hcMarkOut {
  from { opacity: 1; transform: none; filter: none; }
  to { opacity: 0; transform: scale(1.3); filter: blur(12px); }
}
@media (prefers-reduced-motion: reduce) {
  html.veil body::before, html.veil body::after,
  html.veil-in body::before, html.veil-in body::after { display: none; }
}