/**
 * Genni — Supergraphic
 * "Sliced arc + confetti" system. CSS-only, no images.
 *
 * Use on an empty <div> inside a position:relative parent. The shapes are
 * absolute-positioned and pointer-events: none.
 *
 *   <div class="genni-arc genni-arc--top-right"></div>            // primary arc
 *   <div class="genni-arc-dot genni-arc-dot--bottom-left"></div>  // soft accent
 *   <div class="genni-confetti genni-confetti--top-right"></div>  // dot field
 *
 * Recolor by setting --arc-color on the parent (defaults to --genni-pink).
 */

.genni-arc, .genni-arc-dot {
  position: absolute;
  pointer-events: none;
  background: var(--arc-color, var(--genni-pink));
}

/* Primary sliced arc — a circle clipped into an architectural shape */
.genni-arc {
  width: 600px; height: 600px;
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 100% 60%, 0 60%);
}
.genni-arc--top-right    { right: -200px; top: -200px; }
.genni-arc--top-left     { left: -200px; top: -200px; transform: scaleX(-1); }
.genni-arc--bottom-right { right: -200px; bottom: -200px; transform: scaleY(-1); }
.genni-arc--bottom-left  { left: -200px; bottom: -200px; transform: scale(-1, -1); }

.genni-arc--sm { width: 360px; height: 360px; }

/* Soft companion dot */
.genni-arc-dot {
  width: 220px; height: 220px;
  border-radius: 50%;
  opacity: 0.15;
}
.genni-arc-dot--bottom-left  { left: -80px;  bottom: -80px; }
.genni-arc-dot--top-right    { right: -80px; top: -80px; }
.genni-arc-dot--bottom-right { right: -80px; bottom: -80px; }
.genni-arc-dot--top-left     { left: -80px;  top: -80px; }
.genni-arc-dot--lg { width: 320px; height: 320px; }
.genni-arc-dot--sm { width: 140px; height: 140px; }

/* Confetti field — kinetic dots scattered across one corner of a surface.
   Sized to roughly fill a 240px square. */
.genni-confetti {
  position: absolute;
  pointer-events: none;
  width: 240px; height: 240px;
  --c: var(--arc-color, var(--genni-pink));
}
.genni-confetti::before,
.genni-confetti::after,
.genni-confetti > span {
  content: ""; position: absolute; border-radius: 50%; background: var(--c);
}
/* 8 dots laid out by hand — varied size + opacity for that scattered feel */
.genni-confetti > span:nth-child(1) { right: 20px;  top: 20px;  width: 10px; height: 10px; }
.genni-confetti > span:nth-child(2) { right: 70px;  top: 55px;  width: 6px;  height: 6px; opacity: 0.7; }
.genni-confetti > span:nth-child(3) { right: 0;     top: 90px;  width: 16px; height: 16px; }
.genni-confetti > span:nth-child(4) { right: 115px; top: 115px; width: 5px;  height: 5px; opacity: 0.5; }
.genni-confetti > span:nth-child(5) { right: 35px;  top: 145px; width: 22px; height: 22px; opacity: 0.85; }
.genni-confetti > span:nth-child(6) { right: 155px; top: 35px;  width: 7px;  height: 7px; opacity: 0.6; }
.genni-confetti > span:nth-child(7) { right: 100px; top: 175px; width: 12px; height: 12px; }
.genni-confetti > span:nth-child(8) { right: 195px; top: 100px; width: 6px;  height: 6px; opacity: 0.4; }

/* Corner placement — flips the right-anchored layout to other corners */
.genni-confetti--top-right    { right: 0; top: 0; }
.genni-confetti--top-left     { left: 0;  top: 0;  transform: scaleX(-1); }
.genni-confetti--bottom-right { right: 0; bottom: 0; transform: scaleY(-1); }
.genni-confetti--bottom-left  { left: 0;  bottom: 0; transform: scale(-1, -1); }