/* ===========================================================================
   Canvas Animation Styles — preserved verbatim from the original build.
   Two components: Earth Globe (#sg-*) and Trade/OTC visualization (.fuze-*).
   =========================================================================== */

/* --- Earth Globe --- */
                #sg-root::before {
                  content: "";
                  position: relative;
                  inset: 0;
                  background:
                    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(16, 223, 197, 0.18), transparent 65%),
                    radial-gradient(ellipse 30% 28% at 50% 50%, rgba(16, 223, 197, 0.10), transparent 70%);
                  pointer-events: none;
                  z-index: 0;
                }

                .sg-label {
                  position: absolute;
                  top: 0;
                  left: 0;
                  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
                  font-size: 11px;
                  font-weight: 500;
                  letter-spacing: 0.06em;
                  white-space: nowrap;
                  pointer-events: none;
                  z-index: 10;
                  opacity: 0;
                  will-change: transform, opacity;
                  color: #f7f9ff;
                  padding: 4px 7px;
                  border-radius: 6px;
                  border: 1px solid rgba(16, 223, 197, 0.32);
                  background: rgba(5, 12, 26, 0.72);
                  backdrop-filter: blur(4px);
                  -webkit-backdrop-filter: blur(4px);
                  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
                }

                .sg-label .sg-code {
                  opacity: 0.8;
                  margin-left: 4px;
                  letter-spacing: 0.1em;
                  color: #10dfc5;
                }

                .sg-label .sg-sign {
                  opacity: 0.85;
                  margin-right: 3px;
                }

                .sg-label.sg-in {
                  border-color: rgba(16, 223, 197, 0.45);
                }

                .sg-label.sg-out {
                  border-color: rgba(16, 223, 197, 0.45);
                }

                #sg-root {
                  pointer-events: auto !important;
                }

                #sg-globe-canvas {
                  touch-action: none;
                  cursor: grab;
                  pointer-events: auto !important;
                }

                #sg-globe-canvas.sg-dragging {
                  cursor: grabbing;
                }

