/* style.css — 4626.fun cinematic scroll experience v4
   WebGL particle morph + cinematic hero upgrade */

/* ─── FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300;1,6..72,400;1,6..72,500&display=swap');

:root {
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-serif: 'Newsreader', 'Georgia', 'Cambria', serif;

  /* ─ Editorial tokens (apply across all chapters) ─ */
  --rule-color: rgba(255, 255, 255, 0.16);
  --rule-color-soft: rgba(255, 255, 255, 0.08);
  --rule-hairline: 1px;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --kicker-size: 10px;
  --kicker-tracking: 0.22em;
  --serif-italic-style: italic 400 1em/1.1 var(--font-serif);

  --color-bg: #000000;
  --color-surface: #050505;
  --color-surface-2: #0A0A0A;
  --color-surface-glass: rgba(0, 0, 0, 0.72);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);
  --color-border-accent: rgba(0, 82, 255, 0.2);
  --color-text: #F0F0F2;
  --color-text-muted: #C8CDD8;
  --color-text-faint: #8A92A4;
  --color-accent: #0052FF;
  --color-accent-bright: #3B82FF;
  --color-accent-glow: rgba(0, 82, 255, 0.15);
  --color-accent-glow-strong: rgba(0, 82, 255, 0.35);

  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --glass-blur: blur(24px);
  --glass-blur-heavy: blur(40px);

  /* Elegance tokens */
  --glass-bg: rgba(0, 0, 0, 0.55);
  --glass-border: rgba(255, 255, 255, 0.04);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* 3D wireframe grid is rendered via Three.js in app.js */

/* Y-axis line removed — rendered in Three.js only */

/* ─── 3D CONTENT TILT — components match XYZ grid plane via scroll-driven transform on .scene-pin ─── */

/* ─── GPU COMPOSITING: promote all scroll-animated layers ─── */
.scene-pin,
.token-img-ring,
.share-img-ring,
.strategy-card-inner,
.cca-camera,
.cca-deposit-coin,
.cca-share-token,
.cca-node-graph,
.cca-intro,
.cca-summary,
.dual-headline,
.dual-graph,
.dual-side,
.dual-divider,

.hero-streak,
.hero-content,
.hero-floats,
.hero-parallax-layer,
.vaults-container,
.vault-card,
.close-phase-a,
.close-cards-layer,
.close-vault-layer,
.close-brand,
.close-cta,
.close-tag,
#morph-zone,
.ng-body,
.engine-hub,
.ds-card,
.vol-narrative {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── THREE.JS CANVAS ─── */
#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  will-change: contents;
  contain: strict;
}

/* ─── AMBIENT ORBS ─── */
.ambient-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(120px);
  opacity: 0.06;
}
.orb-1 {
  width: 600px;
  height: 600px;
  background: var(--color-accent);
  top: -200px;
  right: -200px;
  animation: orb-drift-1 20s ease-in-out infinite alternate;
}
.orb-2 {
  width: 500px;
  height: 500px;
  background: #6366f1;
  bottom: -150px;
  left: -150px;
  animation: orb-drift-2 25s ease-in-out infinite alternate;
}
.orb-3 {
  width: 400px;
  height: 400px;
  background: var(--color-accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: orb-drift-3 18s ease-in-out infinite alternate;
  opacity: 0.03;
}
@keyframes orb-drift-1 { to { transform: translate(-80px, 60px); } }
@keyframes orb-drift-2 { to { transform: translate(60px, -40px); } }
@keyframes orb-drift-3 { to { transform: translate(-50%, -50%) scale(1.3); } }

/* ─── SCROLL PROGRESS — Vertical luminous left-edge line ─── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 0%;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-bright));
  z-index: 200;
  transition: height 80ms linear;
  box-shadow: 0 0 8px var(--color-accent-glow-strong), 0 0 20px var(--color-accent-glow);
}
.scroll-progress::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-bright);
  box-shadow: 0 0 12px var(--color-accent), 0 0 24px var(--color-accent-glow-strong);
  opacity: 1;
}

/* ─── NAV ─── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem clamp(1rem, 4vw, 4rem);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.6s var(--ease-cinematic), transform 0.6s var(--ease-cinematic), border-color 0.4s ease;
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  background: rgba(0, 0, 0, 0.65);
  border-bottom: 1px solid var(--glass-border);
}
.nav.visible {
  opacity: 1;
  transform: translateY(0);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.brand-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}
.brand-icon-svg {
  flex-shrink: 0;
}
.brand-icon-transparent {
  border-radius: 8px;
  background: transparent;
  mix-blend-mode: screen;
}
.brand-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.brand-dot {
  color: var(--color-text-muted);
  font-weight: 400;
  margin: 0;
}
.brand:hover .brand-dot {
  color: var(--color-accent);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-link {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}
.nav-link:hover { color: var(--color-text); }
.nav-btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--color-border-accent);
  background: var(--color-surface-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: all 0.5s var(--ease-cinematic);
  border-radius: 2px;
}
.nav-btn:hover {
  border-color: var(--color-accent);
  background: rgba(0, 82, 255, 0.08);
  box-shadow: 0 0 30px rgba(0, 82, 255, 0.12), inset 0 0 12px rgba(0, 82, 255, 0.04);
}

/* ─── SCROLL SCENES ─── */
.scroll-container {
  position: relative;
  z-index: 1;
}
.scroll-scene {
  position: relative;
  transform-style: preserve-3d;
  pointer-events: none;   /* let clicks pass through to sticky scene-pin children */
}
.scroll-scene > .scene-pin {
  pointer-events: auto;   /* re-enable on the pinned viewport layer */
}
.scene-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ─── SECTION LABEL ─── */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.5;
}

/* ─── CTA BUTTONS ─── */
.cta-button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding: 1rem 2.5rem;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  transition: all 0.5s var(--ease-cinematic);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.cta-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-cinematic);
}
.cta-button:hover {
  background: var(--color-accent-bright);
  border-color: var(--color-accent-bright);
  box-shadow: 0 4px 40px rgba(0, 82, 255, 0.3), 0 0 80px rgba(0, 82, 255, 0.12);
  transform: translateY(-1px);
}
.cta-button:hover::after { opacity: 1; }
.cta-button.secondary {
  background: var(--color-surface-glass);
  border-color: var(--color-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.cta-button.secondary:hover {
  border-color: var(--color-border-accent);
  background: rgba(0, 82, 255, 0.08);
  box-shadow: 0 4px 40px rgba(0, 82, 255, 0.1);
}

/* ═══════════════════════════════════════
   CHAPTER 1: HERO — CINEMATIC UPGRADE
   ═══════════════════════════════════════ */
#ch-hero .scene-pin {
  flex-direction: row;
  padding: 0 clamp(2rem, 4vw, 6rem);
}


/* Blue streak — cinematic vertical light */
.hero-streak {
  position: absolute;
  left: 28%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: center bottom;
  opacity: 0;
  transform: scaleY(0);
}
.hero-streak-core {
  width: 1.5px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 82, 255, 0.3) 8%,
    var(--color-accent) 18%,
    var(--color-accent-bright) 50%,
    var(--color-accent) 82%,
    rgba(0, 82, 255, 0.3) 92%,
    transparent 100%
  );
}
.hero-streak-bloom {
  position: absolute;
  inset: 0;
  width: 80px;
  margin-left: -40px;
  background: linear-gradient(180deg,
    transparent 5%,
    rgba(0, 82, 255, 0.08) 20%,
    rgba(59, 130, 255, 0.12) 50%,
    rgba(0, 82, 255, 0.08) 80%,
    transparent 95%
  );
  filter: blur(30px);
}

/* Hero content */
.hero-content {
  margin-left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
  position: relative;
  z-index: 2;
}
.hero-section-label {
  opacity: 0;
  transform: translateY(12px);
}

/* Character-level headline animation */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
.hero-word {
  display: inline-block;
}
.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(40deg);
  background: linear-gradient(180deg, #FFFFFF 0%, #C8C8C8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  will-change: transform, opacity;
}
.hero-char-dot {
  background: linear-gradient(180deg, var(--color-accent-bright) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow behind headline */
.hero-headline-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 400px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(0, 82, 255, 0.12) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  filter: blur(40px);
}

/* Support lines stagger */
.hero-support {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: clamp(0.9rem, 0.7rem + 0.6vw, 1.25rem);
  color: var(--color-text-muted);
  font-weight: 300;
  line-height: 1.6;
}
.hero-support-line {
  opacity: 0;
  transform: translateY(16px);
}

.hero-chain {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px);
}
.hero-chain-text {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero-chain-divider {
  width: 1px;
  height: 14px;
  background: var(--color-border);
  margin: 0 4px;
}
.chain-logo {
  height: 20px;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease-out);
}
.chain-logo-base {
  height: 22px;
  opacity: 0.85;
}
.chain-logo:hover { opacity: 1; }

/* Hero partner strip */
.hero-partners {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(12px);
}
.hero-partner-logo {
  height: 22px;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.3s var(--ease-out);
  object-fit: contain;
}
.hero-partner-logo:hover { opacity: 1; }
.hero-cta {
  margin-top: 3rem;
  opacity: 0;
  transform: translateY(16px);
}

/* Hero floating tokens — 3 parallax depth layers */
.hero-float-tokens {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.hero-float-layer {
  position: absolute;
  inset: 0;
}
.hero-float {
  position: absolute;
  border-radius: 4px;
  object-fit: cover;
}

/* Back layer — small, dim, slow-moving (token logos — no circle clip) */
.hero-float-layer-back .hero-float {
  opacity: 0.06;
  filter: blur(2px);
  border-radius: 10px;
  object-fit: contain;
}
.hero-float-back-1 {
  width: 60px; height: 60px;
  top: 15%; right: 22%;
  animation: float-slow-1 22s ease-in-out infinite alternate;
}
.hero-float-back-2 {
  width: 48px; height: 48px;
  bottom: 22%; right: 30%;
  animation: float-slow-2 26s ease-in-out infinite alternate;
}
.hero-float-back-3 {
  width: 44px; height: 44px;
  top: 60%; left: 10%;
  animation: float-slow-3 20s ease-in-out infinite alternate;
}

/* Mid layer — medium */
.hero-float-layer-mid .hero-float {
  opacity: 0.10;
  filter: blur(0.5px);
}
.hero-float-mid-1 {
  width: 80px; height: 80px;
  top: 20%; right: 8%;
  animation: float-mid-1 16s ease-in-out infinite alternate;
}
.hero-float-mid-2 {
  width: 64px; height: 64px;
  bottom: 18%; right: 14%;
  animation: float-mid-2 18s ease-in-out infinite alternate;
}

/* Front layer — large, brighter, faster parallax */
.hero-float-layer-front .hero-float {
  opacity: 0.18;
}
.hero-float-front-1 {
  width: 120px; height: 120px;
  top: 10%; right: 4%;
  animation: float-front-1 12s ease-in-out infinite alternate;
}
.hero-float-front-2 {
  width: 88px; height: 88px;
  bottom: 25%; left: 6%;
  border-radius: 14px;
  animation: float-front-2 14s ease-in-out infinite alternate;
}

@keyframes float-slow-1 { to { transform: translate(-8px, 12px); } }
@keyframes float-slow-2 { to { transform: translate(10px, -8px); } }
@keyframes float-slow-3 { to { transform: translate(-6px, -10px); } }
@keyframes float-mid-1 { to { transform: translate(-15px, 10px) rotate(4deg); } }
@keyframes float-mid-2 { to { transform: translate(12px, -15px) rotate(-3deg); } }
@keyframes float-front-1 { to { transform: translate(-20px, 15px) rotate(6deg); } }
@keyframes float-front-2 { to { transform: translate(-10px, -12px) rotate(4deg); } }

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
}
.scroll-cue-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--color-accent) 60%, var(--color-accent));
  animation: scroll-cue-pulse 2s ease-in-out infinite;
}
@keyframes scroll-cue-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50% { opacity: 0.8; transform: scaleY(1); }
}
.scroll-cue-text {
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(138, 143, 152, 0.55);
}

/* ═══════════════════════════════════════
   CHAPTER 2: TOKEN JOURNEY
   ═══════════════════════════════════════ */
.token-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: bottom center;
  opacity: 0;
}
.token-line-core {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--color-accent) 15%, var(--color-accent) 85%, transparent);
}
.token-line-glow {
  position: absolute;
  inset: 0;
  width: 48px;
  margin-left: -24px;
  background: var(--color-accent);
  filter: blur(24px);
  opacity: 0.08;
}

.token-top-copy {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.25rem);
  color: rgba(200, 205, 214, 0.78);
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 1.7;
  opacity: 0;
}

