/* Starburst pop: a 24-point burst sticker with a short caps line on it. The burst (not the words) springs in,
   skews and breathes; the words stay still on top so they never wobble. Motion lives in part.js. */
.starburst {
  /* look */
  --sb-w: 180px;                 /* sticker width (the source used 120px phone / 180-220px desktop) */
  --sb-fill: #f4ead7;            /* burst colour */
  --sb-ink: #22201c;             /* text colour */
  --sb-tilt: 3deg;               /* the whole sticker sits tipped (alternate -3deg / 3deg down a list) */
  --sb-font: 800 calc(var(--sb-w) * .078)/1.1 "Arial Black", "Helvetica Neue", Arial, system-ui, sans-serif;
  --sb-track: .01em;
  /* motion (ms / plain numbers; read by part.js) */
  --sb-from: .62;                /* show: burst starts at this scale ... */
  --sb-peak: 1.05;               /* ... and springs to this (elastic.out(1, .5) overshoots it to ~1.14) */
  --sb-pop: 1000;                /* spring duration */
  --sb-skew: 9;                  /* random start skewX within +-this many degrees */
  --sb-skew-keep: .35;           /* the skew eases to this share of itself (stays a little crooked) */
  --sb-skew-dur: 450;
  --sb-fade: 250;                /* wrapper fade in */
  --sb-breathe: .95;             /* idle loop: peak <-> this scale */
  --sb-breathe-dur: 1150;        /* one way; yoyo forever */
  --sb-out: 200;                 /* hide: fade out */
  --sb-out-scale: .88;           /* hide: burst shrinks to this */

  position: relative;
  display: block;
  width: var(--sb-w);
  rotate: var(--sb-tilt);
  color: var(--sb-ink);
  pointer-events: none;
}
/* Pre-hide only when script runs, so a page without JS still shows its stickers. */
@media (scripting: enabled) { .starburst[data-starburst] { opacity: 0; } }

.starburst__shape { display: block; transform-origin: 50% 50%; will-change: transform, scale; }
.starburst__shape svg { display: block; width: 100%; height: auto; overflow: visible; }
.starburst__shape path { fill: var(--sb-fill); }

.starburst__text {
  position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%;
  width: 66.6%;
  font: var(--sb-font);
  letter-spacing: var(--sb-track);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}