.trail-particle {
  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
  animation: trail-float .72s ease-out forwards;
  will-change: transform, opacity;
}

.trail-particle.bread {
  width: clamp(1.7rem, 8vw, 2.25rem);
  height: clamp(1.1rem, 5.2vw, 1.45rem);
  border: 2px solid #7d4d22;
  border-radius: 52% 48% 46% 54%;
  background: radial-gradient(circle at 35% 28%, #f1c36b, #cf8a39 64%, #a96129);
  box-shadow: inset 0 -3px 0 rgba(91, 48, 22, .28), 2px 3px 0 rgba(9, 6, 12, .6);
}

.trail-particle.bread::before {
  content: "";
  position: absolute;
  inset: 18% 17%;
  border-radius: 50%;
  background: repeating-linear-gradient(115deg, transparent 0 5px, rgba(255, 236, 181, .88) 5px 7px, transparent 7px 11px);
  transform: rotate(-4deg);
}

.trail-particle.bread::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px dotted rgba(111, 61, 27, .58);
  border-radius: inherit;
}

.trail-particle.glitter {
  color: #c7a0dc;
  font-size: clamp(.65rem, 3vw, .95rem);
  text-shadow: 0 0 7px #ad72ca, 0 0 13px #6f3a83;
}

@keyframes trail-float {
  0% { opacity: .95; transform: translate(-50%, -50%) rotate(0deg) scale(.65); }
  45% { opacity: .9; transform: translate(calc(-50% + var(--drift-x)), calc(-50% - 15px)) rotate(var(--turn)) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--drift-x)), calc(-50% - 34px)) rotate(var(--turn)) scale(.55); }
}

@media (prefers-reduced-motion: reduce) {
  .trail-particle { display: none; }
}