/* ==========================================================================
   LANDING: Transparency
   The page is an inspection pass. A scanner sweeps the project as you
   scroll, each section is a different instrument, and every reading
   declares its own confidence. Nothing is drawn that isn't measured.
   ========================================================================== */

/* ---- Registered properties, so gauges and counters can be animated ------ */

@property --sweep   { syntax: '<angle>';   initial-value: 0deg; inherits: false; }
@property --fill    { syntax: '<integer>'; initial-value: 0;    inherits: false; }
@property --count   { syntax: '<integer>'; initial-value: 0;    inherits: false; }
@property --beam    { syntax: '<number>';  initial-value: 0;    inherits: false; }

/* ==========================================================================
   The scanner rail: a vertical beam that tracks scroll down the page
   ========================================================================== */

.scanrail {
  position: fixed;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 30;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0,
    var(--line) 12%,
    var(--line) 88%,
    transparent 100%);
}

.scanrail::after {
  content: '';
  position: absolute;
  left: -4px;
  width: 10px;
  height: 140px;
  border-radius: 6px;
  background: linear-gradient(180deg,
    transparent,
    rgba(255, 196, 79, 0.85) 40%,
    rgba(255, 196, 79, 0.85) 60%,
    transparent);
  filter: blur(1px);
  animation: railtrack linear both;
  animation-timeline: scroll(root block);
}

@keyframes railtrack {
  from { top: 0; }
  to   { top: calc(100% - 140px); }
}

.scanrail-pct {
  position: fixed;
  left: 16px;
  bottom: 28px;
  z-index: 30;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  counter-reset: scanpct var(--fill);
  animation: scanpct linear both;
  animation-timeline: scroll(root block);
}

.scanrail-pct::after { content: counter(scanpct) '% INSPECTED'; }

@keyframes scanpct { from { --fill: 0; } to { --fill: 100; } }

@media (max-width: 1100px) { .scanrail, .scanrail-pct { display: none; } }

/* ==========================================================================
   Instrument cluster: token facts as gauges
   ========================================================================== */

.cluster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
}

.gauge {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 196, 79, 0.05), transparent 70%),
    rgba(14, 17, 23, 0.86);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: gaugein 0.8s var(--ease) both;
  animation-timeline: view();
  animation-range: entry 0% entry 55%;
}

@keyframes gaugein {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* A hairline that sweeps the panel once as it arrives. */
.gauge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 79, 0.16), transparent);
  translate: -100% 0;
  animation: gaugewipe 1.2s var(--ease) both;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
  pointer-events: none;
}

@keyframes gaugewipe { to { translate: 200% 0; } }

.gauge-ring {
  position: relative;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
}

.gauge-dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--accent) calc(var(--sweep)), rgba(255,255,255,0.06) 0),
    var(--surface-1);
  mask: radial-gradient(circle, transparent 56%, #000 57%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
  animation: dialdraw 1.4s var(--ease) both;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
}

@keyframes dialdraw { from { --sweep: 0deg; } to { --sweep: var(--to, 300deg); } }

.gauge-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.gauge-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.gauge-foot { font-size: var(--step--1); color: var(--text-muted); }

/* A counter that runs up to the real number as the panel enters view. */
.odo {
  counter-reset: odo var(--count);
  animation: odorun 1.8s var(--ease-out-hard) both;
  animation-timeline: view();
  animation-range: entry 0% entry 80%;
}
.odo::after { content: counter(odo); }
@keyframes odorun { from { --count: 0; } to { --count: var(--to-count, 0); } }

/* ==========================================================================
   Supply column: allocation as a single 404M stack
   ========================================================================== */

.stack-wrap {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}

/* The bands drive off the column's timeline, not their own. A band that
   starts at scaleY(0) has a zero-height box, which collapses a view()
   timeline on itself, and the smallest two could then never resolve. The
   container keeps a stable height, so all five share one clock. */
