/* deadnsyde · live portfolio reveal
   Aesthetic: ambient nature minimalism — a living hillside with quiet numbers.
   Constraint: page is captured by a software-rendered Chromium on the encoder VPS —
   no WebGL, no backdrop-filter, animations kept cheap. */

:root {
  --ink: #f4f1e6;            /* warm paper white */
  --ink-dim: #b9c0b2;
  --ink-faint: #7f897c;
  --panel: rgba(10, 14, 12, 0.62);
  --panel-edge: rgba(244, 241, 230, 0.10);
  --up: #93d7a5;             /* sage — calm green */
  --down: #e99b8a;           /* coral — calm red */
  --flat: #cfd4c8;
  --moomoo: #79aaff;         /* soft moomoo blue */
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --serif: "Fraunces", georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0a0e14;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 300;
}

/* ---------- scene ---------- */

#scene, #scene-video {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
}
#scene-video { display: none; }
body.scene-video #scene { display: none; }
body.scene-video #scene-video { display: block; }

#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 70% 40%, transparent 55%, rgba(4, 7, 10, 0.38) 100%),
    linear-gradient(90deg, rgba(4, 7, 9, 0.42) 0%, transparent 46%);
}

/* ---------- top bar ---------- */

.topbar {
  position: fixed; top: clamp(18px, 2.6vh, 30px); right: clamp(20px, 2.2vw, 42px);
  display: flex; align-items: center; gap: 18px;
  z-index: 5;
}

.live-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  background: var(--panel);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: clamp(11px, 0.85vw, 14px);
  color: var(--ink-dim);
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff6b5e;
  animation: breathe 2.8s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.date-line {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-faint);
}

/* ---------- left panel ---------- */

.panel {
  position: fixed;
  left: clamp(20px, 2.4vw, 46px);
  top: clamp(20px, 3.2vh, 38px);
  bottom: clamp(20px, 3.2vh, 38px);
  width: min(31vw, 560px);
  min-width: 330px;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vh, 34px) clamp(22px, 1.8vw, 34px);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  z-index: 4;
}

.demo-chip {
  position: absolute; top: -11px; right: 22px;
  padding: 3px 12px;
  background: #2a2418;
  border: 1px solid rgba(244, 200, 120, 0.4);
  border-radius: 999px;
  color: #ecc987;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.masthead { margin-bottom: clamp(14px, 2.4vh, 26px); }

.eyebrow {
  font-size: clamp(10px, 0.78vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 2.2vw, 40px);
  letter-spacing: 0.01em;
  line-height: 1;
}

.day-counter {
  margin-top: 7px;
  font-size: clamp(10px, 0.78vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* position block */

.position {
  border-top: 1px solid var(--panel-edge);
  padding-top: clamp(14px, 2.2vh, 24px);
}

.stock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.stock-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 32px);
}

.stock-meta {
  font-size: clamp(11px, 0.85vw, 14px);
  color: var(--ink-dim);
  white-space: nowrap;
}

.hero { margin: clamp(12px, 2vh, 22px) 0 clamp(12px, 2vh, 20px); }

.hero-label {
  font-size: clamp(10px, 0.78vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero-value {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 6.4vw, 122px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  transition: color 1.2s ease;
}
.hero-value.up { color: var(--up); }
.hero-value.down { color: var(--down); }

.hero-sub {
  margin-top: 4px;
  font-size: clamp(16px, 1.3vw, 24px);
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.6vh, 18px) 18px;
}

.stat dt {
  font-size: clamp(10px, 0.78vw, 13px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.stat dd {
  font-size: clamp(17px, 1.4vw, 26px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.stat dd.up { color: var(--up); }
.stat dd.down { color: var(--down); }

.spark {
  width: 100%; height: clamp(54px, 8vh, 84px);
  margin-top: clamp(12px, 2vh, 20px);
  display: block;
  opacity: 0.95;
}

/* activity feed */

.activity {
  margin-top: clamp(12px, 2.2vh, 22px);
  padding-top: clamp(12px, 2vh, 20px);
  border-top: 1px solid var(--panel-edge);
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}

.activity-title {
  font-size: clamp(10px, 0.78vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}

.feed { list-style: none; overflow: hidden; }

.feed li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 0;
  font-size: clamp(12px, 1vw, 16px);
  color: var(--ink-dim);
  border-bottom: 1px dashed rgba(244, 241, 230, 0.07);
  animation: feed-in 0.7s ease both;
}
@keyframes feed-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.feed .side { width: 4ch; letter-spacing: 0.12em; font-weight: 500; }
.feed .side.buy { color: var(--up); }
.feed .side.sell { color: var(--down); }
.feed .qty { color: var(--ink); }
.feed .at { color: var(--ink-faint); }
.feed time { margin-left: auto; color: var(--ink-faint); font-size: 0.85em; }
.feed-empty { color: var(--ink-faint); font-style: italic; border-bottom: none !important; }

/* panel footer */

.panel-foot {
  margin-top: 12px;
  padding-top: clamp(12px, 1.8vh, 18px);
  border-top: 1px solid var(--panel-edge);
  display: flex; align-items: center; justify-content: space-between;
}

.session {
  display: flex; align-items: center; gap: 9px;
  font-size: clamp(10px, 0.82vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.session-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--flat); }
.session.open .session-dot { background: var(--up); }
.session.closed .session-dot { background: var(--ink-faint); }
.session.extended .session-dot { background: #e8c987; }

/* the clock must visibly tick — the stream watchdog diffs frames on it */
.clock {
  font-size: clamp(11px, 0.9vw, 15px);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* ---------- ambient caption ---------- */

.caption {
  position: fixed;
  right: clamp(24px, 2.6vw, 48px);
  bottom: clamp(86px, 12vh, 124px);
  max-width: 38vw;
  font-size: clamp(13px, 1.05vw, 18px);
  font-style: italic;
  color: rgba(244, 241, 230, 0.78);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  text-align: right;
  z-index: 3;
  transition: opacity 2.4s ease;
}
.caption.fading { opacity: 0; }

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

.brand {
  position: fixed;
  right: clamp(20px, 2.2vw, 42px);
  bottom: clamp(18px, 2.8vh, 32px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  z-index: 5;
}

.moomoo-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  font-size: clamp(12px, 0.95vw, 16px);
  color: var(--ink-dim);
}
.moomoo-chip strong { color: var(--moomoo); font-weight: 500; letter-spacing: 0.02em; }
.moomoo-mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a8c8ff, var(--moomoo));
  box-shadow: 0 0 12px rgba(121, 170, 255, 0.55);
}

.disclaimer {
  font-size: clamp(9px, 0.7vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 230, 0.4);
}

/* ---------- small screens (phone viewers of the live page) ---------- */

@media (max-width: 760px) {
  .panel {
    left: 12px; right: 12px; top: 12px; bottom: auto;
    width: auto; min-width: 0;
  }
  .caption { display: none; }
  .topbar { top: auto; bottom: 14px; left: 14px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}