/* ---------------------------------------------------------------------------
   fearn.fun motion kit, version 2. Shared by the games, served from /motion/.
   Every rule that moves anything sits inside prefers-reduced-motion:
   no-preference, so a player who asks for less motion gets the page at rest.
   A page must still work if this file never loads.
   --------------------------------------------------------------------------- */
:root{
  --m-fast:140ms;
  --m-med:280ms;
  --m-ease:cubic-bezier(.2,.8,.2,1);
  --m-spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion:no-preference){
  /* presses */
  .go,.choice,.amount button{transition:transform var(--m-fast) var(--m-ease),filter var(--m-fast) ease,border-color .15s ease,background-color .15s ease;}
  .go:active:not(:disabled),.amount button:active{transform:scale(.96);}
  .m-press{transition:transform var(--m-fast) var(--m-ease),filter var(--m-fast) ease,border-color .15s ease,background-color .15s ease,opacity .3s ease;}
  .m-press:active:not(:disabled){transform:scale(.96);}
  .choice:active{transform:scale(.985);}

  /* entrances. --i staggers a list, --d delays one element */
  .m-rise{animation:m-rise var(--m-med) var(--m-ease) backwards;animation-delay:calc(var(--i,0) * 60ms + var(--d,0ms));}
  .m-left{animation:m-left 320ms var(--m-ease) backwards;animation-delay:var(--d,0ms);}
  .m-right{animation:m-right 260ms var(--m-ease) backwards;animation-delay:var(--d,0ms);}
  .m-pop{animation:m-pop 380ms var(--m-spring) backwards;animation-delay:var(--d,0ms);transform-box:fill-box;transform-origin:center;}
  .m-fade{animation:m-fade 300ms ease backwards;animation-delay:var(--d,0ms);}
  .m-write{animation:m-write 340ms var(--m-ease) backwards;animation-delay:calc(var(--i,0) * 110ms + var(--d,0ms));}
  .m-grow{animation:m-grow 620ms var(--m-ease) backwards;animation-delay:calc(var(--i,0) * 90ms + var(--d,0ms));transform-box:fill-box;transform-origin:left center;}
  .m-grow.m-from-end{transform-origin:right center;}
  .m-drop{animation:m-drop 420ms var(--m-spring) backwards;animation-delay:var(--d,0ms);transform-box:fill-box;transform-origin:center bottom;}

  /* three dots while someone is about to speak: add .m-typing to a positioned row */
  .m-typing{position:relative;}
  .m-typing::after{content:"";position:absolute;left:var(--typing-x,32px);top:6px;width:44px;height:22px;border-radius:4px 11px 11px 11px;
    background:radial-gradient(circle at 12px 50%,var(--muted,#888) 2.4px,transparent 3px),
      radial-gradient(circle at 22px 50%,var(--muted,#888) 2.4px,transparent 3px),
      radial-gradient(circle at 32px 50%,var(--muted,#888) 2.4px,transparent 3px),var(--surface,#f4f4f4);opacity:0;animation:m-typing var(--typing,420ms) ease both;pointer-events:none;}

  /* screen changes, when the browser supports view transitions */
  ::view-transition-old(root){animation:m-out 150ms ease both;}
  ::view-transition-new(root){animation:m-in 280ms var(--m-ease) both;}
  /* swap(update, done, "next") marks the root, so a page can slide one part of the screen along */
  :root[data-m-swap="next"]::view-transition-old(root){animation:m-out 160ms ease both;}
  :root[data-m-swap="next"]::view-transition-new(root){animation:m-fade 220ms ease both;}

  @keyframes m-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  @keyframes m-left{from{opacity:0;transform:translateX(-14px) scale(.98);}to{opacity:1;transform:none;}}
  @keyframes m-right{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}
  @keyframes m-pop{0%{transform:scale(0);}100%{transform:scale(1);}}
  @keyframes m-fade{from{opacity:0;}to{opacity:1;}}
  @keyframes m-write{from{clip-path:inset(-20% 100% -20% 0);}to{clip-path:inset(-20% -10% -20% 0);}}
  @keyframes m-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  @keyframes m-drop{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;}}
  @keyframes m-typing{0%{opacity:0;}20%{opacity:.8;}75%{opacity:.8;}100%{opacity:0;}}
  @keyframes m-out{to{opacity:0;}}
  @keyframes m-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  @keyframes m-out-left{to{opacity:0;transform:translateX(-32px);}}
  @keyframes m-in-right{from{opacity:0;transform:translateX(32px);}}
}
/* Floating labels and bits are created only when motion is allowed, and removed when they land. */
.m-float{position:fixed;z-index:60;pointer-events:none;white-space:nowrap;font-family:var(--mono,ui-monospace,monospace);
  font-weight:700;font-size:15px;color:var(--accent,#ff4d17);text-shadow:0 1px 0 var(--ground,#fff);}
.m-bit{position:fixed;z-index:60;pointer-events:none;width:8px;height:8px;border-radius:2px;display:block;}