.login-card {
  animation: cardRise 0.8s ease forwards;
}

.grade-btn {
  transition: 0.25s ease;
}

.logo-mark {
  animation: logoPulse 2.4s infinite ease-in-out;
}

.orb-one {
  animation: floatOrb 7s infinite ease-in-out;
}

.orb-two {
  animation: floatOrb 9s infinite ease-in-out reverse;
}

.orb-three {
  animation: floatOrb 6s infinite ease-in-out;
}

@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(35px) scale(0.96);
  }

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

@keyframes logoPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.5);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
  }
}

@keyframes floatOrb {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }

  50% {
    transform: translateY(-22px) translateX(14px);
  }
}
.result-badge {
  animation: victoryPop 1s ease forwards, logoPulse 2.5s infinite ease-in-out;
}

@keyframes victoryPop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-20deg);
  }

  70% {
    transform: scale(1.15) rotate(8deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
.crate-box {
  animation: crateFloat 2.5s infinite ease-in-out;
}

.crate-box.opened {
  animation: crateOpen 0.8s ease forwards;
}

@keyframes crateFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(3deg);
  }
}

@keyframes crateOpen {
  0% {
    transform: scale(1) rotate(0);
  }

  45% {
    transform: scale(1.2) rotate(-8deg);
  }

  100% {
    transform: scale(1.05) rotate(0);
  }
}
@keyframes floatStudyImage {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.02);
  }
}
@keyframes confettiFall {
  0% {
    transform: translateY(-30px) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(120vh) rotate(900deg);
    opacity: 0;
  }
}
.avatar-circle,
.result-avatar {
  animation: avatarPulse 2.6s infinite ease-in-out;
}

.new-avatar-unlocked .result-avatar {
  animation: avatarUnlockPop 0.9s ease forwards, avatarPulse 2.6s infinite ease-in-out 0.9s;
}

@keyframes avatarPulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes avatarUnlockPop {
  0% {
    transform: scale(0.5) rotate(-18deg);
    opacity: 0;
  }

  70% {
    transform: scale(1.25) rotate(8deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0);
  }
}