/* SPDX-License-Identifier: EUPL-1.2 */

/*
 * hominis.eu — site-own styling (free layer; the Hominis mock recipes
 * live in hx-mocks.css and are bound to engine sources).
 * Editorial direction: canvas panels, not cards; quiet headlines; mono
 * metadata voice; ONE accent, used the way the product uses it.
 * Light is default; dark rides prefers-color-scheme.
 */

:root {
  color-scheme: light dark;
  --site-bg: #fbfbfd;
  --site-ink: #1b1b21;
  --site-ink-muted: #585862;
  --site-ink-faint: #8f8f9b;
  --site-line: rgba(27, 27, 33, 0.1);
  --site-boundary: rgba(27, 27, 33, 0.16);
  --site-accent: #2b5fd9;
  --site-accent-ink: #ffffff;
  --site-well: #f0f0f5;
  --site-max: 1080px;
  --site-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --site-sans: system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-bg: #131317;
    --site-ink: #f1f1f5;
    --site-ink-muted: #a7a7b2;
    --site-ink-faint: #73737f;
    --site-line: rgba(241, 241, 245, 0.09);
    --site-boundary: rgba(241, 241, 245, 0.18);
    --site-accent: #85aaff;
    --site-accent-ink: #1b1b21;
    --site-well: #1f1f25;
  }
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

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

body {
  background: var(--site-bg);
  color: var(--site-ink);
  font: 16px/1.6 var(--site-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a {
  color: inherit;
}

/* ---------- header / footer ---------- */

.site-header {
  position: relative;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 18px 24px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  font-size: 17px;
}

.wordmark img {
  width: 26px;
  height: 26px;
  display: block;
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.site-nav a {
  text-decoration: none;
  color: var(--site-ink-muted);
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
}

.site-nav a:hover {
  color: var(--site-ink);
  background: var(--site-line);
}

.site-footer {
  border-top: 1px solid var(--site-line);
  margin-top: 96px;
  padding: 40px 24px 56px;
}

.site-footer .cols {
  max-width: var(--site-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
}

.site-footer h3 {
  font: 600 11px var(--site-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-ink-faint);
  margin-bottom: 10px;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 6px;
}

.site-footer a {
  color: var(--site-ink-muted);
  text-decoration: none;
  font-size: 14px;
}

.site-footer a:hover {
  color: var(--site-ink);
}

.site-footer .fineprint {
  max-width: var(--site-max);
  margin: 32px auto 0;
  color: var(--site-ink-faint);
  font-size: 12.5px;
}

/* ---------- shared section scaffolding ---------- */

.sec {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 88px 24px 0;
}

.sec-label {
  font: 600 11px var(--site-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-ink-faint);
  margin-bottom: 14px;
}

.sec h2 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 650;
  max-width: 22ch;
}

.sec .lede {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--site-ink-muted);
  font-size: 17px;
}

.sec .aside {
  margin-top: 10px;
  max-width: 62ch;
  color: var(--site-ink-faint);
  font-size: 14px;
}

/* Full-bleed-ish showcase panel: the illustration container for every
 * mock composition. Never a card grid. */
.panel {
  position: relative;
  margin-top: 32px;
  border: 1px solid var(--site-boundary);
  border-radius: 16px;
  overflow: clip;
}

.panel-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 12px;
  font: 500 12px var(--site-mono);
  color: var(--site-ink-faint);
}

/* per-panel camera + heights (world coordinates are authored at full
 * scale; --cam presents the zoomed-out canvas) */
.panel-connections {
  height: 560px;
  --cam: 0.62;
}

@media (max-width: 900px) {
  .panel-connections {
    height: 460px;
    --cam: 0.42;
  }
}

/* tools panel */
.panel-tools {
  height: 640px;
  --cam: 0.62;
}

@media (max-width: 900px) {
  .panel-tools {
    height: 440px;
    --cam: 0.4;
  }
}

/* suggestions concept panel (blueprint treatment — deliberately NOT
 * Hominis chrome; only the token palette is shared) */
.panel-suggest {
  height: 440px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--site-ink) 7%, transparent) 1px, transparent 1px)
      0 0 / 26px 26px,
    var(--site-bg);
}

.sg-chip {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px dashed var(--site-boundary);
  font: 500 11px var(--site-mono);
  color: var(--site-ink-muted);
  background: var(--site-bg);
}

