/* /clusters-map only, on top of /paper-trading/paper-trading.css. The page is about a picture, so it opens on one:
   a drawn map, drawn the way the app draws the Map. Every colour, width and alpha in the drawing's parts below is
   the app's own number (app/src/engine/palette.ts; tests/landing-pages.test.mjs holds the two equal). Green is
   buying, orange is selling, teal is holding, violet is a cluster buy, and nothing else on this page wears them.
   Static page, no script. */
:root{ --buy:#21c95e; --sell:#ff622e; --hold:#2db4a0; --cluster:#8b58e4; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---- first screen: the words on the left, the map on the right, bleeding toward the edge ---- */
.cm-hero{ padding:40px 0 64px; }
/* no wash behind this first screen: the Map's ground is plain, and the only violet on it is a cluster buy */
.cm-hero::before{ content:none; }
.cm-hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:center; }
.cm-hero h1{ font-size:clamp(34px, 3.9vw, 52px); max-width:none; text-wrap:balance; }
.cm-hero .lede{ max-width:30em; }
.cm-scene{ display:block; width:100%; height:auto; overflow:visible; }
.cm-cap{ margin:10px 0 0; font:500 13px/1.4 var(--sans); color:var(--muted); }
@media (min-width:1000px){
  .cm-hero{ padding:56px 0 80px; }
  .cm-hero .wrap{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
  .cm-art{ margin-right:-40px; }
}

/* ---- the drawing's parts, shared by the first screen, the key, the storyboard and the comparison ---- */
/* a line: a trader's last trade on a token. It sags like a rope and keeps its width at any size. */
.cm-l{ fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.cm-l.buy{ stroke:rgba(33,201,94,.65); stroke-width:1.6; }
.cm-l.sell{ stroke:rgba(255,98,46,.65); stroke-width:1.6; }
.cm-l.hold{ stroke:rgba(45,180,160,.22); stroke-width:1; }
.cm-l.link{ stroke:var(--line-hi); stroke-width:1.5; }
/* a trader: one step behind the tokens, further back while only holding, with a 2px ring that says which */
.cm-t{ opacity:.9; }
.cm-t.hold{ opacity:.675; }
.cm-t.pick, .cm-t.lit{ opacity:1; }
.cm-fr{ fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.cm-fr.buy{ stroke:rgba(33,201,94,.9); }
.cm-fr.sell{ stroke:rgba(255,98,46,.9); }
.cm-fr.hold{ stroke:rgba(203,208,235,.22); }
.cm-fr.ink{ stroke:#f8f8f8; }
/* a token with no logo yet: a two-tone wash and its ticker's initials, a 1px edge, the corner 18% of the side */
.cm-edge{ stroke:rgba(203,208,235,.22); stroke-width:1; vector-effect:non-scaling-stroke; }
.cm-ini{ font:700 32px/1 var(--sans); fill:rgba(248,248,248,.9); text-anchor:middle; }
.cm-lab rect{ fill:rgba(6,5,16,.85); }
.cm-tk{ font:700 14px/1 var(--sans); fill:#f8f8f8; text-anchor:middle; }
.cm-mc{ font:400 12.5px/1 var(--sans); fill:#9899a3; text-anchor:middle; }
/* the $ a tracked trade pops off its token, and the dot that rides its line: both only when motion is wanted */
.cm-pop{ font:800 22px/1 var(--sans); text-anchor:middle; stroke:rgba(6,5,16,.85); stroke-width:3.5; stroke-linejoin:round; paint-order:stroke; opacity:0; }
.cm-pop.buy{ fill:rgb(33,201,94); }
.cm-pop.sell{ fill:rgb(255,98,46); }
.cm-dot{ display:none; }
/* a quiet token and its trader sit well back; outside a picked trader's cluster the map dims */
.cm-dim, .cm-t.cm-dim{ opacity:.4; }
.cm-out, .cm-t.cm-out{ opacity:.45; }
/* not the Map's: the names on the first drawing, the outline a tile grows into, another site's holder circles */
.cm-note{ font:600 13px/1 var(--sans); fill:var(--soft); }
.cm-note.buy{ fill:var(--buy); }
.cm-note.sell{ fill:var(--sell); }
.cm-note.hold{ fill:var(--hold); }
.cm-lead{ fill:none; stroke:var(--line-hi); stroke-width:1.2; }
.cm-grow{ fill:none; stroke:rgba(203,208,235,.34); stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.cm-holder{ fill:var(--raised); stroke:var(--line-hi); stroke-width:1.2; }

/* the moving part: a dot per trade rides its line (drawn in the page), and a $ climbs 22px off the token in 1.4s
   of a 6s loop, with the app's quick overshoot on the way in */
@media (prefers-reduced-motion: no-preference){
  .cm-scene .cm-pop{ animation:cm-rise 6s cubic-bezier(.33,1,.68,1) infinite, cm-popin 6s linear infinite; transform-box:fill-box; transform-origin:center; }
  .cm-scene .cm-pop.p2{ animation-delay:3s; }
  .cm-scene .cm-pop.p3{ animation-delay:1.6s; }
  .cm-scene .cm-pop.p4{ animation-delay:4.3s; }
  .cm-dot{ display:inline; }
}
@keyframes cm-rise{ 0%{ translate:0 0; } 23.33%, 100%{ translate:0 -22px; } }
@keyframes cm-popin{ 0%{ opacity:1; scale:.55; } 1.87%{ scale:1.18; } 4.2%{ scale:1; } 12.83%{ opacity:1; } 23.33%, 100%{ opacity:0; scale:1; } }
@media (prefers-reduced-motion: reduce){ .cm-scene .cm-pop.p1{ opacity:1; } }
/* on a small screen the names on the drawing would be too small to read; the key under it says the same */
@media (max-width:699.98px){ .cm-scene .cm-note, .cm-scene .cm-lead, .cm-scene .cm-lab{ display:none; } }

/* ---- the key: a mark, its name, what it means ---- */
.cm-key{ margin:36px 0 0; display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line); }
.cm-key > div{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:6px 20px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); }
.cm-key svg{ grid-row:1 / span 2; width:72px; height:48px; overflow:visible; }
.cm-key dt{ font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; align-self:end; }
.cm-key dd{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); max-width:44em; align-self:start; }
@media (min-width:900px){
  .cm-key > div{ grid-template-columns:72px 11em minmax(0,1fr); gap:24px; }
  .cm-key svg{ grid-row:auto; }
  .cm-key dt, .cm-key dd{ align-self:center; }
}

/* ---- the storyboard: one scene, four moments ---- */
.cm-story{ list-style:none; margin:36px 0 0; padding:0; counter-reset:f; display:grid; grid-template-columns:minmax(0,1fr); gap:28px 20px; }
@media (min-width:700px){ .cm-story{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .cm-story{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.cm-story li{ counter-increment:f; }
.cm-story svg{ display:block; width:100%; height:auto; background:var(--ink); border:1px solid var(--line-hi); border-radius:14px; overflow:hidden; }
.cm-story h3{ margin:16px 0 6px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; }
.cm-story h3::before{ content:counter(f) ". "; color:var(--muted); font-weight:600; }
.cm-story p{ margin:0; font:500 15px/1.6 var(--sans); color:var(--soft); }

/* ---- two kinds of map, side by side ---- */
.cm-versus{ margin:36px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
@media (min-width:800px){ .cm-versus{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.cm-versus figure{ margin:0; padding:20px 20px 22px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.cm-versus svg{ display:block; width:100%; height:auto; background:var(--ink); border-radius:10px; }
.cm-versus figcaption{ margin-top:14px; font:500 15px/1.6 var(--sans); color:var(--soft); }
.cm-versus figcaption b{ display:block; margin-bottom:2px; font:700 clamp(17px, 1.7vw, 20px)/1.3 var(--sans); letter-spacing:-.01em; color:var(--w); }