/* Advanced Animations for Spices Website */

/* Scroll-triggered animations */
.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease-out;
}

.animate-on-scroll:not(.animated) {
  opacity: 0;
  transform: translateY(30px);
  animation: fallbackVisible 3s ease-out forwards;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback animation to ensure items become visible */
@keyframes fallbackVisible {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  80% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation for grid items */
.stagger-animation {
  animation: staggerIn 0.6s ease-out forwards;
}

@keyframes staggerIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover animations for interactive elements */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(255, 45, 45, 0.3);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Text animations */
.text-reveal {
  overflow: hidden;
  position: relative;
}

.text-reveal .text-line {
  display: block;
  transform: translateY(100%);
  animation: textReveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes textReveal {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Loading animation for images */
.image-load {
  opacity: 0;
  animation: imageLoad 0.8s ease-out forwards;
}

@keyframes imageLoad {
  0% {
    opacity: 0;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Spice level indicator animation */
.spice-level-animate {
  display: inline-block;
  animation: spicePop 0.3s ease-out forwards;
}

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

/* Heat wave effect for fire emojis */
.heat-wave {
  animation: heatWave 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes heatWave {
  0%,
  100% {
    transform: scaleY(1) scaleX(1);
  }
  25% {
    transform: scaleY(1.1) scaleX(0.95);
  }
  50% {
    transform: scaleY(0.9) scaleX(1.05);
  }
  75% {
    transform: scaleY(1.05) scaleX(0.98);
  }
}

/* Spice particle floating animation */
.spice-float {
  animation: spiceFloat 4s ease-in-out infinite;
}

@keyframes spiceFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-15px) rotate(90deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-8px) rotate(180deg);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-20px) rotate(270deg);
    opacity: 0.9;
  }
}

/* Button animations */
.btn-hover-effect {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-hover-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
}

.btn-hover-effect:hover::before {
  left: 100%;
}

.btn-hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 45, 45, 0.4);
}

/* Pulsating order button */
.pulse-order {
  animation: pulseOrder 2s infinite;
}

@keyframes pulseOrder {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 45, 45, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 45, 45, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 45, 45, 0);
  }
}

/* Menu item entrance animation */
.menu-item-entrance {
  opacity: 0;
  transform: translateX(-30px);
  animation: menuItemEntrance 0.6s ease-out forwards;
}

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

/* Spice meter fill animation */
.spice-meter-fill {
  position: relative;
  overflow: hidden;
}

.spice-meter-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.5),
    transparent
  );
  animation: spiceMeterFill 2s ease-out forwards;
}

@keyframes spiceMeterFill {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Social media hover effects */
.social-hover {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.social-hover:hover {
  transform: translateY(-5px) rotate(5deg);
}

.social-instagram:hover {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  color: white;
}

.social-tiktok:hover {
  background: linear-gradient(45deg, #ff0050, #00f2ea);
  color: white;
}

.social-facebook:hover {
  background: #1877f2;
  color: white;
}

/* Loading spinner for forms */
.form-loading {
  position: relative;
}

.form-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--primary-red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translateY(-50%);
}

@keyframes spin {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* Success animation for form submission */
.form-success {
  animation: formSuccess 0.6s ease-out;
}

@keyframes formSuccess {
  0% {
    transform: scale(1);
    background-color: var(--white);
  }
  50% {
    transform: scale(1.02);
    background-color: #e8f5e8;
  }
  100% {
    transform: scale(1);
    background-color: var(--white);
  }
}

/* Error shake animation */
.form-error {
  animation: formError 0.5s ease-in-out;
}

@keyframes formError {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: var(--gradient-primary);
  z-index: 9999;
  transition: width 0.1s ease-out;
}

/* Parallax effect for background elements */
.parallax-element {
  transform: translateZ(0);
  will-change: transform;
}

/* Typewriter effect for text */
.typewriter {
  overflow: hidden;
  border-right: 3px solid var(--primary-red);
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: var(--primary-red);
  }
}

/* Glowing effect for special elements */
.glow-effect {
  animation: glowPulse 2s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  from {
    box-shadow: 0 0 20px rgba(255, 45, 45, 0.5);
  }
  to {
    box-shadow: 0 0 30px rgba(255, 45, 45, 0.8), 0 0 40px rgba(255, 215, 0, 0.3);
  }
}

/* Sliding animations for mobile menu */
.slide-in-left {
  animation: slideInLeft 0.3s ease-out forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.3s ease-in forwards;
}

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

/* Bounce in animation for cards */
.bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Flip animation for cards on hover */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
}

.flip-card-back {
  transform: rotateY(180deg);
  background: var(--gradient-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

/* Morphing animation for icons */
.morph-icon {
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.morph-icon:hover {
  transform: scale(1.2) rotate(360deg);
}

/* Elastic animation for buttons */
.elastic {
  animation: elastic 0.6s ease-out;
}

@keyframes elastic {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  40% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1.15);
  }
  65% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Wobble animation for attention */
.wobble {
  animation: wobble 1s ease-in-out;
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Zoom in animation for images */
.zoom-in {
  transition: transform 0.3s ease;
  overflow: hidden;
}

.zoom-in:hover {
  transform: scale(1.1);
}

/* Slide up animation for content */
.slide-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in animation with delay */
.fade-in-delay {
  opacity: 0;
  animation: fadeInDelay 1s ease-out forwards;
}

.fade-in-delay-1 {
  animation-delay: 0.1s;
}
.fade-in-delay-2 {
  animation-delay: 0.2s;
}
.fade-in-delay-3 {
  animation-delay: 0.3s;
}
.fade-in-delay-4 {
  animation-delay: 0.4s;
}
.fade-in-delay-5 {
  animation-delay: 0.5s;
}

@keyframes fadeInDelay {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom cursor trail effect */
.cursor-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--primary-red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: cursorTrail 0.5s ease-out;
}

@keyframes cursorTrail {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

/* Reduced motion alternatives */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .stagger-animation,
  .text-reveal .text-line,
  .menu-item-entrance,
  .bounce-in,
  .elastic,
  .wobble,
  .slide-up {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hover-lift:hover,
  .hover-scale:hover,
  .zoom-in:hover {
    transform: none;
  }

  .flip-card:hover .flip-card-inner {
    transform: none;
  }

  .typewriter {
    border-right: none;
    animation: none;
    white-space: normal;
  }
}

/* Performance optimizations */
.animate-gpu {
  transform: translateZ(0);
  will-change: transform, opacity;
}

.animate-gpu-auto {
  will-change: auto;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .glow-effect {
    animation: none;
    box-shadow: none;
    border: 2px solid currentColor;
  }

  .pulse-order {
    animation: none;
  }

  .heat-wave {
    animation: none;
  }
}