/* Generated from components/BonusIcon.module.css */
.course-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  color: var(--gold-deep);
}

.course-icon-tile svg { width: 40px; height: 40px; overflow: visible; }
.course-icon-detail, .course-icon-spark { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .course-icon-tile[data-active="true"] .course-icon-detail {
    animation-duration: 1.4s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-iteration-count: 1;
  }
  .course-icon-tile[data-active="true"] .course-icon-spark { animation: glint 1.4s ease-in-out 1; }
  .course-icon-camera[data-active="true"] .course-icon-detail { animation-name: shutter; }
  .course-icon-video[data-active="true"] .course-icon-detail { animation-name: clap; transform-origin: left bottom; }
  .course-icon-community[data-active="true"] .course-icon-detail { animation-name: gather; }
  .course-icon-phone[data-active="true"] .course-icon-detail { animation-name: polish; }
  .course-icon-location[data-active="true"] .course-icon-detail { animation-name: land; }
  .course-icon-mindset[data-active="true"] .course-icon-detail { animation-name: affirm; }
}

@keyframes shutter {
  0%, 100% { transform: scale(1); }
  32% { transform: scale(0.68) rotate(-18deg); }
  62% { transform: scale(1.08) rotate(6deg); }
}
@keyframes clap {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-18deg); }
  48% { transform: rotate(3deg); }
  65% { transform: rotate(0); }
}
@keyframes gather {
  0%, 100% { transform: translateY(0); opacity: 1; }
  30% { transform: translateY(3px); opacity: 0.45; }
  65% { transform: translateY(-1px); opacity: 1; }
}
@keyframes polish {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(0.8) rotate(-15deg); }
  65% { transform: scale(1.12) rotate(8deg); }
}
@keyframes land {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
  65% { transform: translateY(1px); }
}
@keyframes affirm {
  0%, 100% { transform: scale(1); opacity: 1; }
  30% { transform: scale(0.65); opacity: 0.35; }
  65% { transform: scale(1.12); opacity: 1; }
}
@keyframes glint {
  0%, 100% { opacity: 1; transform: scale(1); }
  25% { opacity: 0.3; transform: scale(0.75); }
  60% { opacity: 1; transform: scale(1.15); }
}

.course-icon-tile { flex-shrink: 0; margin: 0; --gold: #c9a24b; --gold-deep: #e2c277; --paper: #17130f; }