.side-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 300;
  opacity: 0;
}
.side-label-left {
  left: 10%;
  color: rgba(0, 82, 255, 0.5);
}
.side-label-right {
  right: 10%;
  color: rgba(160, 165, 174, 0.75);
}

.top-label {
  position: absolute;
  top: 10%;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 300;
  opacity: 0;
}
.top-label-left {
  left: 10%;
  color: rgba(0, 82, 255, 0.4);
}
.top-label-right {
  right: 10%;
  color: rgba(160, 165, 174, 0.72);
}

.camera-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* ─── Token images ─── */
.token-coin, .token-share {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform, opacity;
  transform-origin: center top;
}
/* Label goes above the icon via order */
.token-coin .token-label,
.token-share .token-label {
  order: -1;
}
.token-coin { opacity: 0; }
.token-share { opacity: 0; }

.token-img-ring {
  width: 96px;
  height: 96px;
  border-radius: 4px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03));
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(0, 82, 255, 0.08);
  position: relative;
}
.token-img-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 5px;
  background: conic-gradient(from 0deg, transparent 0%, var(--color-accent) 25%, transparent 50%);
  opacity: 0.15;
  animation: ring-spin 8s linear infinite;
  z-index: -1;
  filter: blur(4px);
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

.token-img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
  display: block;
}

.share-img-ring {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(0, 82, 255, 0.3), rgba(0, 82, 255, 0.05));
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(0, 82, 255, 0.15);
  position: relative;
}
.share-img-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  background: conic-gradient(from 90deg, transparent 0%, var(--color-accent) 25%, transparent 50%);
  opacity: 0.2;
  animation: ring-spin 10s linear infinite reverse;
  z-index: -1;
  filter: blur(4px);
}
.share-img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.token-label {
  margin-bottom: 0.75rem;
  margin-top: 0;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(200, 205, 214, 0.82);
  font-weight: 400;
  opacity: 0;
}
.share-label {
  color: rgba(0, 82, 255, 0.75);
  font-weight: 400;
  font-size: 13px;
}

/* Token detail panels */
.token-detail {
  margin-top: 1rem;
  text-align: center;
  opacity: 0;
}
.detail-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  font-weight: 300;
  opacity: 0.7;
}
.detail-amount {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  font-weight: 200;
  white-space: nowrap;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.8);
}
.detail-desc {
  font-size: 0.75rem;
  color: rgba(200, 205, 214, 0.72);
  font-weight: 300;
  margin-top: 0.5rem;
  max-width: 200px;
  line-height: 1.6;
}

/* Deposit info */
/* ─── DEPOSIT INFO — borderless text block, centered in scene ─── */
.deposit-info {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  z-index: 5;
  width: max-content;
  max-width: 320px;
}
.split-info, .idle-badge {
  text-align: center;
  opacity: 0;
}
.deposit-label {
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}
.deposit-amount {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
}
.deposit-unit {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
}
.deposit-desc {
  font-size: clamp(0.7rem, 0.6rem + 0.3vw, 0.82rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  max-width: 300px;
  margin-top: 0.25rem;
}
.split-info {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 0.75rem));
}
.split-deployed {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 82, 255, 0.9);
  font-weight: 400;
}

.idle-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.idle-amount {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(200, 210, 225, 0.85);
  margin-top: 0.2rem;
}

/* ─── MORPH ZONE (WebGL particle morph) ─── */
.morph-zone {
  position: absolute;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}
#morph-canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.morph-label {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  z-index: 11;
}
.morph-label-text {
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0, 82, 255, 0.35);
  white-space: nowrap;
  font-weight: 300;
}
.morph-label-dots span {
  display: inline-block;
  font-size: 9px;
  color: rgba(0, 82, 255, 0.5);
  animation: morph-dot-blink 1.4s ease-in-out infinite;
}
.morph-label-dots span:nth-child(2) { animation-delay: 0.2s; }
.morph-label-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes morph-dot-blink {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}


/* ═══ Node Graph v2 — Figma-style clean edges with animated dashes ═══ */
.node-graph {
  position: absolute;
  top: 50%;
  left: calc(50% - 40px);
  transform: translateY(-50%);
  width: 920px;
  height: 500px;
  opacity: 0;
  z-index: 4;
}

/* SVG edge layer — fills container, no viewBox (uses pixel coords) */
.ng-edges-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* Base edge style — Figma-clean, visible against dark bg */
.ng-edge-line {
  fill: none;
  stroke: rgba(60, 120, 255, 0.28);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.ng-edge-idle {
  stroke: rgba(138, 143, 152, 0.18);
  stroke-width: 1.2;
}
.ng-edge-downstream {
  stroke: rgba(60, 120, 255, 0.2);
  stroke-width: 1.2;
}

/* Animated dash overlay — bright flowing particles along edges */
.ng-dash-flow {
  fill: none;
  stroke: rgba(80, 160, 255, 0.7);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 8 24;
  stroke-dashoffset: 0;
  animation: dashFlow 2.5s linear infinite;
  filter: url(#edgeGlow);
}
.ng-dash-idle {
  stroke: rgba(138, 143, 152, 0.3);
  stroke-width: 1.2;
  stroke-dasharray: 5 22;
  animation: dashFlow 5s linear infinite;
  filter: none;
}
.ng-dash-delay-1 { animation-delay: -0.35s; }
.ng-dash-delay-2 { animation-delay: -0.7s; }
.ng-dash-delay-3 { animation-delay: -1.05s; }
.ng-dash-delay-4 { animation-delay: -1.6s; }
.ng-dash-delay-5 { animation-delay: -2.0s; }

@keyframes dashFlow {
  to { stroke-dashoffset: -64; }
}

/* Node cards container */
.ng-nodes {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* All nodes are absolutely positioned */
.ng-node {
  position: absolute;
}

/* Deposit node — left anchor */
.ng-node-deposit {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.ng-node-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(0, 82, 255, 0.15);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 82, 255, 0.06);
}
.ng-node-icon img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
}
.ng-node-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ng-node-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
}
.ng-node-sub {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 210, 225, 0.7);
}

/* Engine Hub — center column */
.ng-node-hub {
  left: 230px;
  top: 50%;
  transform: translateY(-50%);
}
.ng-node-hub-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 1.4rem;
  border: 1px solid rgba(0, 82, 255, 0.12);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 82, 255, 0.06);
}
.ng-hub-icon {
  color: var(--color-accent);
  opacity: 0.7;
  margin-bottom: 0.15rem;
}
.ng-hub-label {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(220, 228, 240, 0.92);
  font-weight: 400;
}
.ng-hub-deploy {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(50, 130, 255, 0.85);
  margin-top: 0.25rem;
}
.ng-hub-amount {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.01em;
}

/* Strategy column — flex wrapper so expanded cards push siblings */
.ng-strat-column {
  position: absolute;
  left: 490px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  z-index: 2;
  overflow: visible;
}
/* Strategy cards — no longer individually positioned (override .ng-node absolute) */
.ng-strat-column .ng-node-strat {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  transform: none;
  z-index: 1;
  transition: z-index 0s;
}
.ng-strat-column .ng-node-strat:has(.strat-expanded) {
  z-index: 10;
}
.ng-strat-column .ng-node-strat.strat-sibling-dim {
  opacity: 0.3;
  transition: opacity 0.35s var(--ease-out);
}
.ng-strat-column .ng-node-strat:not(.strat-sibling-dim) {
  transition: opacity 0.35s var(--ease-out);
}

.strategy-card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  padding: 0.85rem 1rem;
  width: 200px;
  border-radius: 10px;
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.35s var(--ease-out), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  position: relative;
}
.strategy-card-inner:hover {
  border-color: rgba(60, 130, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 18px rgba(60, 130, 255, 0.08);
}
.strategy-card-inner.strat-expanded {
  border-color: rgba(60, 130, 255, 0.35);
  background: rgba(6, 8, 14, 0.97);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(60, 130, 255, 0.12);
  width: 240px;
}

/* Expand / collapse icon */
.strat-expand-icon {
  margin-left: auto;
  font-size: 12px;
  font-weight: 300;
  color: rgba(200, 210, 225, 0.4);
  transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
  line-height: 1;
  flex-shrink: 0;
}
.strategy-card-inner:hover .strat-expand-icon {
  color: rgba(60, 130, 255, 0.7);
}
.strategy-card-inner.strat-expanded .strat-expand-icon {
  transform: rotate(45deg);
  color: rgba(60, 130, 255, 0.9);
}

/* Expandable detail panel — collapsed by default via grid row trick */
.strat-detail-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.strat-detail-wrap {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out) 0.05s;
}
.strategy-card-inner.strat-expanded .strat-detail-panel {
  grid-template-rows: 1fr;
}
.strategy-card-inner.strat-expanded .strat-detail-wrap {
  opacity: 1;
  transition-delay: 0.12s;
}

.strat-detail-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(60, 130, 255, 0.25), transparent);
  margin: 0.55rem 0 0.45rem;
}
.strat-detail-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0.4rem;
}
.strat-detail-row:last-child {
  margin-bottom: 0.15rem;
}
.strat-detail-label {
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(140, 155, 180, 0.7);
  font-weight: 400;
}
.strat-detail-value {
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(210, 218, 230, 0.9);
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* Risk level colors */
.strat-risk-low {
  color: rgba(80, 220, 140, 0.95);
  font-weight: 400;
}
.strat-risk-med {
  color: rgba(255, 190, 60, 0.95);
  font-weight: 400;
}

/* Yield accent */
.strat-yield {
  font-family: var(--font-mono);
  color: rgba(80, 170, 255, 0.95);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.strat-card-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.1rem;
}
.strat-icon-img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: contain;
  flex-shrink: 0;
}
.strat-icon-raster { filter: brightness(1.1); }
.strat-name {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220, 228, 240, 0.88);
  font-weight: 400;
}
.strat-pct {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.strat-amount {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  color: rgba(200, 210, 225, 0.82);
  letter-spacing: 0.02em;
}
.strat-unit {
  font-size: 8px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(200, 210, 225, 0.88);
}
.strat-role {
  font-size: 9px;
  line-height: 1.45;
  color: rgba(200, 210, 225, 0.7);
  margin-top: 0.25rem;
  letter-spacing: 0.01em;
  font-weight: 300;
  max-width: 200px;
}

/* Downstream nodes */
.ng-ds-uni { left: 700px; top: 38%; transform: translateY(-50%); }
.ng-ds-met { left: 700px; bottom: 4%; }
.ng-ds-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(0, 82, 255, 0.1);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.ng-ds-logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}
.ng-ds-text {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 205, 214, 0.85);
  font-weight: 400;
}

/* Downstream node expandable behavior */
.ng-node-downstream {
  transition: opacity 0.4s var(--ease-out);
}
.ng-ds-inner[data-strat] {
  cursor: pointer;
  flex-wrap: wrap;
  white-space: normal;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  /* Anchor to right edge so expansion grows leftward */
  margin-left: auto;
}
.ng-ds-inner[data-strat]:hover {
  border-color: rgba(60, 130, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 18px rgba(60, 130, 255, 0.08);
}
.ng-node-downstream {
  transition: opacity 0.4s var(--ease-out);
}
.ng-ds-inner[data-strat].strat-expanded {
  border-color: rgba(60, 130, 255, 0.35);
  background: rgba(6, 8, 14, 0.97);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(60, 130, 255, 0.12);
  width: 220px;
  z-index: 10;
}
.ds-expand-icon {
  margin-left: auto;
  font-size: 10px;
  font-weight: 300;
  color: rgba(200, 210, 225, 0.4);
  transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
  line-height: 1;
  flex-shrink: 0;
}
.ng-ds-inner[data-strat]:hover .ds-expand-icon {
  color: rgba(60, 130, 255, 0.7);
}
.ng-ds-inner[data-strat].strat-expanded .ds-expand-icon {
  transform: rotate(45deg);
  color: rgba(60, 130, 255, 0.9);
}
.ng-ds-inner[data-strat] .strat-detail-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  flex-basis: 100%;
}
.ng-ds-inner[data-strat] .strat-detail-wrap {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out) 0.05s;
}
.ng-ds-inner[data-strat].strat-expanded .strat-detail-panel {
  grid-template-rows: 1fr;
}
.ng-ds-inner[data-strat].strat-expanded .strat-detail-wrap {
  opacity: 1;
  transition-delay: 0.12s;
}
/* Dim sibling downstream nodes */
.ng-node-downstream.strat-sibling-dim {
  opacity: 0.3 !important;
  transition: opacity 0.4s var(--ease-out);
}

