/**
 * TypingTales Custom Styles
 * Additional styles beyond Tailwind CSS
 */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Remove number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

/* Typing input auto-height */
#typing-input {
  resize: none;
}

/* Certificate print styles */
@media print {
  @page {
    margin: 1cm;
  }

  body {
    background: white !important;
  }

  .gradient-bg {
    background: white !important;
  }
}

/* Loading animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Celebration animation for completion */
@keyframes celebrate {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(-5deg);
  }
  75% {
    transform: scale(1.1) rotate(5deg);
  }
}

.celebrate {
  animation: celebrate 0.5s ease-in-out;
}