/* ============================================================
   CHEER DESIGN — Grafismos (brand graphic devices)
   ------------------------------------------------------------
   "Bolinhas, degradê & sorriso" — dots, gradient & smile.

   • BOLINHAS / CONFETE  — scattered circles in the four support
     colors, used as a low-key background texture for energy.
   • ANEL EM DEGRADÊ      — rainbow gradient ring used as a badge
     or photo frame.
   These are reusable utility classes (not just tokens) because
   they are visual signatures, used verbatim across surfaces.
   ============================================================ */

/* ---- Confetti dots background texture ----
   Four support-color dots tiled loosely. Apply to any surface;
   keep it subtle (it sits behind content). Dot sizes are literal
   so the texture stays a self-contained graphic device, not a
   theme token. */
.cheer-confetti {
  background-color: var(--surface-page);
  background-image:
    radial-gradient(14px  circle at 8% 30%,  var(--cheer-yellow) 99%, transparent 100%),
    radial-gradient(11px  circle at 26% 72%, var(--cheer-lilac)  99%, transparent 100%),
    radial-gradient(13px  circle at 44% 24%, var(--cheer-cyan)   99%, transparent 100%),
    radial-gradient(10px  circle at 62% 78%, var(--cheer-blue)   99%, transparent 100%),
    radial-gradient(12px  circle at 80% 36%, var(--cheer-lilac)  99%, transparent 100%),
    radial-gradient(10px  circle at 94% 68%, var(--cheer-yellow) 99%, transparent 100%);
  background-size: 240px 150px;
  background-repeat: repeat;
}

/* Denser, smaller confetti for headers / hero strips */
.cheer-confetti--dense {
  background-image:
    radial-gradient(9px circle at 8% 30%,  var(--cheer-yellow) 99%, transparent 100%),
    radial-gradient(7px circle at 26% 72%, var(--cheer-lilac)  99%, transparent 100%),
    radial-gradient(8px circle at 44% 24%, var(--cheer-cyan)   99%, transparent 100%),
    radial-gradient(7px circle at 62% 78%, var(--cheer-blue)   99%, transparent 100%),
    radial-gradient(8px circle at 80% 36%, var(--cheer-lilac)  99%, transparent 100%),
    radial-gradient(7px circle at 94% 68%, var(--cheer-yellow) 99%, transparent 100%);
  background-size: 150px 95px;
}

/* ---- Rainbow gradient ring (badge / photo frame) ----
   Wrap an avatar / image; the conic gradient shows as a ring. */
.cheer-ring {
  display: inline-grid;
  place-items: center;
  padding: 8px;
  border-radius: var(--radius-full);
  background: var(--cheer-gradient-conic);
}
.cheer-ring > * {
  border-radius: var(--radius-full);
  border: 3px solid var(--surface-page);
  display: block;
}

/* ---- Gradient bar — thin rainbow rule used to underline / divide ---- */
.cheer-gradient-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--cheer-gradient);
}

/* ---- Gradient text — for the occasional flourish ---- */
.cheer-gradient-text {
  background: var(--cheer-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}