/* TM Starburst – Cloud Source + Partikel + sanftes Driften */
.tm-starburst{
  position: relative;
  display: inline-block;
  width: 72px;
  height: 44px;
  margin-left: 8px;
  vertical-align: middle;
  pointer-events: none;
}

/* Wolke (SVG) */
.tm-starburst-cloud{
  width: 100%;
  height: 100%;
  display: block;
  animation: tmCloudDrift 18s ease-in-out infinite;
  will-change: transform;
}

.tm-starburst-cloud path{
  fill: rgba(255,255,255,0.24);
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,0.28))
    drop-shadow(0 0 14px rgba(255,255,255,0.14));
}

/* ca. 3mm ~ 11px (bei 96dpi). Wir bleiben bewusst etwas darunter, damit es wirklich subtil ist. */
@keyframes tmCloudDrift{
  0%   { transform: translate(0px, 0px); }
  20%  { transform: translate(8px, -4px); }
  45%  { transform: translate(-6px, 7px); }
  70%  { transform: translate(9px, 6px); }
  100% { transform: translate(0px, 0px); }
}

/* Partikel */
.tm-star-particle{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  transform: translate(-50%, -50%);
  animation: tmStarDrift var(--t, 1200ms) ease-out forwards;
  will-change: transform, opacity, filter;
}

@keyframes tmStarDrift{
  0%{
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateX(0) scale(1);
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateX(var(--d, 48px)) scale(0.6);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tm-starburst-cloud{ animation: none; }
  .tm-star-particle{ animation: none; opacity: 0; }
}