/* Idle buffer node */
.ng-node-idle {
  left: 120px;
  bottom: -10px;
}
.ng-idle-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(138, 143, 152, 0.1);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-radius: 8px;
  white-space: nowrap;
}
.ng-idle-pct {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: rgba(138, 143, 152, 0.9);
  font-weight: 400;
}
.ng-idle-label {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(138, 143, 152, 0.7);
}
.ng-idle-amount {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(138, 143, 152, 0.6);
}


/* Token journey bottom copies */
.token-cross-copy {
  position: absolute;
  bottom: 14%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.25rem);
  color: rgba(200, 205, 214, 0.78);
  font-weight: 200;
  max-width: 28rem;
  margin: 0 auto;
  letter-spacing: 0.02em;
  line-height: 1.7;
  opacity: 0;
}
.token-entry-cue {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(138, 143, 152, 0.4);
  letter-spacing: 0.15em;
  opacity: 0;
}

.dual-copy {
  position: absolute;
  bottom: 12%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 1rem;
  opacity: 0;
}
.dual-copy p {
  font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 1.125rem);
  color: rgba(200, 205, 214, 0.75);
  font-weight: 200;
  line-height: 1.7;
  letter-spacing: 0.02em;
  max-width: 32rem;
  margin: 0 auto;
}
.dual-entry {
  position: absolute;
  bottom: 6%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(138, 143, 152, 0.4);
  letter-spacing: 0.15em;
  opacity: 0;
}
.fee-label {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 300;
  color: rgba(0, 82, 255, 0.3);
  opacity: 0;
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   CHAPTER 3: ACCRUE — PREMIUM REDESIGN
   ═══════════════════════════════════════ */
.accrue-container {
  width: 100%;
  max-width: 640px;
  padding: 0 2rem;
}
.accrue-intro {
  text-align: center;
  margin-bottom: 4rem;
  opacity: 0;
}
.accrue-desc {
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.25rem);
  font-weight: 300;
  color: rgba(200, 205, 214, 0.78);
  letter-spacing: 0.02em;
  line-height: 1.7;
}

/* Accrue — hero ratio number */
.accrue-ratio-display {
  text-align: center;
  margin-bottom: 3rem;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.accrue-ratio-display .ratio-accent {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 3rem + 4vw, 7rem);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--color-accent);
  text-shadow: 0 0 80px rgba(0, 82, 255, 0.18), 0 0 160px rgba(0, 82, 255, 0.06);
}
.ratio-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ratio-unit {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(200, 210, 225, 0.8);
}
.ratio-hairline {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.06);
}
.ratio-from {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(200, 210, 225, 0.88);
}

/* Clock — minimal date */
.accrue-clock {
  text-align: center;
  margin-bottom: 2.5rem;
  opacity: 0;
}
.clock-date {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem);
  letter-spacing: 0.2em;
  color: rgba(220, 225, 234, 0.78);
  line-height: 1;
  font-weight: 300;
}

/* ═══ WebGL Yield Curve ═══ */
.accrue-container-v2 {
  max-width: 780px;
}
.yield-curve-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 2rem;
  opacity: 0;
}
.yield-curve-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
/* Axis labels */
.yc-axis {
  position: absolute;
  pointer-events: none;
}
.yc-axis-y {
  left: -4px;
  top: 8%;
  bottom: 12%;
  width: 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.yc-axis-y .yc-label {
  position: absolute;
  right: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(200, 210, 225, 0.9);
  transform: translateY(50%);
  white-space: nowrap;
}
.yc-axis-x {
  bottom: -2px;
  left: 52px;
  right: 8%;
  height: 18px;
  position: absolute;
}
.yc-axis-x .yc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(200, 210, 225, 0.9);
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
.yc-axis-x .yc-label:first-child { transform: none; }
.yc-axis-x .yc-label:last-child { transform: translateX(-100%); }

/* Milestone callouts container */
#yc-milestones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Milestone callouts — refined frosted glass */
.yc-callout {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.yc-callout.active {
  opacity: 1;
  transform: translateY(0);
}
.yc-callout-pip {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px rgba(0, 82, 255, 0.5), 0 0 24px rgba(0, 82, 255, 0.15);
  transform: translate(-50%, 50%) scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.yc-callout.active .yc-callout-pip {
  transform: translate(-50%, 50%) scale(1);
}
.yc-callout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(10, 14, 24, 0.78);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 18px;
  transform: translateX(-50%);
  margin-left: 50%;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.yc-callout-day {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(200, 210, 225, 0.82);
  font-weight: 400;
}
.yc-callout-ratio {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.01em;
}
.yc-callout-apy {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: rgba(50, 130, 255, 0.9);
  letter-spacing: 0.04em;
}

/* Legacy timeline (hidden, kept for compat) */
.accrue-timeline {
  display: none;
  margin-bottom: 2.5rem;
  padding: 0 0.5rem;
  opacity: 0;
}
.timeline-track {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 1px;
}
.timeline-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(0, 82, 255, 0.3);
}
.timeline-head {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 12px rgba(0, 82, 255, 0.5), 0 0 24px rgba(0, 82, 255, 0.2);
}
.milestone {
  position: absolute;
  top: 50%;
}
.milestone-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%);
  transition: all 0.5s var(--ease-cinematic);
}
.milestone-dot.reached {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 6px rgba(0, 82, 255, 0.4);
}
.milestone-label {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: rgba(138, 143, 152, 0.45);
  white-space: nowrap;
  transition: color 0.5s var(--ease-cinematic);
}
.milestone-dot.reached + .milestone-label {
  color: rgba(0, 82, 255, 0.5);
}

/* Accrue stats — minimal row */
.accrue-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  margin-top: 0.5rem;
}
.accrue-stat {
  padding: 1.5rem 2rem;
  text-align: center;
  flex: 0 0 auto;
}
.accrue-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.accrue-stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 1rem + 1vw, 1.6rem);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.accrue-stat-value.accent {
  color: var(--color-accent);
  text-shadow: 0 0 40px rgba(0, 82, 255, 0.15);
}
.accrue-stat-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200, 210, 225, 0.78);
  margin-bottom: 0.5rem;
}
/* Equation line: "1 ■AKITA = X.XXX AKITA" — animated in/out by the
   accrue scroll handler (equation.style.opacity = eqOp). No display:none
   so the handler can actually make it visible at eqOp > 0. */
.accrue-equation {
  position: absolute;
  left: 50%;
  bottom: 3.5rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(220, 225, 235, 0.85);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* ═══════════════════════════════════════
   CHAPTER 4: CREATOR VAULTS
   ═══════════════════════════════════════ */
/* ═══ Vaults — editorial layout (featured + list, no circles) ═══ */
.vaults-container {
  width: 100%;
  max-width: 1120px;
  padding: 0 2rem;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, filter;
}
.vaults-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 3rem;
  max-width: 38rem;
}
.vaults-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: rgba(200, 210, 225, 0.55);
}
.vaults-eyebrow .section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 210, 225, 0.75);
}
.vaults-index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(120, 130, 150, 0.55);
}
.vaults-rule {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgba(180,200,235,0), rgba(180,200,235,0.5), rgba(180,200,235,0));
}
.vaults-headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  background: linear-gradient(180deg, #FFFFFF 0%, #9FA7B5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.vaults-headline em {
  font-style: italic;
  font-family: 'Newsreader', 'Georgia', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0.08em;
  background: linear-gradient(180deg, #D8DFEC 0%, #7C8699 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.vaults-sub {
  font-size: 0.95rem;
  color: rgba(180, 190, 208, 0.72);
  font-weight: 300;
  line-height: 1.55;
  max-width: 32rem;
}

/* Editorial grid: featured left, list right, separated by a hairline */
.vaults-editorial {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3rem;
  align-items: start;
  position: relative;
  transform-style: preserve-3d;
}
.vaults-editorial::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  bottom: 2.5rem;
  left: calc(55.55% - 1.5rem);
  width: 1px;
  background: linear-gradient(180deg, rgba(180,200,235,0), rgba(180,200,235,0.22) 30%, rgba(180,200,235,0.22) 70%, rgba(180,200,235,0));
  pointer-events: none;
}

/* Shared vault card base (no circles anywhere) */
.vault-card {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(16,20,32,0.55), rgba(10,12,22,0.55));
  border: 1px solid rgba(180, 200, 235, 0.08);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color 0.6s var(--ease-cinematic), box-shadow 0.6s var(--ease-cinematic), transform 0.6s var(--ease-cinematic);
}
.vault-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(0, 82, 255, 0.05) 0%, transparent 55%);
  pointer-events: none;
  transition: opacity 0.6s var(--ease-cinematic);
  opacity: 0;
}
.vault-card:hover { border-color: rgba(180, 200, 235, 0.2); box-shadow: 0 12px 48px rgba(0, 82, 255, 0.07); }
.vault-card:hover .vault-card-glow { opacity: 1; }

/* Featured vault */
.vault-featured {
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 320px;
}
.vault-featured-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}
.vault-featured-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.vault-featured-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(0, 82, 255, 0.65);
  margin-bottom: 0.2rem;
}
.vault-featured-name {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: rgba(240, 244, 252, 0.97);
  line-height: 1.1;
}
.vault-featured-quote {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: rgba(200, 212, 228, 0.85);
  padding-left: 1rem;
  border-left: 1px solid rgba(180, 200, 235, 0.22);
  max-width: 30rem;
}
.vault-featured-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(180, 200, 235, 0.1);
}

/* Right column list */
.vaults-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.vault-compact {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
}
.vault-compact-meta {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.vault-compact-meta h3 {
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(235, 240, 250, 0.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vault-compact-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.85rem 1.25rem;
  align-items: center;
  text-align: right;
}
.vault-compact-stats .vcs-label { display: none; }
.vault-compact-stats > div {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.vault-compact-stats > div::before {
  content: attr(data-label);
}
.vault-compact-stats > div:nth-child(1)::before { content: 'APY'; }
.vault-compact-stats > div:nth-child(2)::before { content: 'TVL'; }
.vault-compact-stats > div::before {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(140, 150, 170, 0.6);
}

/* Portrait: rounded-rectangle, NO circles */
.vault-portrait {
  position: relative;
  display: inline-block;
  margin: 0;
  flex-shrink: 0;
}
.vault-featured .vault-portrait {
  width: 96px;
  height: 96px;
}
.vault-compact .vault-portrait {
  width: 48px;
  height: 48px;
}
.vault-card-share {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(0, 82, 255, 0.55);
}
.vault-card-icon {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(180, 200, 235, 0.15);
  display: block;
}
.vault-card-share-img {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 42%;
  height: 42%;
  border-radius: 3px;
  object-fit: cover;
  border: 1px solid rgba(0, 82, 255, 0.35);
  background: rgba(8, 10, 18, 0.85);
  opacity: 0.92;
}
.vault-compact .vault-card-share-img {
  right: -6px;
  bottom: -6px;
  width: 18px;
  height: 18px;
}
.vcs-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.vcs-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.vcs-value.accent {
  color: var(--color-accent);
}
.vaults-cta {
  text-align: center;
  margin-top: 3rem;
  opacity: 0;
}
.vaults-disclaimer {
  text-align: center;
  font-size: 11px;
  color: rgba(138, 143, 152, 0.4);
  margin-top: 2rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
  letter-spacing: 0.05em;
  opacity: 0;
}

/* ═══════════════════════════════════════════════
   Persistent floating token pair (spans sections)
   ═══════════════════════════════════════════════ */
.float-tokens {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.float-token {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  will-change: transform, opacity;
}
.float-token-img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(90, 130, 200, 0.15);
}
.float-token-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 210, 230, 0.8);
}

/* ═══════════════════════════════════════
   CHAPTER 5: CLOSE
   ═══════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   CLOSE — Cinematic token convergence
   ═══════════════════════════════════════════════ */

/* Phase A: Typographic overture (no halo, no circular token) */
.close-phase-a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}
.close-overture {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  will-change: transform, opacity;
}
.close-overture-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(200, 210, 225, 0.5);
}
.close-overture-rule {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(180,200,235,0), rgba(180,200,235,0.6), rgba(180,200,235,0));
}
.close-overture-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(180deg, #F5F8FF 0%, #8A94A8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.close-overture-title em {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  padding-right: 0.08em;
  background: linear-gradient(180deg, #C9D0E0 0%, #7C8699 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Legacy slots kept hidden to avoid breaking existing JS refs */
.close-hero-img, .close-hero-token > img, .close-hero-glow {
  display: none !important;
}

/* Phase B-C: Token cards */
.close-cards-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
}
.close-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform, opacity;
}
.close-card-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(180deg, rgba(16,20,32,0.78), rgba(10,12,22,0.78));
  border: 1px solid rgba(180, 200, 235, 0.12);
  border-radius: 3px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.35);
}
.close-card-img {
  width: 48px; height: 48px;
  border-radius: 4px;
  border: 1px solid rgba(180, 200, 235, 0.18);
  flex-shrink: 0;
}
.close-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.close-card-name {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 600;
}
.close-card-amount {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(160, 180, 220, 0.6);
}

