/* ============================================================================
   VIVARIUM — base: reset, type, atmosphere, cursor, HUD
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

html, body { height: 100%; }

body {
  background: var(--void);
  color: var(--ink-soft);
  font-family: var(--f-mono);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* faint living gradient on a FIXED layer → paints once and composites, instead of a
   background-attachment:fixed full-viewport repaint on every single scroll frame */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(120% 80% at 50% -10%, oklch(20% 0.03 230 / 0.55), transparent 60%),
    radial-gradient(90% 70% at 50% 120%, oklch(16% 0.02 250 / 0.6), transparent 55%);
}

body.is-locked { overflow: hidden; }

::selection { background: var(--live); color: var(--void-deep); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
em { font-style: normal; }

h1, h2, h3 { font-weight: 700; line-height: 0.95; }

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 3px;
  border-radius: 2px;
}

.live-word { color: var(--live); text-shadow: var(--glow-live); font-weight: 500; }

/* visually hidden, still in the accessibility tree (voice-control friendly names) */
.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;
}

/* ── Atmosphere ────────────────────────────────────────────────────────── */
.atmos {
  position: fixed; inset: 0;
  z-index: var(--z-atmos);
  pointer-events: none;
}
.atmos__grain {
  position: absolute; inset: -2px;
  width: calc(100% + 4px); height: calc(100% + 4px);
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  transition: opacity var(--d-slow) var(--e-soft);
}
.atmos__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    oklch(80% 0.05 220 / 0.5) 0px,
    oklch(80% 0.05 220 / 0.5) 1px,
    transparent 2px,
    transparent 4px
  );
  opacity: var(--scan-opacity);
  mix-blend-mode: soft-light;
  transition: opacity var(--d-slow) var(--e-soft);
}
.atmos__loupe {
  position: absolute; inset: 0;
  background: radial-gradient(
    240px 240px at var(--mx, 50%) var(--my, 40%),
    oklch(80% 0.12 214 / 0.10), transparent 70%
  );
  opacity: 0;
  transition: opacity var(--d-mid) var(--e-soft);
}
body[data-signal="live"] .atmos__loupe { opacity: 1; }
.atmos__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 45%, transparent 55%, oklch(6% 0.01 250 / 0.85) 100%);
}
/* during OBSERVE the embedded site scrolls inside the glass — drop every full-viewport
   blend layer (grain/scan/loupe/vignette) so the GPU isn't re-blending the whole
   framebuffer each frame the iframe content moves underneath. */
body.is-observing .atmos { display: none; }
/* while actively scrolling, drop the full-viewport blend layers (grain + scan) so the
   GPU isn't re-blending the whole viewport over the moving specimens every frame —
   the main remaining scroll-jank source on weaker GPUs. They fade back in on idle. */
body.is-scrolling .atmos__grain,
body.is-scrolling .atmos__scan { visibility: hidden; }

/* ── Custom reticle cursor ─────────────────────────────────────────────── */
.reticle {
  position: fixed; top: 0; left: 0;
  z-index: var(--z-reticle);
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  opacity: 0;
  transition: opacity var(--d-fast) var(--e-soft);
}
.reticle.is-on { opacity: 1; }
.reticle__cross {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 1.5px oklch(0% 0 0 / 0.75));   /* halo: visible on light or dark */
  transition: width var(--d-fast) var(--e-out), height var(--d-fast) var(--e-out);
}
.reticle__cross::before, .reticle__cross::after {
  content: ""; position: absolute; background: oklch(96% 0.03 220);
}
.reticle__cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.reticle__cross::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.reticle.is-hot .reticle__cross { width: 46px; height: 46px; }
.reticle.is-hot .reticle__cross::before,
.reticle.is-hot .reticle__cross::after { background: var(--amber); }   /* observe = amber */
.reticle__label {
  position: absolute; left: 50%; top: calc(50% + 32px);
  transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.22em;
  color: var(--amber); white-space: nowrap;
  opacity: 0;
}
.reticle.is-hot .reticle__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .reticle { display: none; } }

