/* style.css — non-critical enhancements loaded after first paint.
   Critical styles are inlined in index.html.
   This file adds: micro-animations, accessibility helpers, subtle polish.
*/

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Pulse on the Calculate CTA to draw the eye */
@keyframes pulse-brand {
  0%, 100% { box-shadow: 0 6px 16px rgba(22, 163, 74, .30); }
  50%      { box-shadow: 0 8px 22px rgba(22, 163, 74, .45); }
}
.btn-primary:focus-visible {
  outline: 3px solid #86EFAC;
  outline-offset: 2px;
  animation: pulse-brand 1.6s ease-in-out infinite;
}
.btn-ghost:focus-visible {
  outline: 3px solid #93C5FD;
  outline-offset: 2px;
}
.tab:focus-visible {
  outline: 3px solid #86EFAC;
  outline-offset: 2px;
}

/* Number transition */
.big .num { transition: color .15s ease, transform .15s ease; }
.big .num.bump { transform: translateY(-1px) scale(1.02); }

/* Hide number input spinners */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Selection */
::selection { background: #BBF7D0; color: #064E3B; }

/* Larger touch targets on mobile */
@media (max-width: 480px) {
  .btn { padding: 16px 14px; }
  .tab { padding: 12px 10px; }
  .field input { padding: 16px 44px 16px 14px; }
}