/* Phase D-E: Convergence — editorial logotype plate (no ring, no circle) */
.close-vault-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
}
.close-vault-node {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  width: min(420px, 60vw);
  will-change: transform, opacity;
}
.close-vault-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(180,200,235,0) 0%, rgba(180,200,235,0.55) 50%, rgba(180,200,235,0) 100%);
}
.close-vault-plate {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 0;
}
.close-vault-icon {
  position: relative;
  top: auto; left: auto;
  transform: none;
  width: 52px; height: 52px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(180, 200, 235, 0.22);
}
.close-vault-wordmark {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.close-vault-wordmark-top {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(240, 244, 252, 0.95);
  line-height: 1;
}
.close-vault-wordmark-bot {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(160, 180, 220, 0.6);
}
.close-vault-label { display: none; }

/* Convergence marks: two short vertical hairlines that meet at the plate,
   replacing the old orbiting token ghosts. Pure geometry, no borders, no
   circles. */
.close-vault-mark {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, rgba(180,200,235,0) 0%, rgba(180,200,235,0.45) 50%, rgba(180,200,235,0) 100%);
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform, opacity;
}
.close-vault-mark-l { left: calc(50% - 170px); }
.close-vault-mark-r { left: calc(50% + 170px); }
.close-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.close-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0; /* JS controls reveal after dissolution */
  z-index: 12;
  position: relative;
  max-width: 900px;
  padding: 0 2rem;
  text-align: center;
}
.close-partners {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.75rem 2rem;
  margin-bottom: 3.5rem;
  opacity: 0;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid rgba(180, 200, 235, 0.08);
}
.partner-logo {
  height: 22px;
  width: auto;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease-out);
  object-fit: contain;
  filter: grayscale(15%);
}
.partner-logo:hover { opacity: 1; filter: none; }
.close-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
}
.close-brand-wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(248, 250, 255, 0.98);
}
.close-brand-wordmark em {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(180deg, #C9D0E0 0%, #7C8699 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.close-logo {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(180, 200, 235, 0.15);
}
.close-logo-svg {
  filter: drop-shadow(0 0 30px rgba(0, 82, 255, 0.2));
}
.close-logo-transparent {
  mix-blend-mode: screen;
  background: transparent;
  box-shadow: none;
  opacity: 0.85;
  filter: contrast(1.3) brightness(0.95);
}
.close-line {
  width: 0;
  max-width: 220px;
  height: 1px;
  background: linear-gradient(90deg, rgba(180,200,235,0) 0%, rgba(180,200,235,0.6) 50%, rgba(180,200,235,0) 100%);
  margin: 2rem auto 0;
  opacity: 0;
}
.close-cta {
  margin-top: 2.5rem;
  opacity: 0;
}
.enter-vaults-btn {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 400;
  padding: 1.25rem 3rem;
  border: 1px solid var(--color-border-accent);
  background: var(--color-surface-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  position: relative;
  transition: all 0.7s var(--ease-cinematic);
  border-radius: 4px;
  overflow: hidden;
}
.enter-vaults-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 82, 255, 0.1) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.7s var(--ease-cinematic);
}
.enter-vaults-btn:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 60px rgba(0, 82, 255, 0.15);
}
.enter-vaults-btn:hover::before { opacity: 1; }
.close-tag {
  margin-top: 1.5rem;
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: rgba(200, 210, 225, 0.8);
  font-weight: 400;
  opacity: 0;
}

/* ─── PHASE G · CRESCENDO FINALE ───────────────────────────────────────
   Six-beat typographic finale that lands at the end of ch-close. Each
   beat occupies the same single-cell grid "stage" so beats swap in place.
   Motion is driven by JS (app.js chapterClose) writing inline styles on
   scroll progress; this stylesheet defines the at-rest appearance, the
   pre-reveal mask state (opacity 0 + initial transforms), and the
   editorial chrome (eyebrows, rules, glosses, metadata) that gives each
   beat its authored feel. Reduced-motion users get opacity-only reveals.

   Beat roster (p windows owned by JS):
     L1     One vault.              editorial opener
     L2     Two tokens.             horizontal split + sublabels
     L3     (3, 3)                  game-theoretic resolution
     L3.5   Earn together.          whispered thesis
     L4     4626.fun                brand lock-in
     L5     Partners + CTA          ecosystem + invitation
*/

.close-crescendo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 14;
  opacity: 0;
  will-change: opacity;
}

/* ─── Finale poster ────────────────────────────────────────────────────
   A settled composed page that replaces the stage once the conceptual
   beats (L1–L3) have finished crossfading. Lives as a sibling of .cres-stack
   inside .close-crescendo, absolutely positioned so both wrappers share the
   same centered frame. JS fades this in as a whole when the finale window
   arrives; inside it, L3.5/L4/L5 compose in natural vertical flow — no
   grid-stage overlap, no crossfade tangling. */
.cres-finale-poster {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1000px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2.1rem;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
/* Inside the finale poster, each line lays out in its OWN vertical row
   — not in the grid-stage cell. Override the inherited grid-area and
   relax the flex-column rules so lines stack naturally. */
.cres-finale-poster .cres-line {
  grid-area: auto;
  position: relative;
  opacity: 1; /* parent poster owns the reveal; individual lines don't hide */
  width: 100%;
}
.cres-finale-poster .cres-line-earn {
  margin-bottom: 0.3rem;
}
.cres-finale-poster .cres-line-4 {
  gap: 0.6rem;
}
.cres-finale-poster .cres-line-finale {
  margin-top: 1.1rem;
  gap: 1.1rem;
  pointer-events: auto; /* the CTA inside needs to be clickable */
}

/* Ambient aura — soft radial light source behind the stack. Pulses
   gently as each beat arrives (JS only adjusts opacity 0→1 and scale
   on a slow breathing curve). Keeps a modern, editorial "lit page" feel. */
.cres-aura {
  position: absolute;
  top: 50%; left: 50%;
  width: min(80vw, 880px);
  height: min(52vh, 520px);
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(210, 222, 250, 0.10) 0%,
      rgba(175, 195, 235, 0.05) 28%,
      rgba(80, 100, 150, 0.015) 55%,
      rgba(0, 0, 0, 0) 72%);
  filter: blur(28px);
  pointer-events: none;
  will-change: opacity, transform;
}

.cres-stack {
  position: relative; /* aura sits in .close-crescendo, stack sits above */
  display: grid;
  grid-template-areas: "stage";
  place-items: center;
  text-align: center;
  padding: 0 2rem;
  max-width: 1040px;
  width: 100%;
  min-height: clamp(7rem, 14vh, 12rem);
}

.cres-line {
  grid-area: stage;
  opacity: 0;
  line-height: 1.05;
  will-change: opacity, transform, letter-spacing, filter;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

/* Shared editorial chrome — italic metadata tags that sit on their own
   opacity rail so JS can fade them with their parent while keeping the
   visual hierarchy very quiet (small, tracked, low-contrast). */
.cres-brand-tag,
.cres-finale-meta {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(190, 202, 225, 0.5);
}

/* ── L1 · One vault. ─────────────────────────────────────────────────── */
.cres-line-1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.4rem);
  letter-spacing: 0.28em;  /* JS tightens to -0.02em */
  color: #F5F8FF;
  background: linear-gradient(180deg, #F5F8FF 0%, #8F98AE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cres-line-1 em {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  padding-right: 0.04em;
  background: linear-gradient(180deg, #F1E8CF 0%, #A28F5E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── L2 · Two tokens. + sublabels ────────────────────────────────────── */
.cres-line-2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 1.8rem + 3.4vw, 5.0rem);
  letter-spacing: -0.03em;
  color: #F5F8FF;
  background: linear-gradient(180deg, #F5F8FF 0%, #A8B0C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cres-line-2 em {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(180deg, #F1E8CF 0%, #A28F5E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cres-split {
  display: inline-block;
  opacity: 0;
  will-change: opacity, transform;
  background: linear-gradient(180deg, #F5F8FF 0%, #A8B0C4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cres-split-l { transform: translateX(-28px); }
.cres-split-r { transform: translateX(28px); }
/* Keep the two splits on a single horizontal line inside the flex-column
   parent .cres-line. The splits are direct flex-column children, so they
   stack vertically by default. An inline-flex wrapper (.cres-splits) keeps
   them on one row without losing the transform target on each split. */
.cres-splits {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  justify-content: center;
}

.cres-sublabels {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 0.5rem;
  opacity: 0;
  will-change: opacity;
}
.cres-sublabel {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200, 214, 236, 0.78);
}
.cres-sublabel-mark {
  font-size: 10px;
  color: rgba(220, 230, 245, 0.6);
  transform: translateY(-1px);
}
.cres-sublabel-name {
  color: rgba(232, 238, 248, 0.92);
  letter-spacing: 0.18em;
}
.cres-sublabel-kind {
  color: rgba(175, 192, 218, 0.55);
  letter-spacing: 0.22em;
  font-size: 10px;
}
.cres-sublabel-divider {
  width: 1px;
  height: 12px;
  background: rgba(180, 200, 230, 0.24);
  display: inline-block;
}

/* ── L3 · (3, 3) ─────────────────────────────────────────────────────── */
.cres-line-3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.0rem + 2.0vw, 2.8rem);
  letter-spacing: 0.12em;
  color: #F4EBD2; /* fallback before clip-text paints */
  transform: scale(1.18);
  filter: blur(4px);
}
/* Warm cream → bronze gradient, same family as "One" italic and "Earn
   together." — ties the climax beat into the finale poster's gold accent.
   Scoped to the inner .cres-ticker span so the flex parent doesn't
   propagate transparent fill to any sibling. */
.cres-ticker {
  padding: 0 0.12em;
  display: inline-block;
  background: linear-gradient(180deg, #F4EBD2 0%, #A28F5E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── L3.5 · Earn together. ───────────────────────────────────────────── */
.cres-line-earn {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 3.0vw, 4.4rem);
  letter-spacing: -0.02em;
  color: #EDE5CB;
}
/* Scope gradient clip-text onto the inner span so the flex parent doesn't
   propagate transparent text-fill-color to any nested element. */
.cres-line-earn .cres-earn {
  background: linear-gradient(180deg, #F4EBD2 0%, #8F8163 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cres-earn em {
  font-style: italic;
}

/* ── L4 · 4626.fun ──────────────────────────────────────────────────── */
.cres-line-4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 2.0rem + 4.0vw, 6.0rem);
  letter-spacing: -0.05em;
  gap: 0.55rem;
  color: #F5F8FF;
}
/* Scope the gradient text-fill onto the wordmark SPAN (not the flex parent)
   so sibling children — rules, brand-mark, brand-tag — don't inherit a
   transparent fill with no background of their own (which previously made
   the whole line invisible inside the finale poster). */
