/* nlbd.dev — split-screen, dark-academia, leaderless distributed systems
 * Palette:
 *   #B87858 terracotta warm (left bg)
 *   #1A1818 academia dark (right bg)
 *   #F5EDE0 cream text (on dark)
 *   #2A1810 dark text (on terracotta)
 *   #3898C8 tropical blue
 *   #E88840 tropical orange
 *   #D8C8A8 paper aged (consensus bg)
 *   #C8A040 consensus gold (pulse line)
 */

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

:root {
  --terracotta: #B87858;
  --academia: #1A1818;
  --cream: #F5EDE0;
  --dark: #2A1810;
  --blue: #3898C8;
  --orange: #E88840;
  --paper: #D8C8A8;
  --gold: #C8A040;
  --serif: 'Lora', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--serif);
  color: var(--dark);
  background: var(--terracotta);
  line-height: 1.85;
  font-size: clamp(15px, 1vw, 17px);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   PULSE LINE — connecting the two equal halves
   ============================================================ */
.pulse-line {
  position: fixed;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100vh;
  background: var(--gold);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  z-index: 50;
  pointer-events: none;
  animation:
    pulseDrawIn 800ms ease-out 200ms forwards,
    pulseGlow 2s ease-in-out 1s infinite;
}

@keyframes pulseDrawIn {
  to { transform: translateX(-50%) scaleY(1); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}

/* ============================================================
   FISH LAYER — tropical fish swim across the boundary
   ============================================================ */
.fish-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  overflow: hidden;
}

.fish {
  position: absolute;
  width: 30px;
  height: 15px;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.fish-small { width: 22px; height: 11px; }

/* fish 1: blue, swims left -> right at 18% from top */
.fish.fish-blue:not(.fish-small) {
  top: 18%;
  animation: swimRight 18s linear 1200ms infinite;
}
/* fish 2: orange, swims right -> left at 38% from top */
.fish.fish-orange:not(.fish-small) {
  top: 38%;
  animation: swimLeft 22s linear 2500ms infinite;
}
/* fish 3: small blue, swims right -> left at 62% */
.fish.fish-blue.fish-small {
  top: 62%;
  animation: swimLeft 16s linear 1800ms infinite;
}
/* fish 4: small orange, swims left -> right at 78% */
.fish.fish-orange.fish-small {
  top: 78%;
  animation: swimRight 24s linear 3500ms infinite;
}
/* fish 5: gold, slow drift from bottom-left to top-right */
.fish.fish-gold {
  top: 50%;
  animation: swimDrift 25s linear 4500ms infinite;
}

@keyframes swimRight {
  0%   { transform: translateX(-10vw) translateY(0)    rotate(0); opacity: 0; }
  6%   { opacity: 0.85; }
  50%  { transform: translateX(50vw)  translateY(-10px) rotate(0); opacity: 0.85; }
  94%  { opacity: 0.85; }
  100% { transform: translateX(110vw) translateY(0)    rotate(0); opacity: 0; }
}
@keyframes swimLeft {
  0%   { transform: translateX(110vw) translateY(0)   rotate(180deg); opacity: 0; }
  6%   { opacity: 0.85; }
  50%  { transform: translateX(50vw)  translateY(8px) rotate(180deg); opacity: 0.85; }
  94%  { opacity: 0.85; }
  100% { transform: translateX(-10vw) translateY(0)   rotate(180deg); opacity: 0; }
}
@keyframes swimDrift {
  0%   { transform: translate(-10vw, 20vh) rotate(-15deg); opacity: 0; }
  10%  { opacity: 0.7; }
  50%  { transform: translate(50vw, -10vh) rotate(0); opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translate(110vw, -30vh) rotate(15deg); opacity: 0; }
}

/* hover reverses — handled via JS toggling .fish-reversed class */
.fish-layer:hover .fish { animation-direction: reverse; }

/* ============================================================
   DUAL ORIGIN — 100vh split, equal weight
   ============================================================ */
.dual-origin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  position: relative;
}

.origin-half {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

/* paper-aged manuscript noise on left */
.origin-left {
  background:
    radial-gradient(ellipse at center, transparent 60%, rgba(42,24,16,0.25) 100%),
    var(--terracotta);
  color: var(--dark);
}
.origin-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.09  0 0 0 0 0.06  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.origin-right {
  background:
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%),
    var(--academia);
  color: var(--cream);
}
.origin-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,237,224,0.025) 1px, transparent 1px);
  background-size: 100% 3px;
  pointer-events: none;
}

.origin-mark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(48px, 9vw, 132px);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(12px);
  animation: originIn 600ms ease-out 200ms forwards;
  position: relative;
  z-index: 2;
}

.origin-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0.04em;
  margin-top: 18px;
  opacity: 0;
  animation: originIn 600ms ease-out 700ms forwards;
  position: relative;
  z-index: 2;
}