/* ── HUD ───────────────────────────────────────────────────────────────── */
.hud {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-hud);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: clamp(0.9rem, 0.6rem + 1vw, 1.6rem) var(--gutter);
  font-family: var(--f-mono);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(8% 0.01 250 / 0.7), transparent);
  -webkit-mask: linear-gradient(180deg, #000 40%, transparent);
  mask: linear-gradient(180deg, #000 40%, transparent);
  z-index: -1;
}
.hud { transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
body.is-booting .hud { opacity: 0; transform: translateY(-12px); pointer-events: none; }

.hud__mark {
  display: flex; align-items: baseline; gap: 0.55em;
  font-size: var(--t-label); letter-spacing: 0.14em;
  color: var(--ink);
}
.hud__mark-dtb { font-weight: 700; letter-spacing: 0.05em; }
.hud__mark-dtb sup { font-size: 0.5em; font-weight: 500; color: var(--live); letter-spacing: 0.1em; }
.hud__mark-sep { color: var(--ink-faint); }
.hud__mark-wing { color: var(--live); font-weight: 500; text-shadow: 0 0 14px oklch(80% 0.145 214 / 0.4); }

.hud__status { display: flex; align-items: center; gap: 0.6em; font-size: var(--t-micro);
  letter-spacing: 0.2em; color: var(--ink-mute); }
.hud__status .hud__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-faint);
  transition: background var(--d-mid), box-shadow var(--d-mid);
}
body[data-signal="live"] .hud__dot { background: var(--live); box-shadow: var(--glow-live); animation: pulse 1.6s var(--e-soft) infinite; }
@media (max-width: 720px) { .hud__status { display: none; } }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── SIGNAL toggle ─────────────────────────────────────────────────────── */
.signal {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: var(--t-micro); letter-spacing: 0.2em; color: var(--ink-mute);
  padding: 0.5em 0.7em; border: 1px solid var(--line); border-radius: 999px;
  background: oklch(18% 0.014 250 / 0.5);
  backdrop-filter: blur(8px);
  transition: border-color var(--d-mid), color var(--d-mid);
}
.signal:hover { border-color: var(--live-deep); color: var(--ink-soft); }
.signal__label { font-weight: 500; }
.signal__track { position: relative; width: 30px; height: 14px; border-radius: 999px;
  background: oklch(26% 0.01 250); border: 1px solid var(--line); }
.signal__thumb { position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-mute); transition: transform var(--d-mid) var(--e-out), background var(--d-mid), box-shadow var(--d-mid); }
.signal__state { min-width: 3.4em; text-align: left; font-weight: 700; color: var(--ink-mute); transition: color var(--d-mid); }
body[data-signal="live"] .signal { border-color: var(--live-deep); color: var(--live); }
body[data-signal="live"] .signal__thumb { transform: translateX(16px); background: var(--live); box-shadow: var(--glow-live); }
body[data-signal="live"] .signal__state { color: var(--live); }
body[data-signal="live"] .signal__track { border-color: var(--live-deep); }

/* shared buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.8em;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.16em;
  padding: 1em 1.6em; border-radius: 2px;
  transition: transform var(--d-fast) var(--e-out), background var(--d-mid), color var(--d-mid), box-shadow var(--d-mid);
}
.btn span:last-child { transition: transform var(--d-fast) var(--e-out); }
.btn:hover span:last-child { transform: translateX(4px); }
.btn--primary { background: var(--live); color: var(--void-deep); font-weight: 700; box-shadow: var(--glow-live); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--live-deep); color: var(--live); transform: translateY(-2px); }
.btn--amber { background: var(--amber); color: var(--void-deep); font-weight: 700; box-shadow: var(--glow-amber); }
.btn--amber:hover { transform: translateY(-2px); }

/* ── HUD right cluster: header CTA + sound toggle ──────────────────────── */
.hud__right { display: flex; align-items: center; gap: 0.7rem; }
.hud__cta {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.16em; font-weight: 700;
  color: var(--void-deep); background: var(--live);
  padding: 0.65em 1.05em; border-radius: 999px; box-shadow: var(--glow-live);
  transition: transform var(--d-fast) var(--e-out);
}
.hud__cta span { transition: transform var(--d-fast) var(--e-out); }
.hud__cta:hover { transform: translateY(-1px); }
.hud__cta:hover span { transform: translateX(3px); }
@media (max-width: 760px) { .hud__cta { display: none; } }

