/* Additional animations for SpruceSend Static Site */

/* Hero Title Animation */
.hero-title-animated {
  transition: opacity 0.5s ease-in-out;
}

/* Tech Icon Hover Animations */
@media (hover: hover) and (pointer: fine) {
  .hero:hover .tech-icon {
    opacity: 0.15;
  }
  
  .hero:hover .tech-icon.icon-float-1 {
    animation: iconFloat1 12s infinite ease-in-out alternate;
  }
  
  .hero:hover .tech-icon.icon-float-2 {
    animation: iconFloat2 15s infinite ease-in-out alternate;
  }
  
  .hero:hover .tech-icon.icon-float-3 {
    animation: iconFloat3 10s infinite ease-in-out alternate;
  }
  
  .hero:hover .tech-icon.icon-float-4 {
    animation: iconFloat4 13s infinite ease-in-out alternate;
  }
  
  .hero:hover .tech-icon.icon-float-5 {
    animation: iconFloat5 11s infinite ease-in-out alternate;
  }
}

/* Fallback for touch devices - subtle visibility */
@media (hover: none) {
  .tech-icon {
    opacity: 0.05;
  }
}

/* Individual float animations with different parameters */
@keyframes iconFloat1 {
  0% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-25px) translateX(15px) rotate(10deg) scale(1.05); }
  100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
}

@keyframes iconFloat2 {
  0% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-20px) translateX(-15px) rotate(-8deg) scale(1.08); }
  100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
}

@keyframes iconFloat3 {
  0% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-30px) translateX(10px) rotate(15deg) scale(1.1); }
  100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
}

@keyframes iconFloat4 {
  0% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-15px) translateX(-20px) rotate(-12deg) scale(1.03); }
  100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
}

@keyframes iconFloat5 {
  0% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-22px) translateX(18px) rotate(5deg) scale(1.07); }
  100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
}

/* Enhanced Card Hover Effects */
.card-3d {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              box-shadow 0.4s ease;
}

.card-3d:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 
              0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Button Hover Animation */
.btn-3d {
  transition: transform 0.3s ease, 
              box-shadow 0.3s ease, 
              background-color 0.3s ease,
              border-bottom-width 0.1s ease;
}

/* Mobile Menu Animation */
.mobile-menu {
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* FAQ Accordion Animation */
.faq-answer {
  transition: max-height 0.4s cubic-bezier(0.19, 1, 0.22, 1), 
              padding 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

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

/* Responsive Animation Adjustments */
@media (max-width: 768px) {
  .card-3d:hover {
    transform: translateY(-5px) scale(1.01);
  }
}