.experience-card,
.experience-center__ghost-button,
.experience-hud__controls button,
.experience-card button {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.experience-card:hover {
  box-shadow: 0 18px 44px rgba(16, 24, 23, 0.1);
  transform: translateY(-3px);
}

.experience-center__ghost-button:hover,
.experience-hud__controls button:hover,
.experience-card button:hover {
  transform: translateY(-1px);
}

.experience-achievement.is-visible {
  animation: experience-slide-in 260ms ease;
}

.experience-score-feedback.is-visible {
  animation: experience-score-pop 1100ms ease;
}

@keyframes experience-slide-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes experience-score-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
  }

  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-24px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-card,
  .experience-center__ghost-button,
  .experience-hud__controls button,
  .experience-card button,
  .experience-hud__bar span {
    transition: none;
  }

  .experience-card:hover,
  .experience-center__ghost-button:hover,
  .experience-hud__controls button:hover,
  .experience-card button:hover {
    transform: none;
  }

  .experience-achievement.is-visible,
  .experience-score-feedback.is-visible {
    animation: none;
  }
}