/* Truus kit: warm off-white paper, giant lowercase Epilogue 900, one word swapped for Lora italic and looped by
   hand, die-cut stickers with a white keyline. */
:root {
  --paper: #f0ebe6;
  --ink: #000;
  --orange: #f5693c;
}
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; }

.scatter {
    --scatter-gutter: 0px;
  --scatter-min: 0px;
  --scatter-height: 300svh;
  font-size: clamp(84px, 24vw, 300px);
}
.scatter__track { margin: 0; display: flex; flex-direction: column; gap: .1em; }
.line { display: flex; align-items: baseline; gap: .2em; white-space: nowrap; width: max-content; }
.line--h { margin-left: 2em; }
.line--2 { margin-left: 0; }
.words {
  font: 900 1em/.78 Epilogue, "Arial Black", sans-serif;
  letter-spacing: -.035em;
}
.swap {
  font: italic 500 1.08em/.78 Lora, Georgia, serif;
  letter-spacing: -.02em;
  padding-right: .06em;
}

/* the loop round "happy": placed by stage.js on the word */
.loop { position: absolute; top: 50%; height: auto; overflow: visible; pointer-events: none; }
.loop path { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }

/* stickers: the wrapper places, the [data-scatter-item] inside moves */
.spot { position: absolute; }
.spot svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 .02em .03em rgba(0,0,0,.18)); }
.spot--burst   { width: .86em; left: 3.15em; top: .12em; transform: translate(-50%, -50%) rotate(-10deg); }
.spot--heart   { width: .78em; left: .55em; top: 50%; transform: translate(0, -50%) rotate(-8deg); }
.spot--hundred { width: .86em; left: 4.1em; top: .25em; transform: translate(-50%, -50%) rotate(7deg); }
.spot--smile   { width: .7em; left: 99%; top: 100%; transform: translate(-60%, -30%) rotate(12deg); }
.stk-word { font: italic 500 30px/1 Lora, Georgia, serif; fill: #fff; }
.stk-num { font: 900 48px/1 Epilogue, "Arial Black", sans-serif; letter-spacing: -2px; fill: #2d7864; }

.after { height: 0; }