/* The hit flash communicates drum contact, so keep it visible even when the
   device requests reduced motion. Only the two existing hit effects are
   overridden; hand, foot, timing and notation styles are untouched. */
@media (prefers-reduced-motion: reduce) {
  .hit-point.is-hit::before,
  .hg-tip-demo-lab .hit-point.is-hit::before {
    animation-duration: 260ms !important;
  }

  .hit-point.is-hit::after,
  .hg-tip-demo-lab .hit-point.is-hit::after {
    animation-duration: 210ms !important;
  }
}

/* Optional HG drummer feedback style: a restrained ice-blue ring with a
   diamond contact core. The stage data attribute keeps the original
   Champagne Gold feedback as the default. */
.drum-stage[data-drummer-effect-style="diamondBlue"] .hit-point::before {
  border-width: 1px;
}

.drum-stage[data-drummer-effect-style="diamondBlue"] .hit-point::after {
  width: 16%;
  border-radius: 0;
  background: #b9f1ff;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.drum-stage[data-drummer-effect-style="diamondBlue"] .hit-point.is-hit::before {
  animation-name: hg-diamond-blue-hit-ring;
}

.drum-stage[data-drummer-effect-style="diamondBlue"] .hit-point.is-hit::after {
  animation-name: hg-diamond-blue-hit-core;
}

@keyframes hg-diamond-blue-hit-ring {
  0% {
    border-color: rgba(137, 226, 255, 0);
    opacity: 0;
    transform: scale(.72);
  }
  28% {
    border-color: rgba(137, 226, 255, .62);
    opacity: .72;
    box-shadow: 0 0 7px rgba(145, 232, 255, .18);
  }
  100% {
    border-color: rgba(137, 226, 255, 0);
    opacity: 0;
    transform: scale(1.13);
  }
}

@keyframes hg-diamond-blue-hit-core {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
  }
  35% {
    opacity: .96;
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 0 7px rgba(178, 241, 255, .86));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.65);
    filter: drop-shadow(0 0 3px rgba(178, 241, 255, .2));
  }
}

/* Crimson rose contact feedback: fragmented silver arcs, a faceted rose core,
   and short-lived red glints. It intentionally avoids a complete ring. */
.drum-stage[data-drummer-effect-style="crimsonRoseMist"] .hit-point::before {
  border: 0;
  background: conic-gradient(
    from -18deg,
    transparent 0 7%,
    rgba(255, 247, 244, .76) 7% 17%,
    transparent 17% 31%,
    rgba(221, 226, 234, .58) 31% 43%,
    transparent 43% 58%,
    rgba(255, 63, 120, .46) 58% 64%,
    rgba(255, 247, 244, .7) 64% 72%,
    transparent 72% 86%,
    rgba(221, 226, 234, .48) 86% 95%,
    transparent 95% 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}

.drum-stage[data-drummer-effect-style="crimsonRoseMist"] .hit-point::after {
  width: 17%;
  border-radius: 0;
  background: radial-gradient(circle at 36% 30%, #fff7f4 0 10%, #ff3f78 34%, #a91542 76%, rgba(169, 21, 66, .2) 100%);
  clip-path: polygon(50% 0, 61% 28%, 85% 17%, 72% 42%, 100% 50%, 71% 59%, 84% 85%, 58% 72%, 50% 100%, 41% 72%, 16% 85%, 29% 59%, 0 50%, 28% 42%, 15% 17%, 39% 28%);
}

.drum-stage[data-drummer-effect-style="crimsonRoseMist"] .hit-point.is-hit::before {
  animation: hg-crimson-rose-mist-arcs 230ms cubic-bezier(.16, 1, .3, 1) both;
}

.drum-stage[data-drummer-effect-style="crimsonRoseMist"] .hit-point.is-hit::after {
  animation: hg-crimson-rose-mist-core 205ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes hg-crimson-rose-mist-arcs {
  0% {
    opacity: 0;
    transform: scale(.7) rotate(-7deg);
    filter: blur(.8px);
  }
  34% {
    opacity: .72;
    transform: scale(.9) rotate(-1deg);
    filter: blur(0);
    box-shadow: 0 2px 8px rgba(169, 21, 66, .16);
  }
  100% {
    opacity: 0;
    transform: scale(1.1) rotate(4deg);
    filter: blur(.45px);
  }
}

@keyframes hg-crimson-rose-mist-core {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.25) rotate(-12deg);
  }
  32% {
    opacity: .95;
    transform: translate(-50%, -50%) scale(1) rotate(0);
    filter: drop-shadow(0 2px 7px rgba(255, 63, 120, .58));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55) rotate(8deg);
    filter: drop-shadow(0 2px 3px rgba(169, 21, 66, .16));
  }
}

@media (prefers-reduced-motion: reduce) {
  .drum-stage[data-drummer-effect-style="crimsonRoseMist"] .hit-point.is-hit::before {
    animation-name: hg-crimson-rose-mist-arcs-reduced;
  }

  .drum-stage[data-drummer-effect-style="crimsonRoseMist"] .hit-point.is-hit::after {
    animation-name: hg-crimson-rose-mist-core-reduced;
  }
}

@keyframes hg-crimson-rose-mist-arcs-reduced {
  0%, 100% { opacity: 0; }
  38% { opacity: .68; }
}

@keyframes hg-crimson-rose-mist-core-reduced {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
  }
  38% {
    opacity: .94;
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 2px 5px rgba(255, 63, 120, .42));
  }
}