/* Custom CSS needed for 3D transform behavior */

.perspective {
  perspective: 1000px; /* Needed to create 3D space */
}

.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

/* Tailwind does not provide rotate-y utilities by default, so add these */
.rotate-y-180 {
  transform: rotateY(180deg);
}

.group-hover\:rotate-y-180:hover {
  transform: rotateY(180deg);
}

.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
    opacity: 0;
  }
  
  .fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
  }
  
  .pulse {
    animation: pulse 0.5s ease-in-out;
  }
  
  .scale-up {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
  .pulse-effect {
    animation: buttonPulse 0.5s ease-in-out;
  }
  
  /* Main Navigation Animation */
  .main-nav {
    transition: all 0.3s ease;
    z-index: 1000;
  }
  
  /* Sticky Navbar Styles */
  .main-nav.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    
    width: 100%;
    animation: slideDown 0.3s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .main-nav.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 10px 0;
    
  }
  
  /* Animation for sticky navbar appearing */
  @keyframes slideDown {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  
  /* Animation Keyframes */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes buttonPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(229, 209, 123, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(229, 209, 123, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(229, 209, 123, 0);
    }
  }
  
  /* AOS Custom Styles */
  [data-aos] {
    pointer-events: none;
  }
  
  [data-aos].aos-animate {
    pointer-events: auto;
  }
  
  /* Additional Animation Classes for AOS */
  .slide-in-left {
    animation: slideInLeft 0.8s ease forwards;
  }
  
  .slide-in-right {
    animation: slideInRight 0.8s ease forwards;
  }
  
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* Media query for mobile devices */
  @media (max-width: 768px) {
    .main-nav.sticky {
      padding: 10px 10px;
      
    }
    
    .main-nav.sticky .logo h1 {
      font-size: 1.2rem;
    }
  }
/* Mobile-specific animations */
@media (max-width: 768px) {
    .mobile-slide-in-up {
      animation: mobileSlideInUp 0.6s ease-out forwards;
      opacity: 0;
    }
  
    .mobile-fade-in {
      animation: mobileFadeIn 0.6s ease-out forwards;
      opacity: 0;
    }
  
    .mobile-bounce {
      animation: mobileBounce 0.4s ease-in-out;
    }
  }
  
  /* Keyframes for mobile */
  @keyframes mobileSlideInUp {
    from {
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes mobileFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes mobileBounce {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.03);
    }
    100% {
      transform: scale(1);
    }
  }