/* Global tweaks on top of Tailwind utilities */

html,
body {
  height: 100%;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

#learn-card, #math-card {
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-out;
}

#learn-card:hover, #math-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 0 10px rgba(66, 133, 244, 0.4);
  transform: translateY(-5px);
}

#learn-card::before, #math-card::before {
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Initially transparent background */
    background: transparent; 
    /* Smooth transition for the opacity change on hover */
    transition: background 0.3s ease-out; 
    z-index: 1; /* Place below content but above card background */
    pointer-events: none; /* Allow clicks to pass through to content below */
}

#learn-card #content-learn {
  position: relative;
  z-index: 2; 
  /* Optional: Ensure content pointers (like the blue/green lines) are styled */
}

#math-card #content-math {
  position: relative;
  z-index: 2; 
  /* Optional: Ensure content pointers (like the blue/green lines) are styled */
}

/* Button Border Beam Animation - Pulsing Glow Approach */

.btn-beam {
  position: relative;
  border: none; 
  /* Initial transition for smooth entry */
  transition: box-shadow 0.3s ease-in-out, transform 0.2s ease-out;
}

/* Start Learning (Blue) Button Animation */
a[href*="learning-coach"].btn-beam:hover {
  animation: pulse-blue 1.5s infinite alternate;
}

@keyframes pulse-blue {
  0% {
    /* Thin blue beam */
    box-shadow: 0 0 4px 1px rgba(59, 130, 246, 0.8); /* blue-500 */
  }
  50% {
    /* Thicker, softer cyan/light blue glow */
    box-shadow: 0 0 15px 3px rgba(96, 165, 250, 0.8); /* blue-400 */
  }
  100% {
    /* Bright blue beam */
    box-shadow: 0 0 6px 1px rgba(37, 99, 235, 1); /* blue-600 */
  }
}

/* Practice Now (Emerald) Button Animation */
a[href*="quiz-agent"].btn-beam:hover {
  animation: pulse-emerald 1.5s infinite alternate;
}

@keyframes pulse-emerald {
  0% {
    /* Thin emerald beam */
    box-shadow: 0 0 4px 1px rgba(16, 185, 129, 0.8); /* emerald-500 */
  }
  50% {
    /* Thicker, softer light green glow */
    box-shadow: 0 0 15px 3px rgba(52, 211, 153, 0.8); /* emerald-400 */
  }
  100% {
    /* Bright emerald beam */
    box-shadow: 0 0 6px 1px rgba(5, 150, 105, 1); /* emerald-600 */
  }
}

/* Specific background overrides to ensure the cover matches the button */
/* We need to manually re-declare the gradients for the ::after element 
   because 'background: inherit' doesn't always grab the gradient from utility classes 
   applied to the parent if we set parent to transparent. */

/* Target the Start Learning button specifically (Blue) */
a[href*="learning-coach"].btn-beam::after {
  background: linear-gradient(to right, #3b82f6, #1d4ed8); /* blue-500 to blue-700 */
}
a[href*="learning-coach"].btn-beam:hover::after {
  background: linear-gradient(to right, #2563eb, #1e40af); /* blue-600 to blue-800 */
}

/* Target the Practice Now button specifically (Emerald) */
a[href*="quiz-agent"].btn-beam::after {
  background: linear-gradient(to right, #34d399, #059669); /* emerald-400 to emerald-600 */
}
a[href*="quiz-agent"].btn-beam:hover::after {
  background: linear-gradient(to right, #10b981, #047857); /* emerald-500 to emerald-700 */
}


.btn-beam:hover::before {
  opacity: 1;
}