/* 
 * Custom animation styles for IFSC & MICR Bank Finder Pro
 * Templates and animations for header customization
 */

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

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse-light {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Animation classes */
.animate-hero-gradient {
  animation: gradient-animation 8s ease infinite;
  background-size: 200% 200%;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease forwards;
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-fade-in {
  animation: fade-in-up 0.5s ease forwards;
}

.animate-pulse-light {
  animation: pulse-light 2s ease-in-out infinite;
}

/* Template-specific styles */
.header-template-minimal {
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

.header-template-modern {
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.header-template-modern .info-card {
  background-color: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.header-template-modern .info-card:hover {
  transform: translateY(-5px);
}

.header-template-gradient {
  border-radius: 12px;
  background-size: 200% 200%;
  animation: gradient-animation 8s ease infinite;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Hide h1 option */
.hide-h1 h1,
.hide-h1 h2.header-title {
  display: none !important;
}

/* Font size classes */
.font-size-small {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.font-size-medium {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font-size-large {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

@media (min-width: 768px) {
  .font-size-small {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .font-size-medium {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  
  .font-size-large {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}