/* assets/pages/learn/learn-clickable-pulse.css */
/* Stronger, explicit clickable cues for the learning interactive blocks. */

.learn-term-button {
  position: relative;
  animation: learnTermPulseStrong 2.2s ease-in-out infinite !important;
}

.learn-term-button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255,224,138,.28);
  opacity: 0;
  pointer-events: none;
  animation: learnTermInnerGlow 2.2s ease-in-out infinite;
}

.learn-term-button:nth-child(2n),
.learn-term-button:nth-child(2n)::after { animation-delay: .25s; }
.learn-term-button:nth-child(3n),
.learn-term-button:nth-child(3n)::after { animation-delay: .5s; }

.learn-term-button.is-active,
.learn-term-button.is-active::after {
  animation: none !important;
}

.learn-section-body #maqam-interactive-root .learn-click-note,
.learn-section-body #maqam-test-root .learn-click-note,
.learn-section-body #rhythm-interactive-root .learn-click-rhythm,
.learn-section-body #rhythm-interactive-root .learn-meter-click,
.learn-section-body #rhythm-interactive-root .learn-cycle-click {
  animation: learnSvgPulseStrong 1.95s ease-in-out infinite !important;
  transform-box: fill-box;
  transform-origin: center;
}

.learn-section-body #maqam-interactive-root .learn-click-note:nth-of-type(2n),
.learn-section-body #maqam-test-root .learn-click-note:nth-of-type(2n),
.learn-section-body #rhythm-interactive-root .learn-click-rhythm:nth-of-type(2n) {
  animation-delay: .22s !important;
}

.learn-section-body #maqam-interactive-root .learn-click-note:nth-of-type(3n),
.learn-section-body #maqam-test-root .learn-click-note:nth-of-type(3n),
.learn-section-body #rhythm-interactive-root .learn-click-rhythm:nth-of-type(3n) {
  animation-delay: .44s !important;
}

.learn-section-body #maqam-interactive-root .learn-click-note:hover,
.learn-section-body #maqam-test-root .learn-click-note:hover,
.learn-section-body #rhythm-interactive-root .learn-click-rhythm:hover,
.learn-section-body #rhythm-interactive-root .learn-meter-click:hover,
.learn-section-body #rhythm-interactive-root .learn-cycle-click:hover,
.learn-section-body #maqam-interactive-root .learn-click-note:focus-visible,
.learn-section-body #maqam-test-root .learn-click-note:focus-visible,
.learn-section-body #rhythm-interactive-root .learn-click-rhythm:focus-visible,
.learn-section-body #rhythm-interactive-root .learn-meter-click:focus-visible,
.learn-section-body #rhythm-interactive-root .learn-cycle-click:focus-visible {
  animation: none !important;
  filter: drop-shadow(0 0 24px rgba(255,224,138,.55)) !important;
}

.learn-section-body #maqam-interactive-root .learn-click-note ellipse,
.learn-section-body #maqam-test-root .learn-click-note ellipse,
.learn-section-body #rhythm-interactive-root .learn-click-rhythm ellipse {
  stroke: rgba(255,224,138,.44);
  stroke-width: 1.5;
}

.learn-section-body #rhythm-interactive-root .learn-rest-symbol,
.learn-section-body #rhythm-interactive-root .learn-meter,
.learn-section-body #rhythm-interactive-root .learn-rhythm-label,
.learn-section-body #maqam-interactive-root .learn-click-note text,
.learn-section-body #maqam-test-root .learn-click-note text {
  filter: drop-shadow(0 0 10px rgba(255,224,138,.30));
}

@keyframes learnTermPulseStrong {
  0%, 100% {
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 0 0 rgba(255,224,138,0);
    transform: translateY(0);
  }
  50% {
    border-color: rgba(255,224,138,.52);
    box-shadow: 0 0 22px rgba(255,224,138,.18), 0 0 34px rgba(124,214,255,.07);
    transform: translateY(-1px);
  }
}

@keyframes learnTermInnerGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: .75; }
}

@keyframes learnSvgPulseStrong {
  0%, 100% {
    opacity: .86;
    filter: drop-shadow(0 0 5px rgba(255,224,138,.16));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 22px rgba(255,224,138,.48));
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-term-button,
  .learn-term-button::after,
  .learn-section-body #maqam-interactive-root .learn-click-note,
  .learn-section-body #maqam-test-root .learn-click-note,
  .learn-section-body #rhythm-interactive-root .learn-click-rhythm,
  .learn-section-body #rhythm-interactive-root .learn-meter-click,
  .learn-section-body #rhythm-interactive-root .learn-cycle-click {
    animation: none !important;
  }
}