@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@keyframes spinSlow {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spinSlow 2s linear infinite;
}

@keyframes pulseFast {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-pulse-fast {
  animation: pulseFast 0.5s ease-in-out infinite;
}

@keyframes scaleUp {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.animate-scale-up {
  animation: scaleUp 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.scale-up {
  animation: scaleUp 0.5s ease-in-out forwards;
}

.rotate {
  animation: rotate 2s linear infinite;
}

.icon-animate-in {
  animation: scaleUp 0.5s ease-in-out forwards;
}

.icon-animate-out {
  animation: fadeOut 0.3s ease-in-out forwards;
}

.card-expanded {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  transition: all 0.5s ease-in-out;
}

.card-collapsed {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.checkmark-hidden {
  transform: scale(0);
  opacity: 0;
}

.checkmark-visible {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease-in-out;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 0.5s infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

.card-collapsing {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
}

@keyframes singleBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.animate-single-bounce {
  animation: singleBounce 0.5s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}

.flip-out {
  animation: flipOut 0.3s ease-out forwards;
}

.flip-in {
  animation: flipIn 0.3s ease-out forwards;
}

@keyframes flipOut {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(90deg); }
}

@keyframes flipIn {
  from { transform: rotateY(-90deg); }
  to { transform: rotateY(0deg); }
}

.card-container {
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
  width: 100%;
  min-height: 500px; /* Change from fixed height to min-height */
}

.card {
  position: absolute;
  width: 100%;
  height: auto; /* Change from 100% to auto */
  backface-visibility: hidden;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card.active {
  position: relative; /* Change from absolute to relative */
  z-index: 1;
}

.card.flip-out {
  transform: rotateY(-90deg);
}

.card.flip-in {
  transform: rotateY(90deg);
}

/* Rest of the CSS remains the same */

.active {
  transform: scale(1.1);
}

.word-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.word-display {
  font-size: 3rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: font-size 0.3s ease;
  flex-grow: 1;
  min-width: 0;
}

.play-button {
  flex-shrink: 0;
}

/* Remove the .word-shrink class if it's not being used */