/* 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.
     "slant"        Imperiale Bolgheri .o-button--outline: no roll; the sheet rises from below with a SLANTED top
                    edge (clip-path polygon(0 S, 100% S*.4, 100% 100%, 0 100%), S = --fwb-slant 40%, sheet 1.5*S taller
                    than the button), .5s cubic-bezier(.23,1,.32,1); the ink turns --fwb-ink-hover.
     "slant-solid"  Imperiale .o-button: the face starts FULL (sheet in place, slanted bottom edge polygon(0 0, 100% 0,
                    100% 80%, 0 100%)) and on hover the sheet leaves upward translateY(-100%), same clock; set
                    --fwb-ink to the ink-on-fill and --fwb-ink-hover to the fill colour.
   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 */
  --_sheet-in: none;                           /* sheet on hover */
  --_clip: none;                               /* sheet outline (slant modes) */
  --_inset: 0;                                 /* sheet box (slant modes grow it past the edge) */
  --_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: var(--_inset); z-index: -1;
  background: var(--fwb-fill); clip-path: var(--_clip);
  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);
}

.fwb[data-fwb="slant"], .fwb[data-fwb="slant-solid"] {
  --fwb-slant: 40%;
  --_a-out: none; --_b-in: none;                 /* the source keeps its label still: colour change only */
}
.fwb[data-fwb="slant"] {
  --_clip: polygon(0 var(--fwb-slant), 100% calc(var(--fwb-slant) * .4), 100% 100%, 0 100%);
  --_inset: calc(var(--fwb-slant) * -1.5) 0 0 0;
  --_sheet-out: translateY(100%);
}
.fwb[data-fwb="slant-solid"] {
  --fwb-slant: 80%;
  --_clip: polygon(0 0, 100% 0, 100% var(--fwb-slant), 0 100%);
  --_inset: 0 0 calc(var(--fwb-slant) * -.5) 0;
  --_sheet-out: none;
  --_sheet-in: translateY(-100%);
}

/* ---- 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: var(--_sheet-in); 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: var(--_sheet-in); 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; }
}