@media (prefers-reduced-motion: reduce) {
  .cc-particle { animation: none !important; }
  img.cc-img-zoom { transition: none !important; }
}

.cc-particle {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation: cc-fade var(--cc-duration, 2000ms) ease-out forwards;
  z-index: 999;
}

@keyframes cc-fade {
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

.cc-bubble {
  border-radius: 50%;
  background: var(--cc-color, #FA853D);
}

.cc-ring {
  border-radius: 50%;
  background: transparent;
  border: var(--cc-ring, 2px) solid var(--cc-color, #FA853D);
}

.cc-triangle {
  background: var(--cc-color, #FA853D);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.cc-diamond {
  background: var(--cc-color, #FA853D);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: cc-fade-rot var(--cc-duration, 2000ms) ease-out forwards;
}

@keyframes cc-fade-rot {
  to {
    transform: translate(-50%, -50%) rotate(45deg) scale(3);
    opacity: 0;
  }
}

.cc-star {
  background: var(--cc-color, #FA853D);
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.cc-blob {
  background: var(--cc-color, #FA853D);
}

img.cc-img-zoom {
  transform: scale(var(--cc-zoom-scale, 1.08));
  transition: transform var(--cc-zoom-speed, 160ms) ease-out;
  will-change: transform;
}

.cc-stroke-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999;
}