/* ball.css - free-throw ball, owned by ball.js
 *
 * Load AFTER styles.css. Every selector here is either `.court .ball`
 * (specificity 0,2,0, so it beats the two plain `.ball` rules in styles.css
 * whatever the load order) or a new class, so nothing else has to change.
 *
 * ball.js drives position with an inline `transform`. This file only sets the
 * rest state, the box the glyph is centred in, and two hoop reactions that use
 * the INDIVIDUAL `translate` / `scale` properties - those compose with
 * `transform` instead of overwriting it, so the hoop's own
 * `transform: translateX(-50%)` in styles.css survives untouched.
 */

.court .ball {
  /* A fixed square box, glyph centred in it. The emoji's own line box is
     taller than it is wide and sits on a baseline, so rotating the default
     inline box spins the ball about a point below its middle. A square grid
     cell puts the rotation origin on the ball. */
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  line-height: 1;
  font-size: 40px;

  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: 50% 50%;

  will-change: transform, opacity;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* The glyph is the only thing that should ever leave the box. */
  overflow: visible;
}

/* ball.js sets this while a shot is in the air, so nothing else can transition
   the transform out from under the per-frame writes. */
.court .ball.in-flight {
  transition: none !important;
  animation: none !important;
}

/* Fading the next ball back in after one has left the floor. */
.court .ball.respawn {
  transition: opacity .16s ease-out;
}

/* ---------------------------------------------------------- hoop reactions
 * `translate` and `scale` are individual transform properties: they stack on
 * top of `transform: translateX(-50%)` rather than replacing it. That is the
 * whole reason these are not written as `transform` keyframes.
 */

.hoop-art.clang {
  animation: hoop-clang .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes hoop-clang {
  0%   { translate: 0 0; }
  22%  { translate: 3px 1px; }
  52%  { translate: -2px 0; }
  78%  { translate: 1px 0; }
  100% { translate: 0 0; }
}

.hoop-art.netflick {
  animation: hoop-netflick .3s cubic-bezier(.25, .9, .4, 1);
}
@keyframes hoop-netflick {
  0%   { scale: 1 1; }
  30%  { scale: 1.015 1.045; }
  70%  { scale: .995 .985; }
  100% { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hoop-art.clang,
  .hoop-art.netflick { animation: none; }
  .court .ball.respawn { transition: none; }
}