/* Ripple wave injected by yg-ripple.js onto interactive surfaces. */

.yg-ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: color-mix(in oklch, var(--md-sys-color-primary) 32%, transparent);
  transform: scale(0);
  opacity: 0.55;
  animation: yg-ripple-wave 540ms var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
  z-index: 0;
  mix-blend-mode: normal;
  will-change: transform, opacity;
}

/* Nav-link, wizard steps etc often have filled/active states — use on-surface tint so it stays visible on the primary-container fill. */
.yg-shell-link.is-active .yg-ripple,
.yg-tabs__item.is-active .yg-ripple,
.yg-wizard__step.is-active .yg-ripple {
  background: color-mix(in oklch, var(--md-sys-color-on-secondary-container) 28%, transparent);
}

/* Player surface is on a black scrim; use a white ripple for visibility. */
.yg-player__btn .yg-ripple,
.yg-player__center-play .yg-ripple,
.yg-player__menu-item .yg-ripple,
.yg-player__unmute .yg-ripple {
  background: rgba(255, 255, 255, 0.32);
}

@keyframes yg-ripple-wave {
  0% {
    transform: scale(0);
    opacity: 0.55;
  }
  60% {
    opacity: 0.35;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yg-ripple {
    animation-duration: 1ms;
  }
}