/* FHA page-specific polish aligned with ui.css */

:root {
  --card-border: rgba(120, 53, 255, 0.2);
}

.calculator-card {
  border: 1px solid var(--card-border);
  transition: all 0.3s ease;
  animation: float 6s ease-in-out infinite;
  box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.25);
}

.calculator-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.4);
}

.dark .calculator-card {
  box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25);
}

.fancy-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.75);
  color: inherit;
  transition: all 0.3s ease;
}

.fancy-input:focus {
  outline: none;
  border-color: #93c5fd;
  transform: scale(1.02);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.dark .fancy-input {
  background: rgba(17, 24, 39, 0.5);
  border-color: rgba(75, 85, 99, 0.6);
}

.anim-pop-in {
  animation: pop-in 420ms ease-out;
}

@keyframes pop-in {
  from { transform: translateY(6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

/* Button animation */
.pulse-on-hover:hover {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}