.cres-line-4 .cres-brand {
  background: linear-gradient(180deg, #F5F8FF 0%, #7C8699 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cres-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  opacity: 0;
  will-change: opacity;
}
.cres-brand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(180deg, #F4EBD2 0%, #A28F5E 100%);
  box-shadow: 0 0 12px rgba(244, 235, 210, 0.5);
}
.cres-brand {
  line-height: 1;
  padding: 0 0.02em;
}
.cres-line-4 em {
  font-family: 'Newsreader', 'Georgia', serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(180deg, #C9D0E0 0%, #7C8699 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cres-brand-tag {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(180, 195, 222, 0.52);
  font-style: normal;
  font-family: var(--font-mono);
}
.cres-rule {
  display: block;
  width: 0;  /* JS grows to ~320px */
  max-width: 340px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(180,200,235,0) 0%,
    rgba(200,215,240,0.58) 50%,
    rgba(180,200,235,0) 100%);
  opacity: 0;
  will-change: width, opacity;
}

/* ── L5 · Partners + CTA finale ─────────────────────────────────────── */
.cres-line-finale {
  gap: 1.4rem;
  width: 100%;
  max-width: 920px;
  will-change: opacity, transform;
}
.cres-finale-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(175, 192, 218, 0.45);
}
.cres-partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.1rem 2.0rem;
  opacity: 0.88;
}
.cres-partner-logo {
  height: 18px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(0.5);
  transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 260ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cres-partner-logo:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-1px);
}
.cres-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 2.4rem;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: #F5F8FF;
  background: linear-gradient(180deg,
    rgba(40, 52, 82, 0.55) 0%,
    rgba(18, 24, 42, 0.78) 100%);
  border: 1px solid rgba(210, 224, 248, 0.26);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 260ms ease,
              background 260ms ease,
              box-shadow 260ms ease;
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.cres-cta-btn::before {
  /* Subtle inner highlight sweep — modern glass chip feel. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 42%);
  pointer-events: none;
}
.cres-cta-label {
  position: relative;
  z-index: 1;
}
.cres-cta-arrow {
  position: relative;
  z-index: 1;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  color: rgba(244, 235, 210, 0.95);
}
.cres-cta-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 235, 210, 0.55);
  background: linear-gradient(180deg,
    rgba(58, 72, 108, 0.75) 0%,
    rgba(24, 32, 54, 0.88) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 12px 36px rgba(0, 0, 0, 0.55);
}
.cres-cta-btn:hover .cres-cta-arrow {
  transform: translateX(4px);
}
.cres-finale-meta {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: rgba(175, 192, 218, 0.35);
}

/* Mobile refinements ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cres-stack { padding: 0 1.1rem; min-height: clamp(6rem, 12vh, 10rem); }

  .cres-line-1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); letter-spacing: 0.22em; }
  .cres-line-2 { font-size: clamp(2.2rem, 1.4rem + 3.0vw, 3.8rem); }


  .cres-sublabels { gap: 0.9rem; flex-wrap: wrap; justify-content: center; }
  .cres-sublabel { font-size: 9.5px; letter-spacing: 0.16em; }
  .cres-sublabel-kind { font-size: 9px; letter-spacing: 0.18em; }

  .cres-line-3 { font-size: clamp(1.3rem, 0.9rem + 1.8vw, 2.1rem); }

  .cres-line-earn { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }

  .cres-line-4 { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem); }
  .cres-rule { max-width: 220px; }
  .cres-brand-tag { font-size: 9.5px; letter-spacing: 0.18em; }

  .cres-line-finale { gap: 1.1rem; }
  .cres-finale-label { font-size: 9px; letter-spacing: 0.3em; }
  .cres-partners {
    gap: 0.75rem 1.1rem;
    max-width: 92%;
    margin: 0 auto;
  }
  .cres-partner-logo { height: 14px; max-width: 72px; }
  .cres-cta-btn { padding: 0.8rem 1.7rem; font-size: 11.5px; letter-spacing: 0.2em; }
  .cres-finale-meta { font-size: 9.5px; }
}

/* Reduced motion — neutralise transforms and filters; opacity only. */
@media (prefers-reduced-motion: reduce) {
  .cres-line,
  .cres-split,
  .cres-line-3,
  .cres-rule,
  .cres-line-finale,
  .cres-aura,
  .cres-line-1 { letter-spacing: -0.02em; }
  .cres-rule,
}

/* ─── FOOTER ─── */
.footer {
  position: relative;
  z-index: 1;
  padding: 2.5rem clamp(1rem, 4vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-faint);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer-icon, .footer-icon-svg {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  opacity: 0.5;
}
.footer-links {
  display: flex;
  gap: 1.5rem;
}
.footer-links a {
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 180ms var(--ease-out);
  font-size: 0.7rem;
}
.footer-links a:hover { color: var(--color-text); }

/* ─── MOBILE ─── */
@media (max-width: 768px) {

  /* ── Hero ── */
  #ch-hero .scene-pin {
    flex-direction: column;
    padding: 0 1.5rem;
  }
  .hero-streak { display: none; }
  .hero-content {
    margin-left: 0;
    text-align: center;
    align-items: center;
  }
  .hero-title {
    font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
    line-height: 0.92;
  }
  .hero-desc {
    font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.1rem);
    color: rgba(220, 225, 235, 0.85);
  }
  .hero-section-label { justify-content: center; }
  .hero-chain { justify-content: center; flex-wrap: wrap; }
  .hero-partners { justify-content: center; flex-wrap: wrap; gap: 12px; }
  .hero-cta { align-items: center; }
  .hero-float-tokens { display: none; }
  .hero-scroll-cue { display: none; }

  /* ── Chapter 2: Token Journey ── */

  /* Side labels — larger and brighter */
  .side-label-left,
  .side-label-right {
    font-size: 8px;
    letter-spacing: 0.2em;
    color: rgba(220, 225, 235, 0.82);
  }
  .side-label-left { left: 2%; }
  .side-label-right { right: 2%; }
  .top-label-left { left: 3%; font-size: 8px; letter-spacing: 0.15em; color: rgba(220, 225, 235, 0.82); }
  .top-label-right { right: 3%; font-size: 8px; letter-spacing: 0.15em; color: rgba(220, 225, 235, 0.82); }

  /* Token images — slightly larger on mobile for visibility */
  .token-img-ring,
  .share-img-ring {
    width: 82px;
    height: 82px;
  }

  /* Token labels beneath rings — brighter */
  .token-name {
    font-size: 11px;
    color: rgba(220, 225, 235, 0.92);
  }

  /* Detail panels — more readable */
  .token-detail {
    max-width: 170px;
  }
  .detail-section-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(220, 225, 235, 0.88);
  }
  .detail-amount {
    font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.3rem);
    color: #EDEDED;
  }
  .detail-desc {
    font-size: 0.78rem;
    max-width: 170px;
    color: rgba(220, 225, 235, 0.88);
  }

  /* Deposit info */
  .deposit-info {
    bottom: 14%;
  }
  .split-info {
    bottom: 14%;
  }
  .deposit-amount {
    font-size: 1.05rem;
    color: #EDEDED;
  }

  /* ── Node Graph v2 — mobile vertical reflow ──
     On mobile the 920px horizontal flow is impossible to fit. Collapse the
     absolute-positioned desktop layout into a single vertical column:
     Deposit → Allocation Engine → 3 strategy cards → Downstream (Uni + Meteora).
     JS-drawn edge paths use pixel coords tuned for desktop, so we hide the
     SVG edge layer entirely on mobile — the vertical stack reads cleanly
     without the connector lines. */
  .node-graph {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 1.25rem 1rem;
  }
  /* Hide pixel-coord edges — they map to desktop layout */
  .node-graph .ng-edges-svg { display: none; }

  .ng-nodes {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }

  /* Collapse all absolute positioning → natural flow, centered */
  .ng-node,
  .ng-node-deposit,
  .ng-node-hub,
  .ng-node-idle {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }
  .ng-node-idle { display: none; } /* aesthetic-only buffer, skip on mobile */

  /* Strategy column — on mobile we want the downstream venue cards to sit
     DIRECTLY UNDER their parent strategy (Uniswap V3 → Charm, Meteora →
     Solana). `display: contents` flattens this wrapper so its 3 children
     become direct flex items of .ng-nodes, letting us interleave the
     downstream cards via CSS `order`. */
  .ng-strat-column {
    display: contents;
  }
  /* Ensure the 3 strategy cards still render as blocks in the flattened flow */
  .ng-strat-column .ng-node-strat {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Interleave order (flex siblings of .ng-nodes):
       deposit  (1)
       hub      (2)
       Ajna     (3)  — strat-0
       Charm    (4)  — strat-1
       Uniswap  (5)  — downstream-1 (directly under Charm)
       Solana   (6)  — strat-2
       Meteora  (7)  — downstream-2 (directly under Solana) */
  #ng-node-deposit { order: 1; }
  #engine-hub      { order: 2; }
  #strat-0         { order: 3; }
  #strat-1         { order: 4; }
  #downstream-1    { order: 5; }
  #strat-2         { order: 6; }
  #downstream-2    { order: 7; }

  /* Downstream nodes — override .ng-ds-uni/met desktop absolute coords */
  .ng-ds-uni,
  .ng-ds-met {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }
  /* Visual hint: downstream cards are CONSEQUENCES of their strategy, so
     inset them slightly and make them a touch smaller/subtler — reads as
     "this is where that strategy's liquidity lives." */
  .ng-node-downstream .ng-ds-inner {
    width: min(220px, 88%);
    margin-left: 2rem; /* indent to show hierarchy */
    opacity: 0.92;
  }

  /* Card sizing — comfortable mobile widths */
  .strategy-card-inner {
    width: min(260px, 100%);
    padding: 0.7rem 0.85rem;
  }
  .strat-pct { font-size: 1.1rem; }
  .strat-role { font-size: 10px; max-width: 100%; }
  .ng-node-inner { padding: 0.55rem 0.85rem; gap: 0.55rem; }
  .ng-node-icon img { width: 30px; height: 30px; }
  .ng-node-title { font-size: 0.78rem; }
  .ng-hub-label { font-size: 9px; }
  .ng-node-hub-inner { padding: 0.7rem 1rem; }
  .ng-ds-inner {
    width: min(240px, 100%);
  }

  /* Morph zone */
  .morph-zone {
    width: 200px;
    height: 200px;
  }

  /* Bottom copy — brighter and larger */
  .token-top-copy,
  .token-cross-copy,
  .dual-copy p {
    font-size: clamp(0.9rem, 0.78rem + 0.4vw, 1.1rem);
    padding: 0 1.25rem;
    color: rgba(220, 225, 235, 0.85);
  }
  .token-entry-cue,
  .dual-entry {
    font-size: 0.78rem;
    color: rgba(220, 225, 235, 0.85);
  }

  /* ── Chapter 3: Accrue ── */
  .accrue-container { padding: 0 1.25rem; }
  .accrue-container-v2 { padding: 0 0.75rem; }
  .accrue-ratio-display .ratio-accent {
    font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  }
  .ratio-meta { gap: 0.4rem; }
  .ratio-unit, .ratio-from { font-size: 10px; letter-spacing: 0.1em; color: rgba(220, 225, 235, 0.9); }
  .accrue-desc { font-size: 1rem; color: rgba(220, 225, 235, 0.92); }
  .clock-date { font-size: 0.9rem; letter-spacing: 0.15em; color: rgba(220, 225, 235, 0.9); }

  /* Yield curve */
  .yield-curve-wrap { aspect-ratio: 4 / 3; }
  .yc-axis-y { left: -2px; width: 32px; }
  .yc-axis-y .yc-label { font-size: 9px; color: rgba(220, 225, 235, 0.78); }
  .yc-axis-x { left: 36px; }
  .yc-axis-x .yc-label { font-size: 9px; color: rgba(220, 225, 235, 0.78); }
  .yc-callout-card { padding: 8px 11px; border-radius: 8px; }
  .yc-callout-ratio { font-size: 14px; color: #EDEDED; }
  .yc-callout-apy { font-size: 10px; }
  .yc-callout-day { font-size: 8px; color: rgba(220, 225, 235, 0.85); }

  /* Stats bar */
  .accrue-stats {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin: 0.5rem 0.5rem 0;
  }
  .accrue-stat { padding: 0.875rem 1rem; }
  .accrue-stat-value { font-size: 1.05rem; color: #EDEDED; }
  .accrue-stat-label { font-size: 10px; letter-spacing: 0.15em; color: rgba(220, 225, 235, 0.88); }
  .accrue-stat-divider { height: 18px; }
  .accrue-equation {
    font-size: 0.9rem;
    color: rgba(220, 225, 235, 0.92);
  }

  /* ── Chapter 4: Vaults ── */
  .vaults-container { padding: 0 1rem; }
  .vaults-editorial { grid-template-columns: 1fr; gap: 1.25rem; }
  .vaults-editorial::before { display: none; }
  .vault-featured { padding: 1.25rem; min-height: 0; }
  .vault-featured .vault-portrait { width: 64px; height: 64px; }
  .vault-featured-name { font-size: 1.3rem; }
  .vault-featured-quote { font-size: 0.95rem; }
  .vault-featured-stats { grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
  .vault-compact { padding: 0.9rem 1rem; gap: 0.85rem; grid-template-columns: 40px 1fr auto; }
  .vault-compact .vault-portrait { width: 40px; height: 40px; }
  .vcs-value { font-size: 1.05rem; color: #EDEDED; }
  .vcs-label { color: rgba(220, 225, 235, 0.85); }

  /* ── Chapter 5: Close ── */
  .close-partners {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.25rem;
    padding: 0 1rem;
    max-width: 320px;
  }
  .partner-logo { height: 20px; }
  .close-brand { margin-bottom: 0.5rem; }
  .close-line { display: block; }
  .close-tagline {
    font-size: 0.95rem;
    color: rgba(220, 225, 235, 0.9);
  }

  /* ── Footer ── */
  .footer {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .footer-links {
    gap: 1rem;
  }
  .footer-links a { font-size: 0.75rem; color: rgba(220, 225, 235, 0.82); }

  /* ── Nav — tighter on mobile ── */
  .nav { padding: 0.7rem 0.9rem; gap: 0.75rem; }
  .brand { gap: 6px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .brand-text { font-size: 1rem; white-space: nowrap; }
  .brand-icon { width: 24px; height: 24px; flex: 0 0 auto; }
  .nav-right { gap: 0.85rem; min-width: 0; flex: 0 0 auto; }
  .nav-link { font-size: 0.7rem; letter-spacing: 0.1em; }
  .nav-btn { font-size: 0.65rem; padding: 0.5rem 0.85rem; letter-spacing: 0.12em; white-space: nowrap; }

}

/* ── NARROW PHONES (≤ 380px) ──
   At iPhone SE width the header collided (brand text overlapped Docs,
   Join Waitlist pill pushed against the right edge) AND the pinned
   scenes clipped off both sides (token cards, CCA auction card, AKITA
   coin, etc). We address both here:
     1. Header: hide Docs (still reachable in the footer), tighten CTA,
        shrink brand so the three zones sit cleanly.
     2. Scenes: uniformly scale each .scene-pin's content down so the
        horizontal layouts designed for ≥390px still breathe inside the
        viewport. Transform-origin sits at the center so positions
        translated from center remain center-anchored. */
@media (max-width: 380px) {
  .nav { padding: 0.6rem 0.75rem; gap: 0.5rem; }
  .brand { gap: 6px; }
  .brand-icon { width: 22px; height: 22px; }
  .brand-text { font-size: 0.95rem; }
  .nav-right { gap: 0.5rem; }
  /* Docs link steps aside on the narrowest phones; footer still links out. */
  .nav-right .nav-link { display: none; }
  .nav-btn {
    font-size: 0.6rem;
    padding: 0.45rem 0.7rem;
    letter-spacing: 0.1em;
  }

  /* NOTE: Narrow-phone scale for .scene-pin is applied via JS (see app.js
     camera-rig block) because JS writes .scene-pin.style.transform on every
     tick to drive the tilt/perspective rig. A CSS `transform: scale()` would
     be overwritten on the next animation frame. Keeping the transform-origin
     anchored here so when the JS scale composes in, it scales about center. */
  #ch-token .scene-pin,
  #ch-accrue .scene-pin,
  #ch-cca .scene-pin,
  #ch-dual-overview .scene-pin,
  #ch-vaults .scene-pin,
  #ch-close .scene-pin {
    transform-origin: 50% 50%;
  }
}

/* ─── SCAN LINE GLOW EFFECT ─── */
.scan-line {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 82, 255, 0.08) 25%, rgba(0, 82, 255, 0.18) 50%, rgba(0, 82, 255, 0.08) 75%, transparent 100%);
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-cinematic);
}
.scan-line.active {
  opacity: 1;
  animation: scan-sweep 4s linear infinite;
}
@keyframes scan-sweep {
  0% { transform: translateY(0); }
  100% { transform: translateY(100vh); }
}

/* ─── ENHANCED TOKEN RING PULSE ─── */
.token-img-ring,
.share-img-ring {
  transition: box-shadow 0.8s var(--ease-cinematic);
}
.token-coin.depositing .token-img-ring {
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(0, 82, 255, 0.15),
    0 0 120px rgba(0, 82, 255, 0.08);
}
.token-share.minted .share-img-ring {
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(0, 82, 255, 0.25),
    0 0 100px rgba(0, 82, 255, 0.12);
}

/* ─── AUDIO INDICATOR ─── */
.audio-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 150;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  opacity: 0;
  animation: audio-fade-in 1s var(--ease-out) 3.5s forwards;
}
.audio-toggle:hover {
  border-color: var(--color-border-accent);
  box-shadow: 0 0 16px rgba(0, 82, 255, 0.1);
}
@keyframes audio-fade-in {
  to { opacity: 1; }
}
.audio-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.audio-bar {
  width: 2px;
  background: var(--color-accent);
  border-radius: 1px;
  transition: height 0.3s var(--ease-out);
}
.audio-toggle.muted .audio-bar {
  height: 2px !important;
}
.audio-bar:nth-child(1) { height: 4px; animation: bar-bounce 1.2s ease-in-out infinite; }
.audio-bar:nth-child(2) { height: 10px; animation: bar-bounce 1.2s ease-in-out 0.15s infinite; }
.audio-bar:nth-child(3) { height: 6px; animation: bar-bounce 1.2s ease-in-out 0.3s infinite; }
.audio-bar:nth-child(4) { height: 12px; animation: bar-bounce 1.2s ease-in-out 0.45s infinite; }
@keyframes bar-bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
.audio-toggle.muted .audio-bar {
  animation: none;
}

/* ─── SUBTLE VIGNETTE ─── */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.5) 100%);
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════
   CHAPTER 3.5: CCA — SHARE TOKEN DISTRIBUTION
   ═══════════════════════════════════════ */

