/* Recipe Loading Animation Styles */
.recipe-loading-container {
  position: relative;
  padding: 2rem;
}

.recipe-loading-logo {
  transition: transform 0.3s ease, opacity 0.3s ease;
  backface-visibility: hidden;
}

/* Logo Container */
.logo-container {
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1000px;
  margin-bottom: 1rem;
}

.logo-icon {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Logo slide out animation - same as food */
.logo-icon.exiting {
  animation: foodIconSlideOut 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Logo slide in animation */
.logo-icon.entering {
  animation: foodIconSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Snap Animation - finger snap effect */
@keyframes snap {
  0% {
    transform: scale(1) rotate(0deg);
  }
  20% {
    transform: scale(1.15) rotate(-8deg);
  }
  40% {
    transform: scale(0.9) rotate(3deg);
  }
  60% {
    transform: scale(1.1) rotate(-3deg);
  }
  80% {
    transform: scale(0.95) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Y-axis jiggle animation - 3D rotation wobble */
@keyframes jiggle {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(20deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.logo-container.snapping {
  animation: snap 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.logo-icon.jiggling {
  animation: jiggle 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.recipe-loading-logo.snapping {
  animation: snap 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Food Icon Container */
.food-icon-container {
  opacity: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  background: transparent !important;
}

/* Ensure food icons are transparent and don't block background */
.food-icon-container img {
  background: transparent;
  mix-blend-mode: normal;
}

/* Hide white fill paths in SVGs on red background */
.logo-container.bg-red-500 .food-icon-container img {
  /* SVGs with white backgrounds need special handling */
  filter: brightness(1.1);
}

/* Food Icon Slide Animations - Right to Left */
@keyframes foodIconSlideIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes foodIconSlideOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.food-icon-container.active {
  animation: foodIconSlideIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.food-icon-container.exiting {
  animation: foodIconSlideOut 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Hide/show logo */
.recipe-loading-logo.hidden {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.recipe-loading-logo.visible {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Loading message fade */
@keyframes messageFade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.recipe-loading-container.processing [data-recipe-loading-target="message"] {
  animation: messageFade 2s ease-in-out infinite;
}