.sg-stage {
  position: absolute;
  inset: 0;
}

.sg-ghost {
  position: absolute;
  border: 1.5px dashed var(--site-boundary);
  border-radius: 12px;
  background: color-mix(in srgb, var(--site-ink) 3%, transparent);
}

.sg-ghost::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 22%;
  border-bottom: 1.5px dashed var(--site-boundary);
}

.sg-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--site-ink-faint);
}

.sg-card {
  position: absolute;
  right: 8%;
  top: 30%;
  width: min(340px, 44%);
  padding: 16px 18px;
  border: 1.5px dashed var(--site-accent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--site-accent) 5%, var(--site-bg));
}

.sg-kicker {
  font: 600 10px var(--site-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-ink-faint);
}

.sg-body {
  margin-top: 6px;
  font-size: 15px;
}

.sg-body em {
  font-style: normal;
  border-bottom: 1.5px dashed var(--site-accent);
}

.sg-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
}

.sg-do {
  padding: 3px 12px;
  border-radius: 999px;
  border: 1.5px dashed var(--site-accent);
  color: var(--site-accent);
  font-weight: 600;
}

.sg-alt {
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px dashed var(--site-boundary);
  color: var(--site-ink-muted);
}

.sg-note {
  margin-top: 10px;
  font: 400 11px var(--site-mono);
  color: var(--site-ink-faint);
}

.sg-annot {
  position: absolute;
  font: 400 11px var(--site-mono);
  color: var(--site-ink-faint);
}

@media (max-width: 720px) {
  .panel-suggest {
    height: 560px;
  }

  .sg-card {
    right: 6%;
    top: 46%;
    width: 70%;
  }
}

/* history panel */
.panel-history {
  height: 640px;
  --cam: 0.78;
}

@media (max-width: 1120px) {
  .panel-history {
    height: 560px;
    --cam: 0.66;
  }
}

@media (max-width: 900px) {
  .panel-history {
    height: 440px;
    --cam: 0.5;
  }
}

/* basics panel: scattered vignettes, not a card grid */
.panel-basics {
  height: 940px;
}

.bx-vig {
  position: absolute;
  margin: 0;
}

.bx-vig > figcaption {
  margin-top: 10px;
  font: 500 12px var(--site-mono);
  color: var(--site-ink-faint);
  max-width: 42ch;
}

.bx-media-stage {
  position: relative;
  height: 130px;
  padding-top: 6px;
}

.bx-private-win {
  border-radius: 12px;
  border: 1px solid var(--hominis-chrome-boundary);
  background: var(--hominis-canvas-background);
  box-shadow: var(--hominis-shadow-mid);
  overflow: hidden;
  color: var(--hominis-chrome-text);
}

.bx-private-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
}

.bx-private-win p {
  padding: 4px 16px 14px;
  font-size: 12.5px;
  color: var(--hominis-chrome-text-muted);
}

.bx-dl-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .panel-basics {
    height: auto;
    position: relative;
    padding: 20px;
  }

  .bx-vig {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin-bottom: 28px;
  }
}

/* workspaces panel */
.panel-workspaces {
  height: 460px;
}

.ws-private-vignette {
  position: absolute;
  right: 24px;
  bottom: 24px;
  max-width: 380px;
  padding: 16px;
  border-radius: 12px;
  background: var(--hominis-canvas-background);
  border: 1px solid var(--hominis-chrome-boundary);
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
}

.ws-private-chip {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ws-private-chip .hx-pill {
  flex: none;
}

.ws-private-note {
  font-size: 12.5px;
  color: var(--hominis-chrome-text-muted);
}

@media (max-width: 720px) {
  .panel-workspaces {
    height: 560px;
  }

  .ws-private-vignette {
    left: 24px;
    right: 24px;
  }
}

/* ---------- focus section: window schematics + registry ---------- */

/* Two windows authored at REAL engine px (1200×700), presented under
 * one camera scale — the engine's own zoom model. */
.fm-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}

.fm-fig {
  margin: 0;
  flex: 1 1 420px;
  min-width: 0;
}

.fm-scale {
  --fms: 0.42;
  width: calc(1200px * var(--fms));
  height: calc(700px * var(--fms));
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--site-boundary);
  border-radius: 12px;
}

.fm-win {
  width: 1200px;
  height: 700px;
  transform: scale(var(--fms));
  transform-origin: 0 0;
}

