/* Custom Animations and Non-Tailwind Styles for Quiz */

@keyframes float {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }

  33% {
    transform: translate(20px, -30px) rotate(2deg);
  }

  66% {
    transform: translate(-15px, 15px) rotate(-1deg);
  }

  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

.animate-float-slow {
  animation: float 20s ease-in-out infinite;
}

.animate-float-delayed {
  animation: float 18s ease-in-out infinite;
  animation-delay: -5s;
}

/* View Transitions */
.view-enter {
  animation: slideUpFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.view-exit {
  animation: slideUpFadeOut 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
  }

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

@keyframes slideUpFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-30px);
    filter: blur(5px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Hide scrollbar for clean look */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.text-shadow-sm {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}