/* Yellow glitter fall animation — used by partials/yellow-glitter.blade.php.
   glitter.js drives the actual animation via the Web Animations API; this
   file only handles layout and the transform origin each blob animates around. */

.yellow-glitter {
  line-height: 0;
}

/* Desktop SVG by default, mobile SVG below 567px */
.yellow-glitter .glitter-mobile {
  display: none;
}

@media (max-width: 566.98px) {
  .yellow-glitter .glitter-desktop { display: none; }
  .yellow-glitter .glitter-mobile  { display: block; }
}

.yellow-glitter svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.yellow-glitter svg path {
  transform-box: fill-box;       /* rotate each blob around its own center */
  transform-origin: center;
}