/* CrowdTune Animated Logo - Rock Riff Pulse */

/* --- Container --- */
.ct-wrap {
  --ct-scale: 1;
  --ct-glow: 0;
  --ct-wobble: 0;

  position: relative;
  width: 280px;
  height: 280px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Your cleaned logo (transparent outside the circle) */
.ct-logo {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  transform: rotate(calc(var(--ct-wobble) * 0.9deg));
  will-change: transform;
}

/* --- Disc overlay --- */
.ct-disc {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translateZ(0) scale(var(--ct-scale)) rotate(calc(var(--ct-wobble) * 2.5deg));
  will-change: transform, filter;

  /* metallic disc */
  background: radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.95),
      rgba(210, 220, 235, 0.85) 40%,
      rgba(120, 140, 170, 0.75) 70%,
      rgba(20, 30, 45, 0.9)
    ),
    radial-gradient(circle at 65% 70%, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0) 55%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 10px 22px rgba(0, 0, 0, 0.25);
  filter: brightness(calc(1 + var(--ct-glow) * 0.9)) contrast(calc(1 + var(--ct-glow) * 0.25));
}

/* --- Glow bloom layer --- */
.ct-glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  pointer-events: none;
  transform: translateZ(0) scale(calc(0.95 + var(--ct-scale) * 0.08));
  will-change: transform, opacity, filter;

  opacity: calc(var(--ct-glow) * 0.95);
  filter: blur(6px);

  /* neon-ish bloom */
  background: radial-gradient(circle, rgba(0, 255, 255, 0.85), rgba(0, 255, 255, 0) 65%),
    radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
}

/* --- Arc flash overlay --- */
.ct-arcs {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(0.3px) brightness(1.1);

  /* a soft ring flash that reads like the logo "broadcast" lighting up */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0) 46%,
    rgba(255, 220, 80, 0) 50%,
    rgba(255, 220, 80, 0.55) 54%,
    rgba(255, 220, 80, 0) 60%,
    rgba(0, 0, 0, 0) 70%
  );
}

/* Optional: hover micro-interaction */
@media (hover: hover) {
  .ct-wrap:hover .ct-disc {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 14px 28px rgba(0, 0, 0, 0.3);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ct-disc,
  .ct-logo,
  .ct-glow,
  .ct-arcs {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}