/* === BASE === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --ghost-white: #F9FAFB;
  --silver-mist: #E8EAED;
  --ash: #D1D5DB;
  --steel: #9CA3AF;
  --graphite: #6B7280;
  --slate: #4B5563;
  --charcoal: #374151;
  --near-black: #1F2937;
  --clearing-blue: #93C5FD;
  --settling-teal: #5EEAD4;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  background: var(--ghost-white);
  color: var(--slate);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.75;
  overflow-x: hidden;
}

/* === DOTTED GRID === */
.dot-grid {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(circle, var(--ash) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.dot-grid-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(circle, var(--ash) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.6;
  pointer-events: none;
}

/* === CLEARINGS === */
.clearing {
  position: relative;
  z-index: 1;
  padding: 6rem clamp(2rem, 5vw, 4rem);
}

/* === SKELETON LOADING === */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(75deg, var(--silver-mist) 30%, #F3F4F6 50%, var(--silver-mist) 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 2.4s ease-in-out infinite;
  animation-delay: var(--sk-delay, 0s);
  margin-bottom: 10px;
}

.skeleton-cluster {
  position: absolute;
  pointer-events: none;
}

.sk-cluster-1 { top: 15%; right: 12%; }
.sk-cluster-2 { top: 20%; left: 8%; }
.sk-cluster-3 { top: 10%; right: 8%; }
.sk-cluster-4 { top: 30%; right: 15%; }

/* === THE THRESHOLD === */
.threshold {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to bottom, var(--silver-mist), var(--ash));
}

.threshold-content {
  padding-bottom: 25vh;
  padding-left: 15%;
  position: relative;
}

.site-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4.8rem);
  color: var(--near-black);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ledger-line {
  height: 1px;
  background: var(--steel);
  margin: 1.5rem 0;
  width: 50vw;
}

.ledger-line-reverse {
  margin-left: auto;
  margin-right: 0;
  width: 40vw;
}

.threshold-subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--graphite);
  max-width: 480px;
}

/* === THE EXCHANGE FIELD === */
.exchange {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 120px;
  padding-bottom: 120px;
}

.exchange-upper {
  align-self: flex-end;
  max-width: 560px;
  padding-right: 10%;
}

.exchange-lower {
  align-self: flex-start;
  padding-left: 10%;
  max-width: 480px;
}

.transaction-svg { width: 100%; height: auto; }

.tx-path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1.5s ease;
}

.exchange.active .tx-path {
  stroke-dashoffset: 0;
}

.node {
  transition: fill 0.3s ease;
}

.node:hover {
  fill: rgba(147,197,253,0.3);
}

/* === THE LEDGER === */
.ledger {
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.ledger-content {
  margin-left: 20%;
  max-width: 720px;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  color: var(--charcoal);
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.ledger-entries {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ledger-pair {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--silver-mist);
}

.ledger-debit, .ledger-credit {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.05em;
  color: var(--graphite);
}

.ledger-debit { text-align: left; }
.ledger-credit { text-align: right; color: var(--charcoal); }

/* === THE SETTLEMENT === */
.settlement {
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
}

.settlement-rail {
  position: absolute;
  left: 33%;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--steel);
  opacity: 0.3;
}

.settlement-content {
  margin-left: 60%;
  max-width: 500px;
}

.body-text {
  color: var(--slate);
  margin-bottom: 1.25rem;
}

.highlight {
  background: var(--graphite);
  color: var(--ghost-white);
  padding: 2px 8px;
  border-radius: 2px;
  display: inline;
  animation: highlight-fade 300ms ease forwards;
}

/* === THE RESIDUAL === */
.residual {
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 10vh;
}

.residual-content {
  padding-left: 15%;
  max-width: 560px;
}

.residual-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  color: var(--charcoal);
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.residual-contact {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  letter-spacing: 0.05em;
  color: var(--graphite);
}

.mono-text { font-family: var(--font-mono); }

/* === REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .clearing { padding: clamp(3rem, 8vw, 6rem) 8%; }
  .threshold-content { padding-left: 0; }
  .exchange-upper { align-self: center; padding-right: 0; }
  .exchange-lower { padding-left: 0; }
  .ledger-content { margin-left: 0; }
  .settlement-content { margin-left: 0; }
  .settlement-rail { display: none; }
  .residual-content { padding-left: 0; }
  .ledger-line { width: 60%; }
  .skeleton-cluster { display: none; }
  .dot-grid { background-size: 48px 48px; }
  .ledger-pair { flex-direction: column; gap: 0.25rem; }
  .ledger-credit { text-align: left; }
}