/* Fill-wipe button: on hover a solid sheet of the fill colour wipes in from one edge while the label (and arrow)
   roll to an identical copy, and the ink turns to the hover ink. CSS only.

   <a class="fwb" href="#">
     <span class="fwb-roll"><span>Contact us</span><span aria-hidden="true">Contact us</span></span>
     <span class="fwb-roll fwb-ic" aria-hidden="true"><svg ...arrow/><svg ...arrow/></span>   (optional)
   </a>

   Modes (data-fwb on the button):
     (none) / "up"  Heron .btn-bg-hover: the sheet rises from 102% below, label + arrow roll up one line,
                    .5s cubic-bezier(.23,1,.32,1) on both, ink colour .4s. Leaving runs it back down.
     "side"         Heron .btn-control-hover: the sheet slides in from 102% to the right, items roll sideways
                    (data-fwb-from="left" mirrors it). Same clock.
     "grow"         Rayleighs .button.animation: the sheet GROWS from the left edge (width 0 -> 100%, 300ms outQuad)
                    while label + arrow slide one width to the right (400ms outQuad) and the ink eases to white
                    (500ms ease); leaving shrinks it back (300ms) and returns the ink in 400ms outQuad.
   Add .fwb--block for Heron's tall block CTA (label top-left, arrow bottom-right).
   .is-hover holds the hover state (current page, autoplaying demos).

   Every mode only swaps the private --_ transforms and clocks below, so the hover rules are written once. */
.fwb {
  --fwb-bg: transparent;                 /* resting face */
  --fwb-ink: #ff4a1c;                    /* resting label/arrow (source: brand #fa3600 on the page ground) */
  --fwb-fill: #ff4a1c;                   /* the sheet that wipes in */
  --fwb-ink-hover: #fff;                 /* label/arrow once the sheet is in */
  --fwb-line: 1px solid currentColor;    /* outline (none for a plain face) */
  --fwb-dur: .5s;                        /* sheet + roll */
  --fwb-ease: cubic-bezier(.23, 1, .32, 1);
  --fwb-ink-dur: .4s;                    /* colour change */
  --fwb-ink-ease: ease;
  --fwb-over: 102%;                      /* how far out the sheet waits (2% past the edge, so no hairline shows) */
  --fwb-pad: 14px 18px;
  --fwb-gap: 10px;
  --fwb-radius: 0;
  --fwb-font: 500 14px/1.15 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fwb-ic: 18px;                        /* arrow size (2rem in the source) */

  /* private: what each mode changes */
  --_sheet-out: translateY(var(--fwb-over));   /* sheet at rest */
  --_origin: center;
  --_a-out: translateY(-100%);                 /* label copy 1 on hover */
  --_b-in: translateY(100%);                   /* label copy 2 at rest */
  --_sheet-dur: var(--fwb-dur);
  --_sheet-ease-in: var(--fwb-ease);  --_sheet-ease-out: var(--fwb-ease);
  --_roll-dur: var(--fwb-dur);        --_roll-ease: var(--fwb-ease);
  --_ink-in-dur: var(--fwb-ink-dur);  --_ink-in-ease: var(--fwb-ink-ease);
  --_ink-out-dur: var(--fwb-ink-dur); --_ink-out-ease: var(--fwb-ink-ease);

  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--fwb-gap);
  box-sizing: border-box; padding: var(--fwb-pad);
  border: var(--fwb-line); border-radius: var(--fwb-radius);
  overflow: hidden;
  background: var(--fwb-bg); color: var(--fwb-ink);
  font: var(--fwb-font); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--_ink-out-dur) var(--_ink-out-ease), border-color var(--_ink-out-dur) var(--_ink-out-ease);
}
button.fwb { appearance: none; margin: 0; }
.fwb::after {                              /* the sheet */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fwb-fill);
  transform: var(--_sheet-out); transform-origin: var(--_origin);
  transition: transform var(--_sheet-dur) var(--_sheet-ease-out);
}
.fwb-roll { display: grid; overflow: hidden; }
.fwb-roll > * { grid-area: 1 / 1; transition: transform var(--_roll-dur) var(--_roll-ease); }
.fwb-roll > :last-child { transform: var(--_b-in); }
.fwb-ic { width: var(--fwb-ic); flex: none; }
.fwb-ic > svg { display: block; width: 100%; height: auto; }

/* block CTA: label pinned top-left, arrow bottom-right (Heron header CTA: 20rem wide, padding 1.2 1 .4 1.2rem) */
.fwb--block { flex-direction: column; align-items: stretch; justify-content: space-between; min-height: var(--fwb-block-h, 96px); }
.fwb--block > .fwb-roll:first-child { align-self: flex-start; }
.fwb--block > .fwb-ic { align-self: flex-end; }

/* ---- modes ---- */
.fwb[data-fwb="side"] {
  --_d: 1;
  --_sheet-out: translateX(calc(var(--_d) * var(--fwb-over)));
  --_a-out: translateX(calc(var(--_d) * -100%));
  --_b-in: translateX(calc(var(--_d) * 100%));
}
.fwb[data-fwb="side"][data-fwb-from="left"] { --_d: -1; }
.fwb[data-fwb="grow"] {
  --fwb-grow-dur: 300ms; --fwb-slide-dur: 400ms;
  --_sheet-out: scaleX(0); --_origin: left center;
  --_a-out: translateX(100%); --_b-in: translateX(-100%);
  --_sheet-dur: var(--fwb-grow-dur);
  --_sheet-ease-in: cubic-bezier(.25, .46, .45, .94);   /* outQuad */
  --_sheet-ease-out: ease;
  --_roll-dur: var(--fwb-slide-dur); --_roll-ease: cubic-bezier(.25, .46, .45, .94);
  --_ink-in-dur: 500ms;  --_ink-in-ease: ease;
  --_ink-out-dur: 400ms; --_ink-out-ease: cubic-bezier(.25, .46, .45, .94);
}

/* ---- hover state (:hover only on real pointers so a tap doesn't leave it stuck) ---- */
.fwb.is-hover, .fwb:focus-visible {
  color: var(--fwb-ink-hover);
  transition: color var(--_ink-in-dur) var(--_ink-in-ease), border-color var(--_ink-in-dur) var(--_ink-in-ease);
}
.fwb.is-hover::after, .fwb:focus-visible::after { transform: none; transition-timing-function: var(--_sheet-ease-in); }
.fwb.is-hover .fwb-roll > :first-child, .fwb:focus-visible .fwb-roll > :first-child { transform: var(--_a-out); }
.fwb.is-hover .fwb-roll > :last-child, .fwb:focus-visible .fwb-roll > :last-child { transform: none; }
@media (hover: hover) {
  .fwb:hover {
    color: var(--fwb-ink-hover);
    transition: color var(--_ink-in-dur) var(--_ink-in-ease), border-color var(--_ink-in-dur) var(--_ink-in-ease);
  }
  .fwb:hover::after { transform: none; transition-timing-function: var(--_sheet-ease-in); }
  .fwb:hover .fwb-roll > :first-child { transform: var(--_a-out); }
  .fwb:hover .fwb-roll > :last-child { transform: none; }
}

.fwb:focus-visible { outline: 2px solid var(--fwb-fill); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .fwb::after, .fwb-roll > * { transition-duration: .01s !important; }
}