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

/* Base Transitions for Hover Effects */
.transition-base, a, button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Fly-in Effect (Enhanced) */
.animate-on-scroll {
  opacity: 0;
  /* Start slightly lower and smaller for a "fly-in" feel */
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), 
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Hero Section Entrance */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px) ; }
  to { opacity: 1; transform: translateY(0); }
}

/* Apply to Hero content immediately */
main > section:first-child .animate-on-scroll {
  animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 1; /* Fallback */
  transition: none;
}

/* 3. Hover Zoom Effect (Cards & Tabs) - Global Interactive Style */
.hover-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease,
              border-color 0.3s ease,
              background-color 0.3s ease;
  will-change: transform, border-color, background-color, box-shadow;
}

.hover-card:hover {
  /* Lift up and Scale up (Zoom) */
  transform: translateY(-8px) scale(1.02);
  /* Global Blue Glow Effect (Extracted from Project Based Card) */
  border-color: #3b82f6; /* blue-500 */
  background-color: rgba(30, 58, 138, 0.3); /* blue-900/30 */
  box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.15), 
              0 10px 10px -5px rgba(59, 130, 246, 0.1); /* blue-shadow */
  z-index: 10; /* Ensure it sits on top */
  transition-delay: 0s; /* Fix: Remove delay on hover for instant feedback */
}

/* 4. Button Active State */
.btn-primary:active {
  transform: scale(0.95);
}

/* 5. Icon Pulse */
.group:hover .icon-pulse {
  animation: pulse-light 1.5s ease-in-out infinite;
}

@keyframes pulse-light {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* 6. Mobile Menu Animation */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-down {
  animation: slideDown 0.3s ease-out forwards;
}

/* Utility for delay */
.delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
.delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
.delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
.delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
.delay-500 { transition-delay: 500ms; animation-delay: 500ms; }