/* Import modern serif font for headers */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

/* Custom styles for enhanced visual effects */

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

/* Enhanced gradient text effects */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

/* Custom hover effects for cards */
.group:hover .group-hover\:text-blue-300 {
  color: rgb(147 197 253);
}

.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}

/* Enhanced backdrop blur for better visual depth */
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Custom shadow effects */
.hover\:shadow-blue-600\/25:hover {
  box-shadow: 0 25px 50px -12px rgba(37 99 235 / 0.25);
}

/* Smooth transitions for all interactive elements */
* {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Enhanced focus states for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgb(59 130 246);
  outline-offset: 2px;
}

/* Responsive table styling */
@media (max-width: 768px) {
  .overflow-x-auto table {
    font-size: 0.875rem;
  }

  .overflow-x-auto th,
  .overflow-x-auto td {
    padding: 0.75rem 0.5rem;
  }
}

/* Loading animation for dynamic content */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Override button border radius to 2px */
a[class*='bg-blue-600'],
a[class*='border-gray-600'],
a[class*='bg-gradient-to-r'],
button,
.btn {
  border-radius: 2px !important;
}

/* Make all icons in 'Why Choose Model Run?' section yellow */
.grid.md\:grid-cols-2.lg\:grid-cols-3 .group svg {
  color: rgb(251 191 36) !important; /* yellow-400 */
}

/* Override border radius to 2px for card divs with borders */
/* Target cards in both 'Why Choose' and 'What is' sections */
.rounded-xl,
.rounded-2xl {
  border-radius: 2px !important;
}

/* Change hover text color to match yellow icons in 'Why Choose' section */
.group:hover h3[class*='group-hover:text-blue-300'] {
  color: rgb(251, 191, 36) !important; /* yellow-400, same as icons */
}

/* Apply modern serif font to entire website */
body,
html,
* {
  font-family:
    'Source Serif 4', 'Charter', 'Bitstream Charter', 'Sitka Text', 'Cambria',
    'serif' !important;
  font-optical-sizing: auto !important;
}

/* Special weight settings for headers and bold text */
h1,
h2,
h3,
h4,
h5,
h6,
span[class*='font-bold'],
.font-bold {
  font-variation-settings: 'wght' 600 !important;
}

/* Modal animations and styling */
#coming-soon-modal {
  transition: opacity 0.3s ease-out;
}

#coming-soon-modal.hidden {
  display: none !important;
}

#coming-soon-modal > div {
  animation: slideInModal 0.3s ease-out;
  transform: translateY(0);
}

@keyframes slideInModal {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated Grid Background for Hero Section */
.animated-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 0; /* Behind hero content */
}

.grid-line {
  position: relative;
  width: 1px;
  height: 100%;
  background-color: rgba(
    147,
    197,
    253,
    0.07
  ); /* Reduced opacity by 30% (0.1 -> 0.07) */
  overflow: hidden;
}

.grid-line::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(147, 197, 253, 0.6),
    /* blue-300 */ rgba(196, 181, 253, 0.4),
    /* purple-300 */ transparent
  );
  animation: gridMove 8s linear infinite;
}

/* Stagger the animation delays for different lines */
.grid-line:nth-child(2)::before {
  animation-delay: -1s;
}
.grid-line:nth-child(3)::before {
  animation-delay: -2s;
}
.grid-line:nth-child(4)::before {
  animation-delay: -3s;
}
.grid-line:nth-child(5)::before {
  animation-delay: -4s;
}
.grid-line:nth-child(6)::before {
  animation-delay: -5s;
}
.grid-line:nth-child(7)::before {
  animation-delay: -6s;
}
.grid-line:nth-child(8)::before {
  animation-delay: -0.5s;
}
.grid-line:nth-child(9)::before {
  animation-delay: -1.5s;
}
.grid-line:nth-child(10)::before {
  animation-delay: -2.5s;
}
.grid-line:nth-child(11)::before {
  animation-delay: -3.5s;
}
.grid-line:nth-child(12)::before {
  animation-delay: -4.5s;
}

@keyframes gridMove {
  0% {
    top: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Ensure hero content stays above animated grid */
.relative.max-w-6xl {
  z-index: 10;
}

/* Make middle three lines (behind text) even lighter */
.grid-line:nth-child(5),
.grid-line:nth-child(6),
.grid-line:nth-child(7) {
  background-color: rgba(
    147,
    197,
    253,
    0.03
  ) !important; /* Extra light for readability */
}

/* Also make the moving gradient lighter on middle lines */
.grid-line:nth-child(5)::before,
.grid-line:nth-child(6)::before,
.grid-line:nth-child(7)::before {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(147, 197, 253, 0.2),
    /* Much lighter blue */ rgba(196, 181, 253, 0.15),
    /* Much lighter purple */ transparent
  ) !important;
}