/* ===========================================================
   OnFinance, Tactile response

   This file used to be the expressive motion layer: shutters,
   word-by-word headline reveals, staggered grids, spring settles,
   parallax drifts. All of it scroll-driven, all of it removed.
   The reasoning is written up at the top of motion.css.

   What remains is the half that always worked, because it is the
   half the visitor triggers themselves. Press a button and the
   response has already happened by the time it is noticed. There
   is no window in which it can be caught looking half finished,
   which is the failure the rest of the layer kept falling into.

   Springs rather than eases. A linear() curve overshoots a little
   and settles the way a physical object does, and that is most of
   what separates a control that feels answered from one that just
   changes colour. Costs nothing extra to run.
=========================================================== */

:root{
  /* Fast and firm. A pointer response that takes 400ms feels
     broken no matter how nicely it is eased. */
  --spring-tap: linear(
    0, 0.062 2.9%, 0.24 6.2%, 0.807 15.2%, 1.02 19.6%, 1.083,
    1.121 25.5%, 1.128, 1.125 29.1%, 1.104 32.6%, 1.007 42.7%,
    0.988 46.6%, 0.983 51.2%, 1.001 68.4%, 1);

  /* Hard deceleration, no bounce, for colour and shadow. */
  --ease-cut: cubic-bezier(0.16, 1, 0.3, 1);

  --tactile-duration: 220ms;
  --tactile-ease: var(--spring-tap);
}

.btn, .btn-link, .lender-tile, .card, .selector__option, .tap-scale{
  transition:
    transform var(--tactile-duration) var(--spring-tap),
    box-shadow var(--tactile-duration) var(--ease-cut),
    border-color var(--tactile-duration) var(--ease-cut),
    background-color var(--tactile-duration) var(--ease-cut);
}

@media (hover: hover){
  .btn:hover{ transform: translateY(-2px) scale(1.015); }
  .card:hover{ transform: translateY(-4px); }
  .lender-tile:hover{ transform: translateY(-3px) scale(1.04); }
}

/* Press is instant and scales under, not over. That is what makes
   a button feel like a physical thing rather than a rectangle
   that changes colour. */
.btn:active, .btn-link:active, .tap-scale:active, .selector__option:active{
  transform: scale(0.965);
  transition-duration: 60ms;
}

@media (prefers-reduced-motion: reduce){
  .btn, .btn-link, .lender-tile, .card, .selector__option, .tap-scale{
    transition: none;
  }
  .btn:hover, .card:hover, .lender-tile:hover,
  .btn:active, .btn-link:active, .tap-scale:active, .selector__option:active{
    transform: none;
  }
}