/* Camera wrapper for pan effect */
.cca-camera {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  will-change: transform;
}

/* Deposited asset — starts centered, fades to back */
.cca-deposit-coin {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform, opacity;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

/* Share token — starts behind, comes to front */
.cca-share-token {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  will-change: transform, opacity;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.cca-share-token .share-img-ring {
  width: 96px;
  height: 96px;
}
.cca-share-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cca-share-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 400;
}

/* Intro text */
.cca-intro {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  max-width: 580px;
  padding: 0 2rem;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}
.cca-headline {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}
.cca-desc {
  font-size: clamp(0.92rem, 0.78rem + 0.4vw, 1.1rem);
  font-weight: 300;
  color: rgba(220, 225, 235, 0.80);
  letter-spacing: 0.02em;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

/* CCA Node graph — flipped layout vs strategy graph.
   3 distribution cards (left) ← ■AKITA share token (right) */
.cca-node-graph {
  position: absolute;
  width: 680px;
  height: 420px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 4;
}
.cca-edges-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.cca-nodes {
  position: relative;
  width: 100%; height: 100%;
}
/* CCA share token node (RIGHT) */
.cca-ng-token {
  right: 0;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
}
/* CCA distribution cards (LEFT column) */
.cca-strat-column {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  overflow: visible;
}
.cca-strat-column .ng-node-strat {
  position: relative;
  z-index: 1;
  transition: z-index 0s, opacity 0.35s var(--ease-out);
}
.cca-strat-column .ng-node-strat:has(.strat-expanded) {
  z-index: 10;
}
.cca-strat-column .ng-node-strat.strat-sibling-dim {
  opacity: 0.3 !important;
  transition: opacity 0.35s var(--ease-out);
}

/* Volatility narrative text — overlaid below the yield curve area */
.vol-narrative {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  max-width: 500px;
  opacity: 0;
  z-index: 8;
  pointer-events: none;
}
.vol-headline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}
.vol-sub {
  font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.85rem);
  font-weight: 300;
  color: rgba(0, 82, 255, 0.55);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* (Old CCA segment styles removed — replaced by node graph cards) */

/* Summary */
.cca-summary {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: clamp(0.92rem, 0.78rem + 0.4vw, 1.1rem);
  font-weight: 300;
  color: rgba(220, 225, 235, 0.9);
  letter-spacing: 0.02em;
  line-height: 1.7;
  max-width: 500px;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   DUAL OVERVIEW — zoomed-out two-token map
   ═══════════════════════════════════════════════ */
/* Headline sits closer to the graph block (vertical midline) so the two
   halves of the scene read as one composition instead of "title up top,
   diagram down below". The graph is centered via top:50% / translate(-50%),
   so placing the headline at 24% keeps a ~80px breathing gap above the
   diagram on a 900px viewport while anchoring copy near the midline. */
.dual-headline {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  max-width: 640px;
  padding: 0 2rem;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}
.dual-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.dual-sub {
  font-size: clamp(0.88rem, 0.76rem + 0.4vw, 1.05rem);
  font-weight: 300;
  color: rgba(220, 225, 235, 0.75);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* Dual graph container — side by side */
.dual-graph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  z-index: 4;
}
.dual-edges-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Each side of the dual view */
.dual-side {
  position: relative;
  display: flex;
  align-items: center;
  gap: 60px;
  flex: 1;
  height: 100%;
  opacity: 0;
}
.dual-side-left {
  justify-content: flex-end;
  padding-right: 40px;
}
.dual-side-right {
  justify-content: flex-start;
  padding-left: 40px;
}
/* Side labels read as structural captions — neutral faint, not accent blue.
   Keeping them in the accent palette made them compete with the “V / THE
   FULL PICTURE” kicker and the percentage numerals for attention. */
.dual-side-label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(220, 225, 235, 0.45);
  white-space: nowrap;
  opacity: 0; /* JS controls reveal */
}

/* Center divider — widened to 150px so the "ERC-4626 VAULT" label (130px)
   fits WITHIN the container rather than overflowing asymmetrically. The
   container is a flex child so it naturally reserves horizontal space
   between the two sides; pairing that with align-items: center gives us a
   true visual centre-point between the tokens. */
.dual-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  flex-shrink: 0;
  width: 150px;
  opacity: 0;
}
.dual-divider-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(90, 130, 200, 0.3), transparent);
}
.dual-divider-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(160, 180, 220, 0.5);
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

/* Token nodes in dual view.
   Fixed min-width so both center nodes (share / underlying) have identical
   visual footprints. Without this, the longer "50M deposited" caption makes
   the underlying node wrap ~18px wider than the share node, producing a
   slightly asymmetric distance from each node to the center divider — which
   in turn asymmetrizes the SVG edge curves drawn in JS. */
.dual-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 88px;
  opacity: 0; /* JS controls float-in */
  will-change: transform, opacity, filter;
}
.dual-node-img {
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 12px rgba(90, 130, 200, 0.15);
}
.dual-node-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 500;
}
.dual-node-amount {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(160, 180, 220, 0.5);
  margin-top: -2px;
}

/* Branch items
   ── Alignment contract (the reason endpoints looked off before) ──
   Every .dual-branch has an IDENTICAL fixed width and height on both sides
   so the six cards form a perfect mirrored grid across the divider. The
   SVG edge drawer uses getBoundingClientRect(); any left/right width drift
   propagates straight into endpoint offsets, which is exactly the
   "misaligned" effect the user noticed.
*/
.dual-branches {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0; /* JS controls fan-out */
  will-change: transform, opacity;
}
.dual-branch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(20, 24, 40, 0.6);
  border: 1px solid rgba(90, 130, 200, 0.15);
  width: 220px;        /* explicit, not min-width, so left == right */
  height: 40px;        /* explicit so each card row's cy is grid-locked */
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.dual-branch:hover {
  border-color: rgba(90, 130, 200, 0.35);
  box-shadow: 0 0 16px rgba(90, 130, 200, 0.08);
}

/* Percentage numerals — elegant warm-cream editorial tone, not accent blue.
   The previous all-blue palette made the cards read as a wash of the same
   color; switching numerals to a warm cream lets them carry the quantitative
   weight while the card border stays structurally blue. Small tabular-nums
   trick so 40% and 20% line up cleanly in the same column. */
.dual-branch-pct {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: #E8D9B0;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}
.dual-branch-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: rgba(220, 225, 235, 0.85);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dual-branch-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0.85;
}
/* HTML order differs by side so logos live on the outer edges of each card:
   • Left cards  = [logo][pct][name]  → logo on far-left
   • Right cards = [pct][name][logo]  → logo on far-right
   Use margin-left:auto on right-side logos only to pin the trailing logo
   hard against the card edge (mirrors the left-side visual cadence without
   disturbing left-card layout). */
.dual-branches-right .dual-branch-logo {
  margin-left: auto;
}
.dual-branch-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.7;
  width: 18px;          /* match logo slot width so pct/name columns align */
  text-align: center;
}