.hud__sound {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-mute);
  background: oklch(18% 0.014 250 / 0.5); backdrop-filter: blur(8px);
  transition: color var(--d-mid), border-color var(--d-mid);
}
.hud__sound:hover { color: var(--ink); border-color: var(--live-deep); }
.hud__sound-ico { width: 17px; height: 17px; }
.hud__sound .hud__sound-x { opacity: 1; }
.hud__sound .hud__sound-wave { opacity: 0; }
.hud__sound[aria-pressed="true"] { color: var(--live); border-color: var(--live-deep); }
.hud__sound[aria-pressed="true"] .hud__sound-x { opacity: 0; }
.hud__sound[aria-pressed="true"] .hud__sound-wave { opacity: 1; }

/* intro CTA row */
.wing__intro-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ── Floating WhatsApp (amber) ─────────────────────────────────────────── */
.wa-float {
  position: fixed; right: clamp(1rem, 0.5rem + 1.5vw, 2rem); bottom: clamp(3.3rem, 2.6rem + 2vw, 4.6rem);
  z-index: var(--z-hud);
  display: inline-flex; align-items: center;
  width: 54px; height: 54px; border-radius: 999px; overflow: hidden;
  background: var(--amber); color: var(--void-deep);
  box-shadow: var(--glow-amber), 0 12px 32px -12px oklch(82% 0.15 73 / 0.55);
  transition: opacity var(--d-slow), width var(--d-mid) var(--e-out), transform var(--d-fast) var(--e-out);
}
.wa-float svg { flex: none; width: 30px; height: 30px; margin: 12px; }
.wa-float__tip {
  font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.06em; font-weight: 700;
  white-space: nowrap; opacity: 0; padding-right: 1.2em; transition: opacity var(--d-mid);
}
.wa-float:hover { width: 280px; transform: translateY(-2px); }
.wa-float:hover .wa-float__tip { opacity: 1; }
body.is-booting .wa-float { opacity: 0; pointer-events: none; transform: translateY(12px); }
@media (hover: none), (pointer: coarse) {
  .wa-float, .wa-float:hover { width: 54px; transform: none; }
  .wa-float__tip { display: none; }
}

/* ── Telemetry strip (observation-deck heartbeat) ──────────────────────── */
.telemetry {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-hud);
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.16em;
  color: var(--ink-mute); pointer-events: none;
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg, oklch(10% 0.012 250 / 0.92), oklch(10% 0.012 250 / 0.55) 55%, transparent);
  backdrop-filter: blur(6px);
  transition: opacity var(--d-slow) var(--e-out);
}
body.is-booting .telemetry { opacity: 0; }
.telemetry__tag {
  flex: none; color: var(--live); font-weight: 700; letter-spacing: 0.22em;
  text-shadow: 0 0 12px oklch(80% 0.145 214 / 0.5);
}
.telemetry__pulse { width: 116px; height: 24px; flex: none; opacity: 1; }
.telemetry__read {
  display: flex; gap: 1.6rem; white-space: nowrap; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, #000 88%, transparent);
  mask: linear-gradient(90deg, #000 88%, transparent);
}
.telemetry__read .k { color: var(--ink-faint); }
.telemetry__read .v { color: var(--ink); }
.telemetry__read .v--live { color: var(--live); text-shadow: 0 0 10px oklch(80% 0.145 214 / 0.4); }
@media (max-width: 760px) {
  .telemetry { font-size: 9px; gap: 0.8rem; padding-top: 0.5rem; }
  .telemetry__tag { display: none; }
  .telemetry__read span:nth-child(n+4) { display: none; }
}

/* reduced-motion: kill transforms/animations globally as a safety net */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}