@media (max-width: 1120px) {
  .fm-scale {
    --fms: 0.34;
  }
}

@media (max-width: 480px) {
  .fm-scale {
    --fms: 0.28;
  }
}

.fm-content {
  position: absolute;
  inset: 0;
  background: var(--hominis-chrome-surface-raised);
}

/* the vertical chrome column (248px, opaque — hominis-chrome.css
 * vertical #hominis-chrome-bar; contents per moz-hominis-window-bar.css
 * :host([orientation="vertical"])) */
.fm-vcol {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 248px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  background: var(--hominis-chrome-surface);
  border-right: 1px solid var(--hominis-chrome-boundary);
  box-shadow: var(--hominis-shadow-mid);
  color: var(--hominis-chrome-text);
  font: 13px/1.4 var(--hominis-display-font);
}

.fm-vactions {
  display: flex;
  align-items: center;
  align-self: flex-start;
  background: var(--hominis-chrome-surface-raised);
  border-radius: var(--hominis-inner-radius);
  overflow: hidden;
}

.fm-vactions .hx-tbtn + .hx-tbtn {
  box-shadow: -1px 0 0 var(--hominis-chrome-boundary);
  border-radius: 0;
}

/* Registry miniatures: site-drawn DIAGRAMS (not product chrome) whose
 * geometry ratios come from the frozen registry constants — bar 56,
 * regular strip 40, column 248, rail 72, on a 1440×900 window. */
.fm-registry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 16px;
  margin-top: 40px;
}

.fm-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fm-mini > span {
  font: 500 11px var(--site-mono);
  color: var(--site-ink-faint);
}

.fm-mini .m-box {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--site-boundary);
  border-radius: 8px;
  background: var(--site-well);
  overflow: hidden;
}

/* bar = 56/900 ≈ 6.2%; strip = 40/900 ≈ 4.4%; column = 248/1440 ≈
 * 17.2%; rail = 72/1440 = 5% */
.fm-mini .m-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 8%;
  border-bottom: 1px solid var(--site-line);
}

.fm-mini .m-strip {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  height: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.fm-mini .m-p {
  width: 12%;
  height: 55%;
  border-radius: 99px;
  border: 1px solid var(--site-boundary);
}

.fm-mini .m-p.on,
.fm-mini .m-row.on {
  border-color: var(--site-accent);
  box-shadow: inset 0 0 0 1px var(--site-accent);
}

.fm-mini .m-d {
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--site-boundary);
}

.fm-mini .m-cap {
  width: 30%;
  height: 55%;
  border-radius: 99px;
  background: var(--site-line);
  border: 1px solid var(--site-boundary);
}

.fm-mini .m-col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 17.2%;
  border-right: 1px solid var(--site-boundary);
  background: color-mix(in srgb, var(--site-ink) 5%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6%;
  padding: 8% 12% 8% 4%;
}

.fm-mini .m-col.rail {
  width: 5%;
  padding: 0;
}

.fm-mini .m-col .m-p,
.fm-mini .m-col .m-cap {
  width: 100%;
  height: 7%;
  flex: none;
}

.fm-mini .m-row {
  width: 100%;
  height: 6%;
  flex: none;
  border-radius: 3px;
  background: var(--site-line);
}

.fm-mini .m-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20%;
}

.fm-mini .m-dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--site-boundary);
}

.fm-mini .m-dial {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 26%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 2px dashed var(--site-boundary);
}

.fm-mini .m-dial::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--site-accent);
  opacity: 0.5;
}

.fm-mini .m-grid {
  position: absolute;
  inset: 28% 18% 20%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8%;
}

.fm-mini .m-grid i {
  border-radius: 3px;
  border: 1px solid var(--site-boundary);
  background: var(--site-bg);
}

.fm-mini .m-lights {
  position: absolute;
  top: 6%;
  left: 5%;
  display: flex;
  gap: 8%;
  width: 18%;
}

.fm-mini .m-lights i {
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--site-boundary);
}

/* ---------- download CTA ---------- */

.btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--site-accent);
  color: var(--site-accent-ink);
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font: 600 16px var(--site-sans);
  text-decoration: none;
  cursor: pointer;
}

.btn-dl:hover {
  filter: brightness(1.08);
}

.btn-dl:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

.dl-note {
  font-size: 13px;
  color: var(--site-ink-faint);
}

/* ---------- hero ---------- */

#hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  /* settled state: the canvas ground owns the hero */
}

#hero .hero-ground {
  position: absolute;
  inset: 0;
}

/* tile layer: a world plane over the ground; per-tile placement uses
 * inline translate/width/height exactly like the engine's geometry
 * channel. --recede drives the scroll-linked drift (hero.js). */
#hero .hero-tiles {
  position: absolute;
  inset: 0;
  --recede: 0;
}

#hero .hero-tiles .hx-tile {
  transform: translate(
      calc(var(--drift-x, 0px) * var(--recede)),
      calc(var(--drift-y, 0px) * var(--recede))
    )
    scale(calc(1 - 0.06 * var(--recede)));
  opacity: calc(1 - 0.75 * var(--recede));
}

#hero .hero-tiles .hx-group {
  transform: translate(
      calc(var(--drift-x, 0px) * var(--recede)),
      calc(var(--drift-y, 0px) * var(--recede))
    )
    scale(calc(1 - 0.06 * var(--recede)));
  opacity: calc(1 - 0.75 * var(--recede));
}

/* the intro's fake Chromium-like strip: hidden except during the intro
 * (hero.js reveals, animates, re-hides). Site illustration of "the old
 * world" — deliberately NOT Hominis chrome. */
#hero .hero-strip {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 4;
  width: min(860px, 92vw);
  pointer-events: none;
}

#hero .hero-strip[hidden] {
  display: none;
}

.chromium-strip {
  display: flex;
  align-items: flex-end;
  height: 40px;
  padding: 6px 10px 0;
  border-radius: 10px 10px 0 0;
  background: light-dark(#dee1e6, #202124);
  box-shadow: 0 18px 48px rgba(15, 15, 20, 0.28);
}

.chromium-strip .ctab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 8px 8px 0 0;
  color: light-dark(#3c4043, #bdc1c6);
}

.chromium-strip .ctab.on {
  background: light-dark(#ffffff, #35363a);
}

.chromium-strip .ctab .cfav {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 3px;
}

.chromium-strip .ctab .ct {
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.35;
}

.chromium-strip .ctab .cx {
  flex: none;
  width: 8px;
  height: 8px;
  opacity: 0.5;
  background: currentColor;
  mask: var(--hx-icon-close) center / contain no-repeat;
  -webkit-mask: var(--hx-icon-close) center / contain no-repeat;
}

.chromium-bar {
  height: 34px;
  border-radius: 0 0 10px 10px;
  background: light-dark(#ffffff, #35363a);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  box-shadow: 0 18px 48px rgba(15, 15, 20, 0.28);
}

.chromium-bar .cpill {
  flex: 1;
  height: 20px;
  border-radius: 10px;
  background: light-dark(#f1f3f4, #202124);
}

/* hero center: logo + claim + CTA (z above tiles) */
#hero .hero-center {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 64px;
  pointer-events: none;
}

#hero .hero-center > * {
  pointer-events: auto;
}

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 640px;
}

.hero-card img.logo {
  width: 96px;
  height: 96px;
}

.hero-card h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 675;
}

.hero-card .sub {
  color: var(--site-ink-muted);
  font-size: clamp(15px, 2vw, 18px);
  max-width: 52ch;
}

.hero-card .cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

/* readability plate behind the hero text over the canvas */
.hero-card::before {
  content: none;
}

.hero-card {
  background: color-mix(in srgb, var(--site-bg) 62%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--site-line);
  border-radius: 24px;
  padding: 36px 40px 32px;
  box-shadow: 0 24px 64px rgba(15, 15, 20, 0.12);
}

.scroll-cue {
  position: absolute;
  bottom: 18px;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  color: var(--site-ink-faint);
  font: 500 11px var(--site-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.scroll-cue::after {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  mask: var(--hx-icon-arrow-down) center / contain no-repeat;
  -webkit-mask: var(--hx-icon-arrow-down) center / contain no-repeat;
}

/* ---------- reveal-on-scroll (site.js) ----------
 * Elements are VISIBLE BY DEFAULT (settled-state-first): site.js only
 * ADDS a one-shot entrance via WAAPI when a section approaches. No
 * class-toggled transitions, no hidden-until-JS content. */

/* ---------- narrow ---------- */

@media (max-width: 720px) {
  .hero-card {
    padding: 28px 22px 26px;
  }

  #hero .hero-tiles [data-narrow-hide] {
    display: none;
  }
}