/* --- Trade / Circular OTC visualization --- */
                .fuze-trade-stage {
                  --fuze-bg: #05060d;
                  --fuze-blue: #10dfc5;
                  --fuze-blue-soft: #10dfc5;
                  --fuze-blue-deep: #0a9e8a;
                  --fuze-blue-pale: #8ff0e0;
                  --fuze-text: #e7ecff;
                  --fuze-text-dim: #6b78a8;
                  --fuze-border: rgba(16, 223, 197, 0.25);
                  --fuze-grid: rgba(16, 223, 197, 0.06);

                  position: relative;
                  width: 100%;
                  max-width: 600px;
                  aspect-ratio: 1 / 1;
                  container-type: inline-size;
                  container-name: fuze;
                  margin: 0 auto;
                  background: radial-gradient(ellipse at 30% 80%, #0a1640 0%, var(--fuze-bg) 70%);
                  overflow: hidden;
                  border-radius: 16px;
                  border: 1px solid var(--fuze-border);
                  /* Webflow/column layouts sometimes defer width; avoid zero-height collapse */
                  min-height: 280px;
                  font-family: 'Inter', system-ui, -apple-system, sans-serif;
                  color: var(--fuze-text);
                }

                .fuze-trade-stage * {
                  box-sizing: border-box;
                }

                .fuze-trade-grid-bg {
                  position: absolute;
                  inset: 0;
                  background-image:
                    linear-gradient(var(--fuze-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--fuze-grid) 1px, transparent 1px);
                  background-size: 60px 60px;
                  mask-image: radial-gradient(ellipse at center, black 50%, transparent 95%);
                  -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 95%);
                }

                .fuze-symbol-bg {
                  position: absolute;
                  inset: 0;
                  z-index: 1;
                  pointer-events: none;
                  overflow: hidden;
                  mask-image: radial-gradient(ellipse at center, black 20%, transparent 90%);
                  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 90%);
                }

                .fuze-tile {
                  position: absolute;
                  width: 48px;
                  height: 48px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 11px;
                  font-weight: 600;
                  letter-spacing: 0.5px;
                  font-family: 'JetBrains Mono', 'SF Mono', monospace;
                  color: rgba(16, 223, 197, 0.10);
                  user-select: none;
                  transition: color 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
                  transform: scale(1);
                  transform-origin: center;
                  will-change: transform;
                }

                .fuze-tile.dim {
                  color: rgba(16, 223, 197, 0.05);
                }

                @keyframes fuze-tile-flash {
                  0% {
                    color: rgba(16, 223, 197, 0.10);
                    transform: scale(1);
                    text-shadow: none;
                  }

                  45% {
                    color: rgba(140, 240, 225, 0.52);
                    transform: scale(1.06);
                    text-shadow: 0 0 14px rgba(16, 223, 197, 0.35);
                  }

                  100% {
                    color: rgba(16, 223, 197, 0.10);
                    transform: scale(1);
                    text-shadow: none;
                  }
                }

                .fuze-tile.dim.fuze-tile-flash-anim {
                  animation-name: fuze-tile-flash-dim;
                }

                @keyframes fuze-tile-flash-dim {
                  0% {
                    color: rgba(16, 223, 197, 0.05);
                    transform: scale(1);
                    text-shadow: none;
                  }

                  45% {
                    color: rgba(100, 230, 210, 0.38);
                    transform: scale(1.06);
                    text-shadow: 0 0 12px rgba(16, 223, 197, 0.28);
                  }

                  100% {
                    color: rgba(16, 223, 197, 0.05);
                    transform: scale(1);
                    text-shadow: none;
                  }
                }

                .fuze-tile.fuze-tile-flash-anim {
                  animation: fuze-tile-flash 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
                }

                .fuze-trade-canvas {
                  position: absolute;
                  top: 18px;
                  left: 16px;
                  right: 16px;
                  bottom: 82px;
                  z-index: 2;
                  display: block;
                  width: 100%;
                  height: 100%;
                  pointer-events: none;
                }


                /* TRANSACTION FEED — cards overlay on top of the graph (left side) */
                .fuze-feed {
                  position: absolute;
                  left: 16px;
                  top: 18px;
                  bottom: 94px;
                  width: min(268px, 44%);
                  width: min(268px, 44cqi);
                  max-width: 44%;
                  z-index: 5;
                  overflow: hidden;
                  pointer-events: none;
                  /* Fade out the bottom edge so cards exit gracefully */
                  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
                  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
                }

                .fuze-feed-header {
                  display: flex;
                  justify-content: space-between;
                  align-items: flex-start;
                  flex-wrap: wrap;
                  gap: 6px 10px;
                  margin-bottom: 12px;
                  font-family: 'JetBrains Mono', monospace;
                  font-size: 9px;
                  color: var(--fuze-text-dim);
                  letter-spacing: 1.5px;
                  text-transform: uppercase;
                  opacity: 0;
                  animation: fuze-fade-in 0.6s ease-out 0.4s forwards;
                }

                .fuze-feed-header-dot {
                  display: inline-block;
                  width: 7px;
                  height: 7px;
                  border-radius: 50%;
                  background: var(--fuze-blue);
                  box-shadow: 0 0 6px var(--fuze-blue);
                  margin-right: 6px;
                  animation: fuze-pulse-dot 0.8s ease-in-out infinite;
                }

                .fuze-feed-list {
                  position: relative;
                  height: calc(100% - 28px);
                  overflow: hidden;
                }

                .fuze-feed-track {
                  display: flex;
                  flex-direction: column;
                  gap: 10px;
                  will-change: transform;
                }

                .fuze-tx {
                  display: flex;
                  align-items: center;
                  gap: 11px;
                  min-height: 68px;
                  padding: 11px 13px;
                  background: rgba(8, 12, 24, 0.92);
                  border: 1px solid var(--fuze-border);
                  border-radius: 11px;
                  font-family: 'JetBrains Mono', 'SF Mono', monospace;
                  font-size: 12px;
                  backdrop-filter: blur(14px);
                  -webkit-backdrop-filter: blur(14px);
                  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
                  pointer-events: auto;
                  flex-shrink: 0;
                  opacity: 1;
                  transform: translateY(0);
                  animation: fuze-tx-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
                }

                @keyframes fuze-tx-enter {
                  from {
                    opacity: 0;
                    transform: translateY(10px);
                  }

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

                .fuze-tx-icon {
                  width: 38px;
                  height: 38px;
                  border-radius: 9px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                  font-size: 15px;
                  font-weight: 700;
                }

                .fuze-tx-icon.trade {
                  background: rgba(16, 223, 197, 0.15);
                  border: 1px solid rgba(16, 223, 197, 0.4);
                  color: var(--fuze-blue-soft);
                }

                .fuze-tx-icon.stake {
                  background: rgba(16, 223, 197, 0.20);
                  border: 1px solid rgba(16, 223, 197, 0.5);
                  color: var(--fuze-blue-pale);
                }

                .fuze-tx-icon.lend {
                  background: rgba(16, 223, 197, 0.25);
                  border: 1px solid rgba(16, 223, 197, 0.55);
                  color: white;
                }

                .fuze-tx-body {
                  flex: 1;
                  min-width: 0;
                  display: flex;
                  flex-direction: column;
                  gap: 4px;
                }

                .fuze-tx-headline {
                  color: var(--fuze-text);
                  font-size: 12px;
                  font-weight: 600;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .fuze-tx-action {
                  color: var(--fuze-blue-soft);
                  font-weight: 600;
                }

                .fuze-tx-meta {
                  color: var(--fuze-text-dim);
                  font-size: 10px;
                  letter-spacing: 0.3px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .fuze-tx-time {
                  color: var(--fuze-text-dim);
                  font-size: 9px;
                  flex-shrink: 0;
                }

                .fuze-tx-status {
                  display: inline-flex;
                  align-items: center;
                  gap: 4px;
                  color: var(--fuze-blue-soft);
                  font-size: 9px;
                  letter-spacing: 1px;
                  text-transform: uppercase;
                  flex-shrink: 0;
                }

                .fuze-tx-status::before {
                  content: '';
                  display: inline-block;
                  width: 6px;
                  height: 6px;
                  border-radius: 50%;
                  background: var(--fuze-blue);
                  box-shadow: 0 0 6px var(--fuze-blue);
                }

                /* FOOTER — single line of stats (smoothed ticker values updated in JS) */
                .fuze-footer {
                  position: absolute;
                  left: 14px;
                  right: 14px;
                  bottom: 16px;
                  display: flex;
                  justify-content: space-between;
                  align-items: flex-start;
                  gap: 8px;
                  flex-wrap: nowrap;
                  z-index: 5;
                  font-family: 'JetBrains Mono', monospace;
                  font-size: 10px;
                  opacity: 0;
                  animation: fuze-fade-in 0.6s ease-out 0.6s forwards;
                  border-top: 1px solid var(--fuze-border);
                  padding-top: 11px;
                }

                .fuze-stat {
                  display: flex;
                  flex-direction: column;
                  gap: 2px;
                  min-width: 0;
                  flex: 1 1 0;
                }

                .fuze-stat-label {
                  font-size: 7px;
                  letter-spacing: 0.9px;
                  color: var(--fuze-text-dim);
                  text-transform: uppercase;
                }

                .fuze-stat-value {
                  color: var(--fuze-text);
                  font-size: 11px;
                  font-weight: 500;
                  font-variant-numeric: tabular-nums;
                  transition: color 0.35s ease, opacity 0.35s ease;
                }

                .fuze-stat-value.fuze-stat-tick {
                  color: var(--fuze-blue-pale);
                }

                @keyframes fuze-fade-in {
                  to {
                    opacity: 1;
                  }
                }

                @keyframes fuze-pulse-dot {

                  0%,
                  100% {
                    opacity: 1;
                    transform: scale(1);
                  }

                  50% {
                    opacity: 0.5;
                    transform: scale(0.85);
                  }
                }

                @media (prefers-reduced-motion: reduce) {
                  .fuze-tile {
                    transition: none;
                  }

                  .fuze-tile.fuze-tile-flash-anim {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                  }

                  .fuze-tx {
                    animation: none;
                    opacity: 1;
                    transform: none;
                  }

                  .fuze-feed-header-dot {
                    animation: none;
                  }
                }

                /* Narrow phones: viewport smaller than our 600px module — extra compaction */
                @media (max-width: 480px) {
                  .fuze-footer {
                    left: 10px;
                    right: 10px;
                    bottom: 10px;
                    padding-top: 8px;
                    gap: 6px;
                  }

                  .fuze-trade-canvas {
                    top: 12px;
                    left: 10px;
                    right: 10px;
                    bottom: 74px;
                  }

                  .fuze-feed {
                    left: 10px;
                    top: 12px;
                    bottom: 84px;
                    width: min(240px, 50%);
                    width: min(240px, 50cqi);
                    max-width: 50%;
                  }

                  .fuze-feed-track {
                    gap: 9px;
                  }

                  .fuze-tx {
                    min-height: 58px;
                    padding: 9px 10px;
                    font-size: 10px;
                    gap: 8px;
                    border-radius: 9px;
                  }

                  .fuze-tx-icon {
                    width: 30px;
                    height: 30px;
                    font-size: 13px;
                    border-radius: 7px;
                  }

                  .fuze-tx-headline {
                    font-size: 10px;
                  }

                  .fuze-tx-meta {
                    font-size: 8px;
                  }

                  .fuze-tx-time,
                  .fuze-tx-status {
                    font-size: 7px;
                  }

                  .fuze-stat-value {
                    font-size: 9px;
                  }

                  .fuze-stat-label {
                    font-size: 6px;
                    letter-spacing: 0.5px;
                  }

                  .fuze-tile {
                    width: 30px;
                    height: 30px;
                    font-size: 7px;
                  }
                }