/* ============================================================
   Spade-inspired visual layer for Kestrel
   Geist + Geist Mono · white canvas · grid elements · corner ticks
   deep-forest dark sections · bright lime accent · animated stats
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Override Kestrel tokens with Spade-style choices */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, "Roboto Mono", monospace;

  /* Pure white canvas, light sage alt */
  --canvas:   #FFFFFF;
  --canvas-2: #F3F5EF;
  --canvas-3: #E7EBE0;
  --line:     #E6E6E0;
  --line-strong: #CFCFC6;

  --forest:      #16240E;   /* deep section background */
  --forest-2:    #1E2E15;
  --forest-3:    #25371B;
  --lime:        #A6E15E;   /* bright accent */
  --lime-bright: #B4EC68;
  --lime-soft:   #C9E8A6;
}

body { font-family: var(--font-sans); background: #FFFFFF; }

/* ---------- Display headline (grotesk, tight) ---------- */
.spade-h {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
  color: var(--ink);
  margin: 0;
}
.spade-h .hl { color: var(--ink); }
.dark-section .spade-h { color: #F4F7EE; }
.dark-section .spade-h .hl { color: var(--lime); }

/* All light sections are pure white — separation via hairlines, not fills.
   Reserve color/grids/panels for intentional highlights only. */
.section.alt { background: #FFFFFF; }

/* ---------- Dark forest section ---------- */
.dark-section {
  background: var(--forest);
  color: #E8EFDF;
  position: relative;
  overflow: hidden;
}
.dark-section .eyebrow { color: var(--lime); }
.dark-section p { color: #C2CDB5; }
.dark-section .mono-eyebrow { color: var(--lime); }

/* faint topo texture for dark sections */
.dark-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(166,225,94,0.04) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(166,225,94,0.04) 0 1px, transparent 1px 64px);
  pointer-events: none;
  opacity: 0.6;
}
.dark-section .site-wrap { position: relative; z-index: 1; }

/* ---------- Monospace eyebrow with ► marker ---------- */
.mono-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mono-eyebrow::before {
  content: "\25BA";
  color: var(--moss);
  font-size: 9px;
}
.dark-section .mono-eyebrow::before { color: var(--lime); }

/* ---------- Corner-tick frame ---------- */
.tick-frame {
  position: relative;
  padding: 22px 24px;
}
.tick-frame > .tk {
  position: absolute;
  width: 12px; height: 12px;
  border-color: var(--line-strong);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.tick-frame > .tk-tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.tick-frame > .tk-tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.tick-frame > .tk-bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.tick-frame > .tk-br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.dark-section .tick-frame > .tk { border-color: rgba(166,225,94,0.5); }

/* ---------- Monospace data chip ---------- */
.data-chip {
  font-family: var(--mono);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  background: var(--canvas);
  position: relative;
}
.dark-section .data-chip {
  background: transparent;
  border-color: rgba(166,225,94,0.28);
}
.data-chip .dc-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px;
}
.data-chip .dc-label::before { content: "\25BA"; font-size: 8px; }
.dark-section .data-chip .dc-label { color: var(--lime); }
.data-chip .dc-value {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
  letter-spacing: 0;
}
.dark-section .data-chip .dc-value { color: #E8EFDF; }

/* ---------- Stat frame (giant figure) ---------- */
.stat-frame {
  position: relative;
  padding: 26px 28px 30px;
}
.stat-frame .sf-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 28px;
  max-width: 200px;
  line-height: 1.4;
}
.stat-frame .sf-eyebrow::before { content: "\25BA"; color: var(--moss); font-size: 8px; flex: 0 0 auto; }
.stat-frame .sf-value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 72px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dark-section .stat-frame .sf-eyebrow { color: var(--lime-soft); }
.dark-section .stat-frame .sf-eyebrow::before { color: var(--lime); }
.dark-section .stat-frame .sf-value { color: var(--lime); }

/* ---------- Transaction-style feature card ---------- */
.feat-card {
  background: var(--canvas);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  padding: 20px 22px;
  display: flex; align-items: center; gap: 18px;
}

/* ---------- Lime button ---------- */
.btn-lime {
  background: var(--lime);
  color: var(--forest);
  border-color: var(--lime);
  font-weight: 600;
}
.btn-lime:hover { background: var(--lime-bright); border-color: var(--lime-bright); box-shadow: 0 2px 14px rgba(166,225,94,0.4); }

/* ---------- Scatter float-in ---------- */
@keyframes chip-float-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chip-float { animation: chip-float-in 680ms var(--ease-quiet) both; }

@keyframes drift {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.drift { animation: drift 6s ease-in-out infinite; }

@keyframes topo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.topo-spin { animation: topo-spin 70s linear infinite; transform-origin: center; }

/* ESG illustration motion */
@keyframes globe-spin { from { transform: scaleX(1); } 50% { transform: scaleX(0.2); } to { transform: scaleX(1); } }
.globe-spin { animation: globe-spin 14s ease-in-out infinite; }
@keyframes esg-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.esg-pulse { animation: esg-pulse 2.4s ease-in-out infinite; }
@keyframes scales-tip { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.scales-tip { animation: scales-tip 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .topo-spin, .globe-spin, .esg-pulse, .scales-tip { animation: none !important; }
}

/* ---------- Reveal-on-scroll (shared) ---------- */
.sp-reveal { opacity: 0; transform: translateY(20px); transition: opacity 720ms var(--ease-quiet), transform 720ms var(--ease-quiet); }
.sp-reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Section-level scroll reveal ---------- */
.sec-reveal { opacity: 0; transform: translateY(26px); transition: opacity 760ms var(--ease-quiet), transform 760ms var(--ease-quiet); }
.sec-reveal.sec-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .chip-float, .drift, .sp-reveal, .sec-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Grid background ---------- */
.grid-bg {
  position: relative;
}
.grid-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(78,90,65,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(78,90,65,0.07) 1px, transparent 1px);
  background-size: 88px 88px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 55%, transparent 100%);
}
.grid-bg > * { position: relative; z-index: 1; }

/* dashed grid variant (for reward/criteria-style sections) */
.grid-dashed {
  background-image:
    repeating-linear-gradient(to right, transparent 0 calc(100%/6 - 1px), rgba(78,90,65,0.14) calc(100%/6 - 1px) calc(100%/6)),
    repeating-linear-gradient(to bottom, transparent 0 119px, rgba(78,90,65,0.14) 119px 120px);
}

/* ---------- Edge tick rails (hero) ---------- */
.edge-ticks { position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none; z-index: 2; }
.edge-ticks.left { left: 8px; }
.edge-ticks.right { right: 8px; }
.edge-ticks::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, var(--line-strong) 0 1.5px, transparent 1.5px 26px);
}
.edge-ticks .edge-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--ink); font-size: 18px; line-height: 1;
}
.edge-ticks.left .edge-arrow { left: -2px; }
.edge-ticks.right .edge-arrow { right: -2px; }
.dark-section .edge-ticks::before { background-image: repeating-linear-gradient(to bottom, rgba(166,225,94,0.4) 0 1.5px, transparent 1.5px 26px); }
.dark-section .edge-ticks .edge-arrow { color: var(--lime); }

