/* D:\Sai Nilesh\Clinic_project\styles.css */
/* Base Resets & Global Behavior */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Custom Utilities */
.hero-gradient { background: linear-gradient(135deg, #042f2e 0%, #0d7a72 40%, #14b8a6 100%); }

/* --- Form Styles (Color-matched to Blue Theme) --- */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid #bfdbfe; /* Tailwind blue-200 */
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #1e3a8a; /* Tailwind blue-900 */
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus {
  border-color: #2563eb; /* Tailwind blue-600 */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-input::placeholder { color: #94a3b8; }

/* --- Navbar links hover state --- */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #3b82f6; /* Tailwind blue-500 */
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* --- Pulse Animation for CTA Buttons --- */
@keyframes pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
}
.pulse-btn { animation: pulse-blue 2.5s infinite; }

/* --- Card Hover Effects --- */
.card-hover { 
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; 
}
.card-hover:hover { 
  transform: translateY(-8px); 
  box-shadow: 0 20px 25px -5px rgba(29, 78, 216, 0.1), 0 8px 10px -6px rgba(29, 78, 216, 0.1);
  border-color: #bfdbfe; 
}

/* --- Scroll Reveal Animation --- */
/* (Updated to .active to match the JavaScript logic) */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   NEW: HERO SECTION ANIMATIONS & EFFECTS
   ========================================= */

/* --- Interactive Mouse Tracking Gradient --- */
.interactive-hero-bg {
  /* Default dark blue fallback */
  background-color: #020617; 
  /* The radial gradient centers on the --x and --y variables controlled by JS */
  background-image: radial-gradient(
    circle 800px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    #1d4ed8 0%,     /* Bright blue center */
    #1e3a8a 30%,    /* Mid blue */
    #0f172a 70%,    /* Dark navy */
    #020617 100%    /* Almost black edge */
  );
  transition: background-image 0.4s ease-out;
}

/* --- Floating Orbs Animation --- */
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* --- Subtitle Fade-in --- */
@keyframes fadeInText {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-in-text {
  animation: fadeInText 1.5s ease-out forwards;
}