/* MITH, particle gate prototype.
   Palette reused EXACTLY from phase-2/mith-landing-thrive-model/styles.css,
   do not invent new colors. bg #f7f5f2 (off-white), fg #000000 (black), same
   Helvetica Neue stack and micro/spine type scale as the primary build. */

:root {
  --bg: #f7f5f2;      /* measured off Thrive's live body background, reused from primary build */
  --fg: #000000;      /* measured off Thrive's live text color, reused from primary build */
  --line: rgba(0, 0, 0, 0.14);

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-micro: 12px;
  --tracking-micro: 0.3px;

  --fs-spine: 15px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* one static screen, no scroll, same discipline as the primary build */
}

a {
  color: inherit;
}

.micro {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking-micro);
  line-height: 1.2;
}

.label {
  text-transform: uppercase;
}

a.link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ================= TOP COMPOSITION =================
   Revised again 2026-09-14 per the founder's second markup: the date/time +
   "MITH" composition was vertically centered before, which put it right on
   top of the particle animation itself, a real bug. Moved to the TOP of
   the page instead. Same .micro type treatment for both pieces, matched
   exactly, no new type style invented. Plain DOM, above the particle
   <canvas> in stacking order but untouched by anything the particle scene
   does.

   Clearance math, confirmed against a real forced render of the held "Dome"
   form (see test-evidence/): the particle camera sits at world z=9 with a
   50deg vertical FOV, so the visible world-height at the origin is fixed at
   2 * 9 * tan(25deg) ~= 8.39 units, split evenly above/below screen center -
   a ratio that holds at every viewport size, since vertical FOV doesn't
   change with aspect ratio. The tallest held form, "Dome" (twin spires),
   peaks at world y ~= 1.32 after its 0.85 scale/offset, which is ~31.4% of
   the half-height above center, i.e. its apex lands ~34% of the way down
   from the top of the screen at any viewport height (confirmed by
   screenshot: apex at ~270px of a 784px-tall render, ~34.4%). The 28px/40px
   top offsets below, plus this block's own content height (~20px, one line
   now instead of two), stay inside roughly the top 12% of the viewport -
   well clear of that ~34% line at both viewports tested (1440x900 and
   390x844).

   Revised again per the founder's third markup (image 16): date, "MITH,"
   and time now render as ONE row - date, then MITH, then time, left to
   right - instead of date/time stacked above MITH on a second line. Same
   flex container, just row instead of column, one consistent gap between
   all three items. */

.center-mark {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  text-align: center;
  pointer-events: none;
}

.center-mark p {
  margin: 0;
}

/* ================= "DIFFERENT ANGLE" VIEW PANELS =================
   Hidden by default; particle.js adds .is-visible once the camera has
   settled into the "Reach out" or "Impressum" vantage point. Text only -
   the camera move itself is what carries the "different angle of the same
   universe" feeling, so this stays quiet and small.

   Found while testing: the particle field sits at the exact same screen
   position (camera.lookAt always targets the origin, so whatever the
   scene is doing stays centered in frame regardless of camera angle), so
   text with no ground of its own reads as cluttered, sitting right in the
   middle of the dust. A soft backdrop in the site's own --bg color (not a
   new color) gives the text a clean, quiet ground without turning this
   into a heavy modal treatment.

   Revised per the founder's third markup (images 14/15): a panel centered
   on the page sat directly on top of the particle field, overlapping it at
   every camera distance. Moved each panel to the screen corner matching
   its own trigger link - #panel-reach-out bottom-left (under "Reach out"),
   #panel-impressum bottom-right (under "Impressum") - narrow and pinned to
   the edge, well outside the particle field's world-space extent (max
   radius 1.7 units for the idle dust cloud, the widest state the scene
   ever reaches) at both the closer "reach-out" camera distance (~8.4) and
   the farther "impressum" one (~12.2). Confirmed by screenshot at 1440px
   and a real 390px-wide viewport - see test-evidence/. */

.view-panel {
  position: fixed;
  z-index: 8;
  width: min(30vw, 260px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: rgba(247, 245, 242, 0.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.view-panel.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.view-panel p {
  margin: 0;
}

.view-panel .line {
  color: rgba(0, 0, 0, 0.75);
}

#panel-reach-out {
  left: 24px;
  bottom: 108px;
  align-items: flex-start;
  text-align: left;
}

#panel-impressum {
  right: 24px;
  bottom: 108px;
  width: min(36vw, 300px);
  align-items: flex-end;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .view-panel {
    transition: none;
  }
}

/* ================= BOTTOM ROW =================
   Three items in one row: "Reach out" (left), the tagline (center),
   "Impressum" (right). The old stacked "MITH VENTURES" wordmark + subline
   block is gone - "MITH VENTURES" is deleted from the DOM entirely
   (redundant with the top "MITH"), and the tagline now sits inline using
   its existing .tagline/.micro treatment, not a new style. */

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.nav-left {
  justify-self: start;
}

.nav-center {
  justify-self: center;
}

.nav-right {
  justify-self: end;
}

.tagline {
  margin: 0;
  color: rgba(0, 0, 0, 0.62);
}

/* ================= PARTICLE SCENE ================= */

.particle-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
}

#particle-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* If WebGL isn't available, particle.js adds this class to <body> and never
   creates a canvas at all. The top composition and bottom row above/below
   are completely unaffected. */
.no-webgl .particle-wrap {
  display: none;
}

/* ================= BOTTOM ROW (footer) ================= */

.stage {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 24px;
  padding-bottom: 56px;
  text-align: center;
  pointer-events: none;
}

.stage * {
  pointer-events: auto;
}

/* ================= reduced-motion / no-webgl notices (dev-only, unobtrusive) ================= */

.mode-flag {
  position: fixed;
  bottom: 10px;
  left: 24px;
  z-index: 10;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
}

/* ================= impressum text treatment =================
   Reused by the in-page "Impressum" view-panel above. (The standalone
   impressum.html page has been retired (see index.html/particle.js), but
   this type treatment lives on in the panel, so the rule stays.) */

.impressum-text {
  margin: 0;
  line-height: 1.6;
}

.back {
  margin: 0;
}

/* ================= responsive ================= */

@media (max-width: 640px) {
  .center-mark {
    top: 28px;
    gap: 10px;
  }

  .stage {
    padding: 18px;
    padding-bottom: 44px;
  }

  .nav {
    gap: 8px;
  }

  .view-panel {
    bottom: 92px;
    padding: 14px 16px;
  }

  #panel-reach-out {
    left: 18px;
    width: min(46vw, 210px);
  }

  /* Impressum's paragraph is much longer than Reach Out's two links, so at
     this width it needs a wider box to keep its line count (and therefore
     its total height) short enough to clear the particle field above it -
     confirmed by measuring the actual rendered particle/panel pixel
     positions at 390x844, not by estimate. A narrower box here wrapped the
     text into enough lines that the panel's top edge reached into the
     particle field - a real overlap, not a hypothetical one. */
  #panel-impressum {
    right: 18px;
    width: min(78vw, 290px);
  }

  #panel-impressum .impressum-text {
    line-height: 1.4;
  }
}