/* ---------- Big rounded section card (Spade hero panel) ---------- */
.panel-round {
  border-radius: 28px;
  border: 1px solid var(--line);
}
.dark-section.panel-round { border-color: rgba(166,225,94,0.18); }

/* Buttons → mono everywhere for the Spade feel */
.btn { font-family: var(--mono); letter-spacing: 0; }

/* Chips → mono */
.chip { font-family: var(--mono); }

/* ---------- Sticky mini-nav (left rail of section dots) ---------- */
.mini-nav { transition: opacity .25s; }
.mini-nav-dot { transition: opacity .2s; }
.mini-nav-dot:hover .mini-nav-dot-mark { transform: scale(1.35); }
.mini-nav:hover .mini-nav-label,
.mini-nav-dot:focus-visible .mini-nav-label { opacity: 1 !important; transform: translateX(0) !important; }
@media (max-width: 1240px) { .mini-nav { display: none !important; } }

/* ---------- Disclosure-concerns ticker (native-scroll infinite loop + drag) ---------- */
.rf-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.rf-strip::-webkit-scrollbar { display: none; }
.rf-strip > div { white-space: nowrap; }

/* Clickable source rows (CSV Source Provenance) */
.src-row { transition: background .14s; }
.src-row:hover { background: var(--canvas-2); }
.src-row:hover .arrow { transform: translateX(3px); }
.dropped-row { transition: background .14s; border-radius: 6px; }
.dropped-row:hover { background: var(--canvas-2); }

/* ---------- Leaderboard chip + overlay ---------- */
.lb-chip { transition: background .18s, border-color .18s, transform .18s; }
.lb-chip:hover { background: rgba(166,225,94,0.20) !important; border-color: rgba(166,225,94,0.7) !important; transform: translateY(-1px); }
.lb-row { transition: background .15s; }
.lb-row:hover { background: rgba(255,255,255,0.05); }

/* ---------- Share (copy as image) button ---------- */
.share-btn { transition: color .18s, border-color .18s, background .18s, opacity .18s; }
.share-btn:hover { color: var(--moss-deep); border-color: var(--moss); }
.dark-section .share-btn:hover { color: var(--lime); border-color: rgba(166,225,94,0.6); }

/* ---------- Peer-median ghost marker ---------- */
.peer-ghost { position: relative; }
.peer-ghost-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-3); opacity: .55; }
.dark-section .peer-ghost-mark { background: #C2CDB5; }

/* ---------- Glowing cursor-follow border (Aceternity-style, recoloured to Kestrel) ----------
   Paired with <GlowingEffect/> in spade.jsx. A conic-gradient arc is masked to the host's
   rounded border and rotated toward the cursor. Swap the three --ge-c* vars for a different
   glow — the original Aceternity rainbow was #dd7bbb / #d79f1e / #5a922c / #4c7894. */
.glow-effect {
  position: absolute; inset: 0;
  border-radius: var(--ge-radius, 12px);
  pointer-events: none;
  z-index: 3;
  --ge-c1: var(--moss);       /* arc flank */
  --ge-c2: var(--lime);       /* arc highlight — the point chasing the cursor */
  --ge-c3: var(--moss-deep);  /* arc flank */
}
.glow-effect::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: var(--ge-border, 1.5px);
  background: conic-gradient(
    from calc((var(--ge-start, 0) - var(--ge-spread, 45)) * 1deg) at 50% 50%,
    transparent 0deg,
    var(--ge-c1) calc(var(--ge-spread, 45) * 0.5deg),
    var(--ge-c2) calc(var(--ge-spread, 45) * 0.85deg),
    var(--ge-c2) calc(var(--ge-spread, 45) * 1.15deg),
    var(--ge-c3) calc(var(--ge-spread, 45) * 1.5deg),
    transparent calc(var(--ge-spread, 45) * 2deg)
  );
  /* keep only the border ring: border-box XOR padding-box */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: var(--ge-active, 0);
  transition: opacity .3s ease;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ge-c2) 85%, transparent))
          drop-shadow(0 0 10px color-mix(in srgb, var(--ge-c2) 60%, transparent));
}
@media (prefers-reduced-motion: reduce) { .glow-effect { display: none; } }