/* ─── CCA Mobile overrides ─── */
@media (max-width: 768px) {
  .cca-headline {
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
    color: #EDEDED;
  }
  .cca-desc {
    font-size: 0.95rem;
    padding: 0 0.75rem;
    color: rgba(220, 225, 235, 0.92);
  }
  .cca-share-token .share-img-ring {
    width: 82px;
    height: 82px;
  }
  /* ── CCA node graph — mobile vertical reflow ──
     Same approach as strategies: collapse the horizontal (token on right,
     3 distribution cards on left) into a single vertical column:
     ■AKITA share token (top) → Auction → Vesting → Liquidity Pool.
     Hide the JS-drawn edge SVG since its coords target desktop layout.
     Generous top padding so the stack doesn't kiss the header — gives the
     chapter a proper breathing margin on phone viewports. */
  .cca-node-graph {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 13rem 0.75rem 1rem;
  }
  .cca-node-graph .cca-edges-svg { display: none; }
  .cca-nodes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    height: auto;
  }
  .cca-ng-token {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    transform: none;
    order: -1; /* share token on top */
  }
  .cca-strat-column {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    align-items: center;
    gap: 0.6rem;
  }
  .cca-strat-column .strategy-card-inner {
    width: min(280px, 100%);
  }
  .cca-summary {
    font-size: 0.95rem;
    padding: 0 0.75rem;
    color: rgba(220, 225, 235, 0.92);
  }
  .vol-narrative {
    max-width: 92%;
    bottom: 4%;
  }
  .vol-headline {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
  }
  .vol-sub {
    font-size: 0.8rem;
    padding: 0 0.5rem;
    color: rgba(220, 225, 235, 0.88);
  }
}

/* ─── Dual Overview Mobile / Tablet overrides ─── */
/* The dual-overview desktop layout is a 1100px-wide row: 220 (strategies left)
   + 60 (gap) + 88 (share node) + 120 (divider) + 88 (underlying node) + 60 +
   220 (strategies right) + 40+40 side padding ≈ 1100. At any viewport under
   ~1180px the row clips both ends (pills slide off left/right, names chopped).
   So the stacked-column mobile layout must engage all the way up to 1024px
   — not just at phone widths. The existing per-chapter scene-pin scale (JS
   chScale()) handles overall shrink on top of this. */
@media (max-width: 1024px) {
  /* Headline lifts above the stacked graph so the two no longer layer.
     The graph's ~520px column already near-fills the viewport centered at
     50%, so the headline has to clear that top edge (y ≈ 40% of viewport). */
  .dual-headline {
    top: 3%;
    padding: 0 1rem;
  }
  .dual-title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
  .dual-sub   { font-size: 0.85rem; line-height: 1.45; }

  .dual-graph {
    width: 320px;
    height: 500px;
    flex-direction: column;
    gap: 16px;
    /* Graph slides below the now-top headline; offset keeps it off the
       header/CTA too. */
    top: 58%;
  }
  .dual-side {
    flex-direction: column;
    gap: 14px;
    padding: 0;
  }
  .dual-side-left, .dual-side-right {
    justify-content: center;
    padding: 0;
  }
  .dual-divider {
    flex-direction: row;
    width: auto;
    height: auto;
    gap: 12px;
  }
  .dual-divider-line {
    width: 40px;
    height: 1px;
  }
  .dual-branch {
    min-width: 140px;
  }
  .dual-edges-svg {
    display: none;
  }
}

/* Narrow phones — dual-overview needs an even tighter column */
@media (max-width: 380px) {
  .dual-graph {
    width: 288px;
    /* Slide further down on the narrowest phones so the 3-line subhead
       above clears the top of the stacked graph. */
    top: 66%;
    gap: 12px;
  }
  .dual-branch { min-width: 128px; }
  .dual-side { gap: 10px; }

  /* CCA — node graph now flows vertically (see main mobile block above).
     Previous fixed 288×340px override removed; natural flow + flex-column
     handles sizing inside scene-pin's 0.74 transform-origin scale. */

  /* Token detail text blocks sit below each token image and span ~170px.
     At 320vw the left block's left edge bled past the viewport by ~15px.
     Cap description width tighter so it stays fully inside. */
  .token-detail { max-width: 140px; }
  .detail-desc { max-width: 140px; font-size: 0.72rem; }
}

/* ─── VAULT CARD 3D TILT (merged with editorial base) ─── */
.vault-card {
  transform-style: preserve-3d;
  perspective: 800px;
}
.vault-card:hover {
  box-shadow: 0 12px 40px rgba(0, 82, 255, 0.10), 0 0 60px rgba(0, 82, 255, 0.04);
}

/* ─── HERO CLIP-PATH REVEAL ─── */
.hero-char {
  clip-path: inset(0 0 100% 0);
}
.hero-char.revealed {
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.6s var(--ease-cinematic);
}

/* ─── CHAPTER CROSSFADE TRANSITION ─── */
.scroll-scene .scene-pin {
  transition: opacity 0.1s linear;
}

/* ─── PARTICLE CONVERGENCE (Close chapter) ─── */
@keyframes convergence-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
.close-logo.converging {
  animation: convergence-pulse 2s ease-in-out infinite;
}

/* ─── UTILITY ─── */
.accent { color: var(--color-accent) !important; }

/* ═══════════════════════════════════════════════════════════════
   EDITORIAL LAYER — applies across all chapters
   Premium, quiet, typographic. No glow/halo/ring vocabulary.
   ═══════════════════════════════════════════════════════════════ */

/* Chapter kicker: roman numeral · hairline · label (mono) */
.ed-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: 500;
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 1.25rem;
}
.ed-kicker-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--color-text-muted);
  text-transform: none;
  min-width: 14px;
  text-align: center;
}
.ed-kicker-rule {
  flex: 0 0 48px;
  height: var(--rule-hairline);
  background: var(--rule-color);
}
.ed-kicker-label {
  color: var(--color-text-faint);
}

/* Serif italic accent inline (applied via <em> in headlines) */
.dual-title em,
.cca-headline em,
.accrue-desc em,
.token-top-copy em,
.ratio-unit em,
.vaults-headline em,
.close-overture-title em,
.close-tag em,
.close-brand-wordmark em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

/* Hero "Earn" serif italic line — the middle word of the three-line headline */
.hero-word-serif .hero-char {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #F0F0F2 0%, #C8CDD8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Soften hero glow — editorial, not maximal */
.hero-headline-glow {
  width: 520px !important;
  height: 220px !important;
  background: radial-gradient(ellipse, rgba(0, 82, 255, 0.05) 0%, transparent 75%) !important;
  filter: blur(60px) !important;
}

/* Hero character dots (the periods) — softer, serif italic nudge */
.hero-char-dot {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  background: linear-gradient(180deg, var(--color-accent-bright) 0%, var(--color-accent) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Partner strip — quieter, hairline separators feel */
.hero-partner-logo {
  opacity: 0.45;
}

/* ─── Token chapter editorial polish ─── */
.token-section-label {
  position: absolute;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  opacity: 0;  /* JS controls reveal */
}
.token-top-copy em,
.token-cross-copy em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.side-label, .top-label {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.15em !important;
}

/* ─── Accrue ratio editorial frame ─── */
.ratio-rule-top,
.ratio-rule-bot {
  display: block;
  width: 120px;
  height: var(--rule-hairline);
  background: var(--rule-color-soft);
  margin: 0 auto;
}
.ratio-rule-top { margin-bottom: 16px; }
.ratio-rule-bot { margin-top: 16px; }

.ratio-accent {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  color: rgba(240, 240, 242, 0.95) !important;  /* dial back from saturated blue */
  letter-spacing: -0.04em !important;
}
.ratio-unit em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text);
}

/* ─── CCA editorial polish ─── */
.cca-headline {
  font-weight: 300 !important;
}
.cca-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05em;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Thin the CCA edges — reduce glow, crisper hairline feel */
.ng-edge-line {
  stroke-width: 0.75 !important;
  opacity: 0.4 !important;
}
.ng-dash-flow {
  stroke-width: 0.75 !important;
  opacity: 0.55 !important;
}

/* Dual edges — same hairline treatment */
#dual-edges-svg .ng-edge-line {
  stroke-width: 0.75 !important;
  opacity: 0.35 !important;
}
#dual-edges-svg .ng-dash-flow {
  stroke-width: 1 !important;
  opacity: 0.5 !important;
}

/* Dual title serif italic accent */
.dual-title {
  font-weight: 300 !important;
}
.dual-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.015em;
}

/* Dual divider label — editorial spacing */
.dual-divider-label,
.dual-divider {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase;
}

/* Section labels that weren't converted to kickers — match kicker color */
.section-label {
  font-family: var(--font-mono);
  color: var(--color-text-faint);
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
}

/* ─── HERO SECTION LABEL — now kicker styled ─── */
.hero-section-label.ed-kicker {
  margin-bottom: 2rem;
}

/* ─── Ambient orbs — dial down further during scroll ─── */
.ambient-orb {
  opacity: 0.04 !important;  /* was 0.06/0.03 */
  filter: blur(140px) !important;
}

/* ─── Mobile kicker scaling ─── */
@media (max-width: 720px) {
  .ed-kicker {
    gap: 10px;
    margin-bottom: 1rem;
  }
  .ed-kicker-rule { flex-basis: 32px; }
  .ratio-rule-top, .ratio-rule-bot { width: 80px; }
}

/* ───────────────────────────────────────────────────────────
   SHAPE VOCABULARY (override earlier rounded-rect conversions)
   - Creator coins (underlying tokens)  → CIRCLE
   - Vault share tokens (■AKITA)        → SQUARE (sharp 4px)
   Strategy protocol logos keep their native rounded-rect.
   ───────────────────────────────────────────────────────── */

/* ─ CREATOR COINS → CIRCLE ───────────────────────── */
/* Token chapter: left-side deposited coin */
.token-img-ring {
  border-radius: 50% !important;
}
.token-img-ring::after {
  border-radius: 50% !important;
}
.token-img {
  border-radius: 50% !important;
}

/* CCA chapter: deposit coin */
.cca-deposit-coin .token-img-ring,
.cca-deposit-coin .token-img-ring::after,
.cca-deposit-coin .token-img {
  border-radius: 50% !important;
}

/* Dual chapter: underlying-side node */
#dual-node-underlying .dual-node-img {
  border-radius: 50% !important;
}

/* Persistent pair: underlying float (creator coin) */
#float-underlying .float-token-img {
  border-radius: 50% !important;
}

/* Hero floats that are creator people → circle */
.hero-float-layer-mid .hero-float,   /* jesse, gabrielhaines */
.hero-float-front-1 {                 /* akita creator */
  border-radius: 50% !important;
}

/* ─ SHARE TOKENS → SQUARE (sharp, 4px radius to match ■ glyph) ───── */
/* Token chapter: right-side minted share */
.share-img-ring {
  border-radius: 4px !important;
}
.share-img-ring::after {
  border-radius: 5px !important;
}
.share-img {
  border-radius: 3px !important;
}

/* CCA chapter: share token */
.cca-share-token .share-img-ring,
.cca-share-img {
  border-radius: 4px !important;
}

/* CCA node graph: ■AKITA share token icon inside node (akita-512.png) */
.ng-node-icon img[src*="/share/"] {
  border-radius: 3px !important;
}

/* Dual chapter: share-side node */
#dual-node-share .dual-node-img {
  border-radius: 3px !important;
}

/* Persistent pair: share float (■AKITA) */
#float-share .float-token-img {
  border-radius: 4px !important;
}

/* Hero front-2 is the ■AKITA share token */
.hero-float-front-2 {
  border-radius: 10px !important;  /* keep the existing slightly-rounded square */
}

/* Vault cards share-img (■AKITA glyph) stays square */
.vault-card-share-img {
  border-radius: 3px !important;
}

/* ───────────────────────────────────────────────────────────────────────
   ■AKITA SHARE TOKEN — UNIFIED BLUE FRAME (user request 2026-04-22)
   Every instance of a share token glyph (■AKITA, ■JESSE, ■GABRIELHAINES,
   ■THENICKSHIRLEY) gets an elegant Base-blue frame so the share tokens
   read as a distinct class — protocol-owned, canonical, identifiable.
   The frame is a single 1.5px hairline in Base-blue with a soft outer
   glow; intentionally restrained so it reads as "chrome" rather than
   decoration. Double-border look via box-shadow inset keeps depth.
   ─────────────────────────────────────────────────────────────────────── */

