/* ============================================================
   tool-motion.css  —  micro-interactions for the quiz + calculators
   Layers on top of each tool's own button styles. Load AFTER the
   page styles and site-motion.css. Reduced-motion aware.
   ============================================================ */

/* ---------- Option / choice buttons: hover lift + press ---------- */
.option-btn, .quiz-option, .unit-btn, .diet-btn {
  transition: border-color .18s ease, background .18s ease, color .18s ease,
              transform .18s cubic-bezier(.22, .61, .36, 1), box-shadow .18s ease;
}
.option-btn:hover, .quiz-option:hover, .diet-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}
.option-btn:active, .quiz-option:active, .unit-btn:active, .diet-btn:active {
  transform: translateY(0) scale(.985);
}

/* Selected state gets a soft confirm pop the moment it becomes active. */
.quiz-option.selected, .option-btn.active {
  animation: tm-pop .28s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes tm-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ---------- Primary action buttons: press + shine sweep ---------- */
.calculate-btn, .btn-start, .cta-box a, .results-cta-block a {
  position: relative;
  overflow: hidden;
}
.calculate-btn::after, .btn-start::after, .cta-box a::after, .results-cta-block a::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.calculate-btn:hover::after, .btn-start:hover::after,
.cta-box a:hover::after, .results-cta-block a:hover::after {
  animation: tm-shine .85s cubic-bezier(.22, .61, .36, 1);
}
@keyframes tm-shine { to { left: 135%; } }
.calculate-btn:active, .btn-start:active { transform: scale(.99); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .option-btn, .quiz-option, .unit-btn, .diet-btn { transition: none; }
  .option-btn:hover, .quiz-option:hover, .diet-btn:hover,
  .option-btn:active, .quiz-option:active, .unit-btn:active, .diet-btn:active,
  .calculate-btn:active, .btn-start:active { transform: none; box-shadow: none; }
  .quiz-option.selected, .option-btn.active { animation: none; }
  .calculate-btn:hover::after, .btn-start:hover::after,
  .cta-box a:hover::after, .results-cta-block a:hover::after { animation: none; }
}