.origin-right .origin-sub {
  font-family: var(--mono);
  font-style: normal;
}

@keyframes originIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   DIALOGUE — synchronized split scroll
   ============================================================ */
.dialogue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

/* a row spans both columns and shows one pair of panels */
.dialogue-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.panel {
  padding: clamp(28px, 5vw, 72px) clamp(24px, 4vw, 56px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.dialogue-row.visible .panel {
  opacity: 1;
  transform: translateY(0);
}

.panel-left {
  background: var(--terracotta);
  color: var(--dark);
  font-family: var(--serif);
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.85;
  position: relative;
}
.panel-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.09  0 0 0 0 0.06  0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.panel-right {
  background: var(--academia);
  color: var(--cream);
  font-family: var(--mono);
  font-size: clamp(14px, 0.9vw, 15px);
  line-height: 1.7;
}

.panel > * { position: relative; z-index: 1; }

.panel p + p { margin-top: 1em; }

.panel-headline {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 36px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 1em;
}

.panel-left .panel-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
}

.panel-right .panel-headline {
  color: var(--blue);
}

.panel-note {
  margin-top: 1.5em;
  font-size: 0.92em;
  opacity: 0.7;
  font-style: italic;
}
.panel-right .panel-note { font-style: normal; opacity: 0.6; }

/* terminal-style code blocks (right panel) */
.terminal-block {
  background: #0E0C0C;
  border: 1px solid rgba(245,237,224,0.12);
  border-radius: 6px;
  padding: 36px 18px 18px;
  margin: 1em 0;
  position: relative;
  overflow-x: auto;
}
.term-dot {
  position: absolute;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #555;
}
.term-dot.dot-r { left: 14px; background: #E66060; }
.term-dot.dot-y { left: 32px; background: #E0B040; }
.term-dot.dot-g { left: 50px; background: #60B070; }

.terminal-block pre {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--cream);
  white-space: pre;
  line-height: 1.55;
}
.terminal-block .kw  { color: var(--orange); }
.terminal-block .fn  { color: var(--blue); }
.terminal-block .num { color: var(--gold); }
.terminal-block .cmt { color: #7A6E60; font-style: italic; }
.terminal-block .str { color: #B0CFA0; }

/* ============================================================
   CONSENSUS MERGE — split dissolves into a full-width band
   ============================================================ */
.consensus {
  grid-column: 1 / -1;
  background: var(--paper);
  color: var(--dark);
  padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 96px);
  text-align: center;
  position: relative;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  opacity: 0;
  transform: scaleX(0.92);
  transform-origin: center;
  transition:
    opacity 600ms ease-out,
    transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.consensus.visible {
  opacity: 1;
  transform: scaleX(1);
}

.consensus-text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.4;
  max-width: 880px;
  margin: 0 auto;
  font-style: italic;
}
.consensus-text strong {
  font-weight: 700;
  font-style: normal;
  color: var(--dark);
  background: linear-gradient(transparent 60%, rgba(200,160,64,0.35) 60%);
  padding: 0 0.15em;
}

.consensus-final {
  background: linear-gradient(180deg, var(--paper) 0%, #C8B898 100%);
}
.consensus-foot {
  margin-top: 1.5em;
  font-family: var(--mono);
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  font-style: normal;
}

/* ============================================================
   FOOTER — split echoes the design
   ============================================================ */
.site-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--gold);
}
.foot-half {
  padding: 18px clamp(24px, 4vw, 56px);
  font-size: 0.78em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.foot-left  { background: var(--terracotta); color: var(--dark);   font-family: var(--serif); }
.foot-right { background: var(--academia);   color: var(--cream);  font-family: var(--mono); }
.foot-meta { opacity: 0.55; font-size: 0.85em; }

/* ============================================================
   HOVER — left underline, right blue glow
   ============================================================ */
.panel-left a,
.panel-left strong { transition: text-decoration-color 200ms; }
.panel-left:hover .panel-headline { text-decoration: underline; text-decoration-color: var(--dark); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.panel-right:hover .panel-headline { text-shadow: 0 0 12px rgba(56,152,200,0.55); }

.pulse-line.bright {
  width: 2px;
  opacity: 1 !important;
  animation: none;
  box-shadow: 0 0 8px var(--gold);
}

/* ============================================================
   RESPONSIVE — stack on small screens, keep both equal
   ============================================================ */
@media (max-width: 720px) {
  .pulse-line { display: none; }
  .dual-origin { grid-template-columns: 1fr; height: auto; }
  .origin-half { min-height: 50vh; }
  .dialogue { grid-template-columns: 1fr; }
  .dialogue-row { grid-template-columns: 1fr; }
  .site-foot { grid-template-columns: 1fr; }
  .fish { display: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fish, .pulse-line { animation: none !important; }
  .pulse-line { transform: translateX(-50%) scaleY(1); opacity: 0.5; }
  .panel, .consensus { transition: none; opacity: 1; transform: none; }
}