/* ==========================================================================================================
   The Wii-style pointer (NOTES 216). On the menus (title, lobby, set-up screens, result and error cards, the settings card) the
   mouse is a console menu's white pointing glove: fingertip as the hot spot, a soft shadow under it. cursor.js builds #cur, follows
   the mouse and sets the states; this file is every look and motion.
   Materials: the pill buttons' white with the signature outline blue as its line, a blue cuff. The hot spot NEVER moves: the hand
   tilts around the fingertip (a rolled remote), lifts a hair over a button, pushes in on a press.
   On the court (body[data-screen="hud"] with nothing over it) the native cursor is back.
   Pointer:fine and hover:hover only; cursor.js never starts on a touch device.
   ========================================================================================================== */

/* the native cursor goes where the hand shows. Text fields, the court list's scrollbar grab and a busy name keep theirs:
   cursor.js hides the hand over them (is-off) and they say what they are better than a glove could */
html.has-cur, html.has-cur :where(*):not(input, textarea, select, [contenteditable], .room-bar, .room-bar *, .ad-unit, .ad-unit *, .is-opening[aria-busy="true"]){cursor:none!important}

#cur{position:fixed;left:0;top:0;z-index:100;width:3.5rem;height:3.5rem;pointer-events:none;transform-origin:0 0;will-change:transform;
  opacity:0;transition:opacity 120ms linear}      /* the box: its origin is the hot spot (the fingertip); cursor.js writes translate3d(x,y) rotate(tilt) */
#cur.is-on{opacity:1}
#cur.is-off{opacity:0;transition-duration:80ms}      /* over a text field or the scrollbar: gone fast, the native cursor is already there */
/* the drawing is a 64-unit square with the fingertip at (14,4): shifted so that point sits on the box's origin */
.cur-box{position:absolute;left:-21.875%;top:-6.25%;width:100%;height:100%}
.cur-box svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:21.875% 6.25%;transition:opacity 90ms linear, scale 200ms var(--ease-bounce), translate 200ms var(--ease-bounce)}
.cur-body{filter:drop-shadow(0 .8px 0 rgba(90,150,185,.35)) drop-shadow(1.5px 2.5px 2px rgba(20,60,90,.28))}      /* the soft shadow a console pointer casts on the menu */
.cur-glove{fill:url(#cur-skin-g);stroke:var(--line);stroke-width:2.4;stroke-linejoin:round}
.cur-crease{fill:none;stroke:var(--line-soft);stroke-width:1.6;stroke-linecap:round}
.cur-cuff{fill:url(#cur-cuff-g);stroke:#fff;stroke-width:1.4}

/* the halo: the pill buttons' glow as a soft blue disc under the fingertip, and the ripple a press sends out of it */
.cur-fx{transform-origin:21.875% 6.25%}
.cur-halo{fill:url(#cur-halo-g);transform-origin:14px 4px;opacity:0;transform:scale(.6);transition:opacity 160ms linear, transform 240ms var(--ease-bounce)}
.cur-pop{fill:none;stroke:var(--line);stroke-width:2.2;transform-origin:14px 4px;opacity:0}

/* ---------- states (classes cursor.js sets on #cur) ---------- */
/* over something to press: the hand lifts (scale about the fingertip, so the tip stays put), waves hello once, its shadow
   stretches and the halo breathes under the fingertip, in time with the button's own pulse (ui.css glow-pulse, --d-pulse) */
#cur.is-ready .cur-hand{scale:1.16;translate:0 -2px;animation:cur-wave 480ms var(--ease-bounce) 1}
#cur.is-ready .cur-body{filter:drop-shadow(0 .8px 0 rgba(90,150,185,.35)) drop-shadow(3px 5px 3.5px rgba(20,60,90,.26))}
#cur.is-ready .cur-halo{opacity:1;transform:scale(1);animation:cur-breathe var(--d-pulse) var(--ease-soft) infinite}
@keyframes cur-wave{0%{rotate:0deg}30%{rotate:-11deg}65%{rotate:7deg}100%{rotate:0deg}}
@keyframes cur-breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
/* the press: the finger jabs in hard (in at 90 ms like the buttons, back with the 200 ms spring), the halo flares and a ring
   ripples out of the fingertip (is-hit replays it on every press) */
#cur.is-down .cur-hand{scale:.8;translate:0 3px;transition-duration:90ms;transition-timing-function:var(--ease-soft);animation:none}
#cur.is-down .cur-halo{transform:scale(1.4);opacity:1;animation:none}
#cur.is-down.is-plain .cur-hand{scale:.9;translate:0 2px}      /* a press on nothing in particular: a lighter jab */
#cur.is-hit .cur-pop{animation:cur-pop 380ms var(--ease-out) both}
#cur.is-hit.is-plain .cur-pop{animation-duration:240ms;stroke-width:1.4}
@keyframes cur-pop{0%{transform:scale(.4);opacity:1;stroke-width:3}55%{opacity:.75}100%{transform:scale(2.6);opacity:0;stroke-width:.4}}

@media (prefers-reduced-motion: reduce){
  .cur-box svg,.cur-halo{transition-duration:1ms}      /* the poses still change; they snap */
  #cur.is-ready .cur-hand,#cur.is-ready .cur-halo{animation:none} #cur.is-hit .cur-pop{animation:none}      /* no wave, no breathing, no ripple */
}