.sprinkles{
    width: calc(100vw + 50px);
    pointer-events: none;
    overflow: hidden;
    height: 50vh;
    max-height: 50vh;
  }

  .sprinkle{
    position: absolute;
    top: -6vh;
    left: 0;
    width: var(--w);
    height: var(--h);
    background: var(--c);
    border-radius: 999px;
    opacity: var(--o);
    transform: translateX(var(--x)) rotate(var(--r0));
    will-change: transform, opacity;
    animation: fall var(--t) linear var(--d) infinite;
  }

  /* Some pieces as dots / blocks (matches SVG “shapes vibe”, not exact sizing) */
  .sprinkle.is-dot{
    border-radius: 999px;
    width: var(--s);
    height: var(--s);
  }
  .sprinkle.is-block{
    border-radius: var(--br);
    width: var(--s);
    height: var(--s);
  }

  @keyframes fall{
    0%   { transform: translateX(var(--x)) translateY(-10vh) rotate(var(--r0)); opacity: var(--o); }
    70%  { opacity: var(--o); }
    100% { transform: translateX(var(--x)) translateY(110vh) rotate(var(--r1)); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce){
    .sprinkle{ animation: none; opacity: 0.2; }
  }