/* Playful, non-interactive SVG accents. The inline symbol library lives in index.html. */
.shape-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.shape-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.shape {
  position: absolute;
  width: 56px;
  height: 56px;
  max-width: none;
  overflow: visible;
  fill: var(--shape-fill, var(--yellow));
  stroke: var(--shape-stroke, var(--ink));
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  user-select: none;
}

.shape-orbit,
.shape-squiggle {
  fill: none;
}

.shape-squiggle { --shape-stroke: var(--peach); }
.shape-flower { --shape-fill: var(--green); }
.shape-burst,
.shape-bolt,
.shape-cross,
.shape-dots { --shape-fill: var(--yellow); }

.hero,
.roadmap,
.market { position: relative; isolation: isolate; overflow: hidden; }
.hero-grid,
.hero-traits,
.roadmap > .container,
.market > .container { position: relative; z-index: 1; }
.hero > .shape-layer,
.roadmap > .shape-layer,
.market > .shape-layer { z-index: 0; }

/* Hero: accents sit in the generous margins around the copy and mascot. */
.hero-shape-flower { width: 140px; height: 140px; left: -85px; top: 46%; }
.hero-shape-bolt { width: 46px; height: 46px; left: 49%; top: 30px; --shape-fill: var(--peach); }
.hero-shape-squiggle { width: 65px; height: 65px; left: 47%; top: 64%; }
.hero-shape-cross { width: 26px; height: 26px; left: 38%; top: 13%; --shape-fill: var(--peach); }
.hero-shape-orbit { width: 140px; height: 140px; right: -85px; bottom: 90px; --shape-stroke: var(--peach); }
.hero-shape-dots { width: 32px; height: 32px; left: 20%; bottom: 110px; --shape-fill: var(--ink); }
.mascot-shape-bolt { left: -24px; top: 35%; width: 55px; height: 55px; --shape-fill: var(--yellow); }
.mascot-shape-orbit { right: -30px; top: 55%; width: 85px; height: 85px; --shape-stroke: var(--peach); }

/* Roadmap accents frame the cards and stay underneath their readable content. */
.roadmap-shape-orbit { left: 47%; top: 75px; width: 105px; height: 105px; --shape-stroke: var(--peach); }
.roadmap-shape-bolt { right: 25px; top: 35px; width: 43px; height: 43px; }
.roadmap-shape-cross { left: 25%; bottom: 85px; width: 25px; height: 25px; --shape-fill: var(--peach); }
.roadmap-shape-flower { right: -60px; bottom: -45px; width: 180px; height: 180px; }
.roadmap-shape-squiggle { left: 45%; bottom: 20px; width: 120px; height: 65px; }
.phase-shape { position: absolute; right: 0; top: 0; width: 56px; height: 56px; max-width: none; fill: var(--shape-fill, var(--yellow)); pointer-events: none; user-select: none; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; overflow: visible; }
.roadmap-card:nth-child(1) .phase-shape { --shape-fill: var(--yellow); }
.roadmap-card:nth-child(2) .phase-shape { --shape-fill: var(--green); transform: rotate(15deg); }
.roadmap-card:nth-child(3) .phase-shape { --shape-fill: var(--peach); transform: rotate(30deg); }

/* Market accents use the dark chart area for a few high-contrast marks. */
.market-shape-star { left: -65px; top: 25%; width: 110px; height: 110px; --shape-fill: var(--yellow); }
.market-shape-orbit { left: 62%; top: 20px; width: 85px; height: 85px; --shape-stroke: var(--peach); }
.market-shape-squiggle { right: 20%; bottom: 48px; width: 100px; height: 60px; }
.market-shape-cross { left: 31%; bottom: 45px; width: 26px; height: 26px; --shape-fill: var(--green); }
.chart-empty { isolation: isolate; }
.chart-empty > .shape { z-index: 0; }
.chart-shape-star { left: -38px; top: 38px; width: 92px; height: 92px; --shape-fill: var(--yellow); }
.chart-shape-orbit { right: -30px; top: 42px; width: 82px; height: 82px; --shape-stroke: var(--peach); }
.chart-shape-cross { right: 12%; bottom: 34px; width: 25px; height: 25px; --shape-fill: var(--green); }
.chart-empty > :not(.shape) { position: relative; z-index: 1; }

@keyframes shape-bob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(0, -9px, 0) rotate(5deg); }
}
.hero-shape-flower,
.roadmap-shape-flower { animation: shape-bob 7.5s ease-in-out infinite; }

@media (max-width: 1200px) {
  .hero-shape-bolt,
  .hero-shape-cross,
  .hero-shape-squiggle,
  .roadmap-shape-bolt,
  .roadmap-shape-cross,
  .roadmap-shape-squiggle,
  .market-shape-cross { display: none; }
  .hero-shape-flower { width: 110px; height: 110px; left: -70px; }
  .hero-shape-orbit { width: 105px; height: 105px; right: -65px; }
  .roadmap-shape-flower { width: 135px; height: 135px; right: -50px; }
}

@media (max-width: 760px) {
  .shape { stroke-width: 2.2; }
  .hero-shape-flower { width: 78px; height: 78px; left: -44px; top: 44%; }
  .hero-shape-orbit { width: 82px; height: 82px; right: -52px; bottom: 145px; }
  .hero-shape-dots { width: 24px; height: 24px; left: auto; right: 13%; bottom: 110px; }
  .mascot-shape-bolt { width: 40px; height: 40px; left: -16px; top: 42%; }
  .mascot-shape-orbit { width: 62px; height: 62px; right: -23px; top: 58%; }
  .roadmap-shape-orbit { width: 72px; height: 72px; left: auto; right: -35px; top: 32%; }
  .roadmap-shape-flower { width: 105px; height: 105px; right: -42px; bottom: -25px; }
  .market-shape-star { width: 78px; height: 78px; left: -48px; top: 22%; }
  .market-shape-orbit { width: 65px; height: 65px; left: auto; right: -28px; top: 15px; }
  .market-shape-squiggle { right: 8%; bottom: 45px; width: 72px; height: 44px; }
  .chart-shape-star { left: -28px; top: 26px; width: 65px; height: 65px; }
  .chart-shape-orbit { right: -24px; top: 28px; width: 60px; height: 60px; }
  .chart-shape-cross { right: 9%; bottom: 25px; width: 20px; height: 20px; }
  .phase-shape { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shape-flower,
  .roadmap-shape-flower { animation: none; }
}

.chart-body { position: relative; }
.chart-body iframe { width: 100%; height: 100%; }
.chart-empty { position: relative; height: 100%; inset: auto; }
[hidden] { display: none !important; }