/* animations.css - Additional animation styles for PharmaChain website */

/* Base transition for all elements */
* {
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Smooth hover transitions for interactive elements */
a,
button,
.card-border {
  transition: transform 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease, opacity 0.3s ease;
}

/* Hover effects for buttons */
button:hover,
a.btn-shadow:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(35, 87, 204, 0.3);
}

/* Hover effects for navigation links */
nav a:hover {
  transform: translateY(-2px);
}

/* Hover effects for cards */
.card-border:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Smooth transition for form inputs */
input.input-class {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input.input-class:focus {
  border-color: rgba(35, 87, 204, 0.5);
  box-shadow: 0 0 0 2px rgba(35, 87, 204, 0.2);
  outline: none;
}

/* Subtle pulse animation for CTA buttons */
@keyframes subtle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(35, 87, 204, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(35, 87, 204, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(35, 87, 204, 0);
  }
}

.btn-shadow {
  animation: subtle-pulse 2s infinite;
}

/* Floating animation for images */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

#home #trusted,
.shadowy-box img {
  animation: float 6s ease-in-out infinite;
}

/* Responsive animations - disable some animations on mobile for performance */
@media (max-width: 768px) {
  .btn-shadow {
    animation: none; /* Disable pulse on mobile */
  }

  #home img,
  .shadowy-box img {
    animation-duration: 8s; /* Slower animation on mobile */
  }
}

/* Smooth appearance for modal */
#exitModal {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#exitModal:not(.hidden) {
  opacity: 1;
}

#exitModal > div {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

#exitModal:not(.hidden) > div {
  transform: scale(1);
}

/* Gradient text animation */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-text {
  background-size: 200% auto;
  animation: gradient-shift 8s ease infinite;
}

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

/* Improve mobile touch feedback */
@media (max-width: 768px) {
  a:active,
  button:active {
    transform: scale(0.95);
  }
}