/* Token chapter: right-side minted share pill */
.share-img {
  border: 1.5px solid rgba(0, 82, 255, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(0, 82, 255, 0.12),
    0 0 18px rgba(0, 82, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* CCA chapter: share token inside .cca-share-token ring */
.cca-share-img {
  border: 1.5px solid rgba(0, 82, 255, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(0, 82, 255, 0.12),
    0 0 18px rgba(0, 82, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* Node graph: tiny ■AKITA icon inside cca-ng-token / close card-share pills.
   Use higher-specificity selector to beat the default .ng-node-icon img rule. */
.ng-node-icon img[src*="/share/"] {
  border: 1.5px solid rgba(0, 82, 255, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(0, 82, 255, 0.12),
    0 0 12px rgba(0, 82, 255, 0.25) !important;
}

/* Dual chapter: share-side node (■AKITA) */
#dual-node-share .dual-node-img {
  border: 1.5px solid rgba(0, 82, 255, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(0, 82, 255, 0.12),
    0 0 14px rgba(0, 82, 255, 0.22) !important;
}

/* Persistent pair: share float (■AKITA) */
#float-share .float-token-img {
  border: 1.5px solid rgba(0, 82, 255, 0.7) !important;
  box-shadow: 0 0 14px rgba(0, 82, 255, 0.22) !important;
}

/* Hero ambient float: ■AKITA drifter */
.hero-float-front-2 {
  border: 1.5px solid rgba(0, 82, 255, 0.55) !important;
  box-shadow: 0 0 16px rgba(0, 82, 255, 0.18) !important;
}

/* Vault cards share-img (4 tokens: ■AKITA, ■JESSE, ■GABRIELHAINES,
   ■THENICKSHIRLEY) — all are share tokens so all get the frame */
.vault-card-share-img {
  border: 1.5px solid rgba(0, 82, 255, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(0, 82, 255, 0.1),
    0 0 16px rgba(0, 82, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* Close scene: ■AKITA card floater */
.close-card-img {
  border: 1.5px solid rgba(0, 82, 255, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(0, 82, 255, 0.1),
    0 0 16px rgba(0, 82, 255, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Turn 5 — Dedupe + Nest the Initial Deposit panel INSIDE .token-coin
   The deposit-info used to float as an absolute overlay at bottom:18% of
   the scene. It now lives inside .token-coin so it reads as a strategy-
   card-style detail panel anchored to the coin it describes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nested strategy-card-style panel anchored directly below the coin icon.
   It is absolutely positioned INSIDE .token-coin so it rides with the coin's
   transform/scale but does NOT interact with the flex layout of siblings
   like .token-detail (coin-detail) that occupies flow space while opacity:0. */
#deposit-info.coin-deposit-panel {
  position: absolute !important;
  top: 130px !important;   /* coin-icon is 96px tall; 130px sits just below with breathing room */
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: auto !important;
  background: rgba(0, 0, 0, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 0.7rem 0.95rem 0.75rem;
  width: 220px;
  max-width: 220px;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  text-align: left;
  z-index: 3;
}

.coin-deposit-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(60, 130, 255, 0.22), transparent);
  margin: 0 0 0.25rem;
}

#deposit-info.coin-deposit-panel .deposit-label {
  font-size: 8px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(180, 192, 210, 0.78);
  font-weight: 400;
  margin: 0;
}
#deposit-info.coin-deposit-panel .deposit-amount {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0.1rem 0 0;
}
#deposit-info.coin-deposit-panel .deposit-unit {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 210, 225, 0.82);
  font-weight: 400;
  margin: 0;
}
#deposit-info.coin-deposit-panel .deposit-desc {
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(200, 210, 225, 0.82);
  font-weight: 300;
  margin: 0.35rem 0 0;
  max-width: 100%;
  letter-spacing: 0.01em;
}
#deposit-info.coin-deposit-panel .split-deployed {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(80, 170, 255, 0.92);
  font-weight: 400;
  margin: 0.55rem 0 0;
}

/* Hide the legacy .dual-copy CSS hooks — the element was removed in this turn,
   but if any stale reference survives, do not render it. */
.dual-copy { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Turn 6 — Deposit panel becomes a clickable expandable card + morphs into
   the ng-node-deposit pill at the token→engine transition. The ng-node-deposit
   now uses the AKITA creator coin (circle) so the user reads it as the same
   component moving, shrinking, and docking into the allocation engine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ng-node-deposit uses creator coin now (circle) for continuity ──────── */
.ng-node-icon-coin img,
.ng-node-deposit .ng-node-icon img {
  border-radius: 50% !important;   /* creator coin = circle */
  object-fit: cover;
}

/* ── Clickable + hover feedback on the deposit-info card ────────────────── */
#deposit-info.coin-deposit-panel[data-strat] {
  cursor: pointer;
  transition:
    border-color 0.35s var(--ease-out),
    box-shadow  0.35s var(--ease-out),
    background  0.35s var(--ease-out),
    width       0.40s cubic-bezier(0.4, 0, 0.2, 1);
}
#deposit-info.coin-deposit-panel[data-strat]:hover {
  border-color: rgba(60, 130, 255, 0.30);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(60, 130, 255, 0.09);
}
#deposit-info.coin-deposit-panel.strat-expanded {
  border-color: rgba(60, 130, 255, 0.35);
  background: rgba(6, 8, 14, 0.96);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(60, 130, 255, 0.14);
  width: 260px;
  max-width: 260px;
}

/* ── Header row with expand icon (matches strategy cards) ───────────────── */
.coin-deposit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  margin: 0;
}
.coin-deposit-expand {
  font-size: 13px;
  line-height: 1;
  color: rgba(200, 210, 225, 0.45);
  transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
  font-weight: 300;
  flex-shrink: 0;
}
#deposit-info.coin-deposit-panel:hover .coin-deposit-expand {
  color: rgba(60, 130, 255, 0.75);
}
#deposit-info.coin-deposit-panel.strat-expanded .coin-deposit-expand {
  transform: rotate(45deg);
  color: rgba(60, 130, 255, 0.95);
}

/* ── Expandable detail panel (same grid-row trick as strategy cards) ────── */
.coin-deposit-detail {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.coin-deposit-detail > .strat-detail-wrap {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out) 0.05s;
}
#deposit-info.coin-deposit-panel.strat-expanded .coin-deposit-detail {
  grid-template-rows: 1fr;
}
#deposit-info.coin-deposit-panel.strat-expanded .coin-deposit-detail > .strat-detail-wrap {
  opacity: 1;
  transition-delay: 0.12s;
}

/* When the card is mid-morphing into the ng-node pill, keep the expand icon
   and any expanded detail hidden so the pill stays compact. */
#deposit-info.coin-deposit-panel.morphing .coin-deposit-expand,
#deposit-info.coin-deposit-panel.morphing .deposit-desc,
#deposit-info.coin-deposit-panel.morphing .coin-deposit-detail,
#deposit-info.coin-deposit-panel.morphing .split-deployed,
#deposit-info.coin-deposit-panel.morphing .coin-deposit-divider {
  opacity: 0 !important;
  transition: opacity 0.25s var(--ease-out);
  pointer-events: none;
}
#deposit-info.coin-deposit-panel.morphing {
  /* Transform origin is set inline by JS (50% 50%) — card compresses
     from its center toward the small ng-node-deposit pill. */
  will-change: transform, opacity;
  /* During morph we also suppress hover/click affordances so the pill
     that is becoming the node-graph landing site doesn't still look like a card. */
  pointer-events: none;
}
/* Suppress the "+" expand icon rotation and hover glow during morph so the
   pill converges cleanly into the ng-node-deposit circle. */
#deposit-info.coin-deposit-panel.morphing,
#deposit-info.coin-deposit-panel.morphing:hover {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ────────────────────────────────────────────────────────
   Turn 7b — Smoother morph + clickable ng-node-deposit pill
   ──────────────────────────────────────────────────────── */

/* While morphing, we want the AKITA coin to stay bright (it's the
   visual anchor that carries across), and the card's body text to
   fade slightly but NOT disappear — the whole unit should look like
   one solid thing compressing. */
.token-coin.morphing-to-pill {
  will-change: transform, opacity;
  /* Ensure the coin's z-index is above node graph so we see it land */
  z-index: 50;
}
.token-coin.morphing-to-pill .token-img-ring {
  /* Shrink glow effect during morph */
  box-shadow: 0 0 0 1px rgba(136, 164, 226, 0.3);
  transition: box-shadow 0.4s var(--ease-out);
}
/* During morph we dim the verbose body text but keep the coin + title
   + number visible so they read as "the same component in transit". */
.token-coin.morphing-to-pill #deposit-info .deposit-desc,
.token-coin.morphing-to-pill #deposit-info .split-deployed,
.token-coin.morphing-to-pill #deposit-info .coin-deposit-expand,
.token-coin.morphing-to-pill #deposit-info .coin-deposit-detail,
.token-coin.morphing-to-pill #deposit-info .coin-deposit-divider {
  opacity: 0 !important;
  transition: opacity 0.2s var(--ease-out);
}
.token-coin.morphing-to-pill #deposit-info {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none;
}

/* ─── Clickable ng-node-deposit pill (same pattern as strategies) ───
   Override .ng-node-inner's default flex so we can stack the compact
   pill contents + optional detail panel VERTICALLY. The compact row
   is still flex; the outer container is column. */
#ng-node-deposit .ng-node-inner[data-strat] {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  transition:
    border-color 0.28s var(--ease-out),
    background 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out);
}
#ng-node-deposit .ng-node-inner[data-strat]:hover {
  border-color: rgba(136, 164, 226, 0.45);
  background: rgba(136, 164, 226, 0.035);
  box-shadow: 0 0 0 1px rgba(136, 164, 226, 0.25), 0 4px 18px rgba(136, 164, 226, 0.08);
}
#ng-node-deposit .ng-node-inner[data-strat] .ng-node-compact {
  display: flex;
  align-items: center;
  gap: 10px;
}
#ng-node-deposit .ng-node-inner[data-strat] .ng-node-expand {
  margin-left: auto;
  font-size: 14px;
  color: var(--color-text-muted);
  transition: transform 0.3s var(--ease-out), color 0.28s var(--ease-out);
  display: inline-block;
}
#ng-node-deposit .ng-node-inner[data-strat]:hover .ng-node-expand {
  color: var(--color-accent);
}
#ng-node-deposit .ng-node-inner[data-strat].strat-expanded .ng-node-expand {
  transform: rotate(45deg);
  color: var(--color-accent);
}

/* Expanded pill container styling — row-grid collapse like strategies */
#ng-node-deposit .ng-node-inner[data-strat] .ng-node-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-out);
}
#ng-node-deposit .ng-node-inner[data-strat] .ng-node-detail > .strat-detail-wrap {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.26s var(--ease-out);
}
#ng-node-deposit .ng-node-inner[data-strat].strat-expanded {
  border-color: rgba(136, 164, 226, 0.55) !important;
  background: rgba(136, 164, 226, 0.05) !important;
  box-shadow: 0 0 0 1px rgba(136, 164, 226, 0.35), 0 6px 22px rgba(136, 164, 226, 0.12) !important;
}
#ng-node-deposit .ng-node-inner[data-strat].strat-expanded .ng-node-detail {
  grid-template-rows: 1fr;
}
#ng-node-deposit .ng-node-inner[data-strat].strat-expanded .ng-node-detail > .strat-detail-wrap {
  opacity: 1;
  transition-delay: 0.1s;
}
/* Give expanded pill some extra breathing room around the detail rows */
#ng-node-deposit .ng-node-inner[data-strat] .ng-node-detail .strat-detail-wrap {
  padding-top: 4px;
}

/* ── Prevent rightward overlap with Allocation-Engine ──
   Clamp the pill's width at rest AND when expanded so growth is purely
   DOWNWARD (grid-row 0fr → 1fr). Detail rows wrap inside this box. */
#ng-node-deposit .ng-node-inner[data-strat] {
  width: 220px;        /* matches compact resting width */
  max-width: 220px;
  box-sizing: border-box;
}
#ng-node-deposit .ng-node-inner[data-strat].strat-expanded {
  width: 220px;
  max-width: 220px;
}
#ng-node-deposit .ng-node-inner[data-strat] .strat-detail-value {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.35;
}

/* ── Sibling dimming when pill is open ──
   When the pill is expanded, #node-graph gets a .deposit-pill-open class.
   Every other node dims to emphasize the pill's detail. !important is
   required because the scroll handler writes inline opacity every frame
   on these nodes. */
#node-graph.deposit-pill-open .ng-node-hub,
#node-graph.deposit-pill-open .ng-node-strat,
#node-graph.deposit-pill-open .ng-node-downstream,
#node-graph.deposit-pill-open .ng-node-idle,
#node-graph.deposit-pill-open .ng-edges-svg {
  opacity: 0.22 !important;
  transition: opacity 0.32s var(--ease-out) !important;
  pointer-events: none;
}
/* The pill itself stays full opacity */
#node-graph.deposit-pill-open #ng-node-deposit {
  opacity: 1;
  z-index: 40;
}
/* Restore transition on exit */
#node-graph .ng-node-hub,
#node-graph .ng-node-strat,
#node-graph .ng-node-downstream,
#node-graph .ng-node-idle,
#node-graph .ng-edges-svg {
  transition: opacity 0.32s var(--ease-out);
}

/* Smooth the existing transitions on coin/deposit during the long morph
   so any frame-to-frame jitter is dampened by CSS. */
#ng-node-deposit {
  transition: opacity 0.4s var(--ease-out);
}