/* ============================================================================
   Floom — the way down, and back up (floom-way.js adds and drives it)
   ----------------------------------------------------------------------------
   One control in the window's corner, on the landing page and every product
   page. Pointing down it goes all the way to the footer; once the footer is in
   the window, the same control turns over and goes back to the top.

   The arrow is the site's own — a ruled thread ending in a cell, the one every
   button carries — stood on its end: on hover the thread reaches further and
   the cell fills, as a button's does. Ink, the colour of the surfaces' own
   primary buttons, with a little glass so it still reads over a dark panel.
   ========================================================================== */
.fl-way{
  --fl-way-edge: round(clamp(16px, 2.2vw, 32px), 4px);
  position: fixed;
  right: var(--fl-way-edge); bottom: var(--fl-way-edge);
  z-index: 80;                  /* over the page and its footer; under the menu (89–95) and the nav (100) */
  width: 48px; height: 48px;
  margin: 0; padding: 0;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, #FFFFFF 14%, transparent);
  border-radius: 5px;           /* the radius the site's buttons and nav controls carry */
  color: #FFFFFF;
  background: color-mix(in srgb, var(--black) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--black) 18%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* arrives a beat after the hero's words */
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .5s var(--fl-ease-out), transform .5s var(--fl-ease-out);
}
.fl-way.is-ready{ opacity: 1; transform: none; }
.fl-way:active{ transform: scale(.94); transition-duration: .12s; }
.fl-way:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* the arrow: a 14px thread into a 7px cell; turning over has a little give */
.fl-way-a{
  position: relative;
  width: 8px; height: 21px;
  transition: transform .6s cubic-bezier(.34, 1.36, .5, 1);
}
.fl-way.is-up .fl-way-a{ transform: rotate(180deg); }
.fl-way-a > i{ position: absolute; left: 50%; display: block; }
.fl-way-ln{
  top: 0; width: 1.75px; height: 20px; margin-left: -0.875px;
  background: currentColor;
  transform-origin: 50% 0; transform: scaleY(.7);
  transition: transform .24s var(--th-ease, cubic-bezier(.2, .7, .2, 1));
}
.fl-way-cl{
  top: 16px; width: 7px; height: 7px; margin-left: -4px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: transform .24s var(--th-ease, cubic-bezier(.2, .7, .2, 1)), background-color .24s var(--th-ease, cubic-bezier(.2, .7, .2, 1));
}
.fl-way:focus-visible .fl-way-ln{ transform: none; }
.fl-way:focus-visible .fl-way-cl{ transform: translateY(6px); background: currentColor; }
@media (hover: hover){
  .fl-way:hover .fl-way-ln{ transform: none; }
  .fl-way:hover .fl-way-cl{ transform: translateY(6px); background: currentColor; }
}
/* Over the hero it says which way, three times and then rests: the thread
   reaches down into its cell, the way a button's does on hover. */
.fl-way.is-ready:not(.is-up):not(:hover):not(:focus-visible) .fl-way-ln{ animation: fl-way-ln 2.2s var(--th-ease, ease) 1s 3 both; }
.fl-way.is-ready:not(.is-up):not(:hover):not(:focus-visible) .fl-way-cl{ animation: fl-way-cl 2.2s var(--th-ease, ease) 1s 3 both; }
@keyframes fl-way-ln{ 0%, 70%, 100%{ transform: scaleY(.7); } 30%, 45%{ transform: none; } }
@keyframes fl-way-cl{
  0%, 70%, 100%{ transform: none; background-color: transparent; }
  30%, 45%{ transform: translateY(6px); background-color: currentColor; }
}
@media (prefers-reduced-motion: reduce){
  .fl-way, .fl-way-a, .fl-way-ln, .fl-way-cl{ transition: none; animation: none !important; }
  .fl-way{ transform: none; }
}
@media print{ .fl-way{ display: none; } }
/* Not on a phone. There it was a dark square fixed over the content from the
   top of the page to the foot — over headings, questions, form fields and
   footer links — and a phone already has its own way to the top. */
@media (max-width: 760px){ .fl-way{ display: none; } }