/* The sign-in button's pressed and loading states (button.js), kept apart from site.css so the sign-in page owns them.
   Pressed, the label's letters dissolve one after another, the arrow slides out, and a fine field of dots across the
   button lights up in slow interfering waves until Google's page comes. */
.gate .open { position:relative; overflow:hidden; isolation:isolate;
  transition:background-color 240ms ease, transform 160ms cubic-bezier(.3,.7,.4,1); }
.gate .open:active { transform:scale(.975); }
/* site.css nudges every span in the button on hover; only the arrow should move */
.gate .open:hover .label, .gate .open:hover .ch { transform:none; }
.gate .open .ch { display:inline-block; white-space:pre;
  transition:opacity 260ms ease, filter 320ms ease, transform 340ms cubic-bezier(.5,0,.25,1); transition-delay:calc(var(--i) * 10ms); }
.gate .open .led { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 320ms ease; }
.gate .open.pending { cursor:progress; background:var(--ink); transform:none; }
.gate .open.pending .ch { opacity:0; filter:blur(3px); transform:translateY(-3px); }
.gate .open.pending .arrow { transform:translateX(14px); opacity:0; transition:transform 280ms cubic-bezier(.5,0,.3,1), opacity 200ms ease; }
.gate .open.pending .led { opacity:1; }