/* ==========================================================================
   Mustek flow button: the hover animation shared by every button on the site
   (adapted from the Flow Button React component to plain CSS).
   On hover or keyboard focus:
     - a circle grows from the centre and floods the button
     - the right-hand arrow slides out, a left-hand arrow slides in
     - the label slides right to make room
     - pressing shrinks the button slightly
   flow-button.js adds the arrows, circle and label wrapper to each button and
   picks the flood colour, so a page only needs to load these two files.
   Corners stay at the site-wide 15px. Coloured and white buttons flood ink,
   outlined buttons on a dark ground flood white.
   ========================================================================== */
.fb{
  --fb-ease-in:cubic-bezier(.23,1,.32,1);
  --fb-ease-arrow:cubic-bezier(.34,1.56,.64,1);
  --fb-ease-fill:cubic-bezier(.19,1,.22,1);
  --fb-fill:#0d1330;       /* flood colour, set per button by flow-button.js */
  --fb-on:#fff;            /* label and arrow colour once flooded */
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0!important;
  padding-left:32px!important;
  padding-right:32px!important;
  cursor:pointer;
  transition:color .6s var(--fb-ease-in),border-color .6s var(--fb-ease-in),transform .6s var(--fb-ease-in),box-shadow .6s var(--fb-ease-in),background-color .2s ease!important;
}
/* the page's own hover lift and colour swaps give way to the flood */
.fb.fb:hover,.fb.fb:focus-visible{transform:none}
.fb.fb:active{transform:scale(.95)}

.fb-t{position:relative;z-index:1;transform:translateX(-12px);transition:transform .8s ease-out;white-space:inherit}

.fb-c{position:absolute;z-index:0;top:50%;left:50%;width:16px;aspect-ratio:1;border-radius:50%;background:var(--fb-fill);opacity:0;transform:translate(-50%,-50%);pointer-events:none;
  transition:width .8s var(--fb-ease-fill),opacity .8s var(--fb-ease-fill)}

/* doubled up so page rules like `.pill svg` or `.btn:hover svg` can't resize or nudge the arrows */
.fb svg.fb-a{position:absolute;z-index:2;top:50%;width:16px;height:16px;margin:-8px 0 0;transform:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
  transition:left .8s var(--fb-ease-arrow),right .8s var(--fb-ease-arrow),stroke .8s var(--fb-ease-arrow)}
.fb svg.fb-a--in{left:-25%}
.fb svg.fb-a--out{right:16px}

/* once the circle has flooded the button, the button itself takes the flood colour so no edge of the old colour shows */
.fb:hover,.fb:focus-visible{color:var(--fb-on)!important;border-color:transparent!important;background-color:var(--fb-fill)!important;transition-delay:0s,0s,0s,0s,.45s!important}
.fb:hover .fb-c,.fb:focus-visible .fb-c{width:calc(100% + 48px);opacity:1}
.fb:hover .fb-t,.fb:focus-visible .fb-t{transform:translateX(12px)}
.fb:hover svg.fb-a--in,.fb:focus-visible svg.fb-a--in{left:16px;transform:none}
.fb:hover svg.fb-a--out,.fb:focus-visible svg.fb-a--out{right:-25%;transform:none}

/* small buttons (header pills, subscribe) keep the arrows clear of the label */
.fb--sm{padding-left:26px!important;padding-right:26px!important}
.fb--sm svg.fb-a{width:14px;height:14px;margin-top:-7px}
.fb--sm svg.fb-a--out{right:12px}
.fb--sm:hover svg.fb-a--in,.fb--sm:focus-visible svg.fb-a--in{left:12px}
.fb--sm.fb .fb-t{transform:translateX(-10px)}
.fb--sm.fb:hover .fb-t,.fb--sm.fb:focus-visible .fb-t{transform:translateX(10px)}

@media (prefers-reduced-motion:reduce){
  .fb,.fb-t,.fb-c,.fb-a{transition-duration:.01ms!important}
  .fb.fb:active{transform:none}
}