.stack {
  view-timeline-name: --supply;
  view-timeline-axis: block;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--well);
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  min-height: 420px;
}

.stack-seg {
  position: relative;
  flex: var(--share) 0 0;
  background: var(--seg-colour);
  transform-origin: bottom;
  animation: segrise 0.9s var(--ease) both;
  animation-timeline: --supply;
}

@keyframes segrise { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }

.stack-total {
  position: absolute;
  inset: auto 0 100% 0;
  padding-bottom: var(--space-3);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

.alloc-rows { display: grid; align-content: center; gap: var(--space-2); }

.alloc-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}

.alloc-row:hover { background: rgba(255, 255, 255, 0.03); }

.alloc-key {
  width: 14px; height: 14px; border-radius: 4px;
  background: var(--seg-colour);
}

.alloc-amt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.alloc-share {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  min-width: 5.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A hairline between bands, so neighbouring shades of the same amber stay
   countable rather than merging into one block. */
.stack-seg + .stack-seg { border-bottom: 1px solid rgba(0, 0, 0, 0.5); }

@media (max-width: 760px) {
  .stack-wrap { grid-template-columns: minmax(0, 1fr); }
  /* row-reverse, not row: the DOM is ordered smallest-first so that
     column-reverse puts Community at the top on desktop. Laid out
     horizontally it has to flip the same way to read left-to-right. */
  .stack { min-height: 150px; flex-direction: row-reverse; }
  .stack-seg { transform-origin: left; animation-name: segwide; }
  .stack-seg + .stack-seg { border-bottom: 0; border-right: 1px solid rgba(0, 0, 0, 0.5); }
  .stack-total { inset: auto 0 100% 0; text-align: left; }
}

@keyframes segwide { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   Wallet nodes: four identified addresses on a grid
   ========================================================================== */

.nodes { display: grid; gap: var(--space-4); }

.node {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-9);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(14, 17, 23, 0.8);
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  animation: gaugein 0.7s var(--ease) both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}

.node:hover { border-color: var(--accent); transform: translateX(4px); }

/* The connector dot and the line linking each node to the one below. */
.node::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 50%;
  translate: -50% -50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--ground);
}

.node:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 26px;
  top: calc(50% + 8px);
  width: 1px;
  height: calc(100% + var(--space-4) - 16px);
  translate: -50% 0;
  background: repeating-linear-gradient(180deg,
    var(--line) 0 4px, transparent 4px 9px);
}

.node-id { flex: 1 1 400px; min-width: 0; }

.node-addr {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  word-break: break-all;
  user-select: all;
}

/* ==========================================================================
   Lock panel: liquidity
   ========================================================================== */

.lockpanel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7);
  border: 1px solid rgba(255, 196, 79, 0.3);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 140% at 8% 50%, rgba(255, 196, 79, 0.08), transparent 70%),
    rgba(14, 17, 23, 0.85);
}

.lock { flex: 0 0 auto; }
.lock .lock-shackle {
  transform-origin: 32px 26px;
  animation: shackleopen 4s var(--ease-in-out) infinite;
}

@keyframes shackleopen {
  0%, 20%   { transform: translateY(0) rotate(0deg); }
  38%, 72%  { transform: translateY(-7px) rotate(-26deg); }
  92%, 100% { transform: translateY(0) rotate(0deg); }
}

/* ==========================================================================
   Reduced motion: the design without the movement
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .verify-beam, .lock .lock-shackle,
  .trace .pulse, .lamp i, .console-bar .pip { animation: none !important; }
  /* With the pulse stopped, show the whole trace rather than a stub. */
  .trace .pulse { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .scanrail::after { animation: none; top: 0; }
  .gauge, .gauge::after, .node, .stack-seg, .verify-code span, .stamp {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .gauge-dial { animation: none; --sweep: var(--to, 300deg); }
  .odo { animation: none; --count: var(--to-count, 0); }
}