/* SAMBARIO — bunting + confetti + carnival lights.
 *
 * Thin CSS-only layers: a string of flags, drifting confetti dots, and a few
 * spotlight washes. All driven by CSS custom properties so the HTML never has
 * to know the colours.
 */

/* ---- bunting ---- */
.bunting polygon{transition:fill .8s ease}
.bunting polygon:nth-child(3n+1){fill:var(--verde,#00C853)}
.bunting polygon:nth-child(3n+2){fill:var(--amarelo,#FFD60A)}
.bunting polygon:nth-child(3n+3){fill:var(--rosa,#FF2D78)}

/* ---- confete ---- */
.confetti,.confetti::before,.confetti::after{position:fixed;pointer-events:none;z-index:0}
.confetti{--s:6px;--x:10vw;--d:10s;--r:0deg;--c:#FF2D78;inset:0}
.confetti::before,.confetti::after{content:"";width:var(--s);height:var(--s);
  background:var(--c);border-radius:50%;opacity:.45;animation:drift var(--d) linear infinite}
.confetti::before{left:var(--x);top:-6%;animation-delay:calc(var(--d)*-.3)}
.confetti::after {left:calc(var(--x) + 30vw);top:-12%;animation-delay:calc(var(--d)*-.55)}
@keyframes drift{to{transform:translateY(110vh) rotate(var(--r))}}

/* ---- spots ---- */
.spot{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px);opacity:.28}
.spot.g{left:-6%;top:-10%;width:520px;height:320px;background:#00C853}
.spot.b{right:-8%;top:4%;width:480px;height:280px;background:#2E5BFF}
.spot.r{bottom:-8%;left:34%;width:440px;height:240px;background:#FF2D78}

/* ---- ring helper (SVG dash stroke) ---- */
.ring-fg{transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}