/* Corner-dot button: on hover the label rolls up to a copy of itself while the four corner squares trade
   diagonals: the pair sitting top-right + bottom-left slides out through those corners as the other pair slides
   in from top-left + bottom-right. CSS only.

   <a class="cdb" href="#"><span class="cdb-roll"><span>Book a call</span><span aria-hidden="true">Book a call</span></span></a>

   The squares are four background layers on the button itself (no extra markup); each moves by
   background-position from just outside its corner (-size) to `inset` from it. Knobs below; defaults are the
   source's measured values (design px at 1728 wide, where its 1rem = 10px). */
.cdb {
  --cdb-bg: #fa3600;
  --cdb-ink: #fff;
  --cdb-dot: var(--cdb-ink);          /* square colour (source: white on the brand fill) */
  --cdb-size: 6px;                    /* square side (.6rem) */
  --cdb-inset: 6px;                   /* gap from the button edge to a shown square (.6rem) */
  --cdb-dur: .5s;
  --cdb-ease: cubic-bezier(.23, 1, .32, 1);   /* quint-like out: ~80% of the move in the first 150ms */
  --cdb-pad: 15px 24px;
  --cdb-radius: 0;
  --cdb-font: 500 14px/1.1 "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cdb-track: 0;

  --_in: var(--cdb-inset);
  --_out: calc(-1 * var(--cdb-size));
  --_sq: linear-gradient(var(--cdb-dot), var(--cdb-dot));

  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  padding: var(--cdb-pad);
  border: 0; border-radius: var(--cdb-radius);
  overflow: hidden;
  color: var(--cdb-ink);
  font: var(--cdb-font); letter-spacing: var(--cdb-track); text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  background-color: var(--cdb-bg);
  /* layers: top-left, top-right, bottom-left, bottom-right */
  background-image: var(--_sq), var(--_sq), var(--_sq), var(--_sq);
  background-size: var(--cdb-size) var(--cdb-size);
  background-repeat: no-repeat;
  background-position:
    left var(--_out) top var(--_out),          /* TL waiting outside */
    right var(--_in) top var(--_in),           /* TR shown */
    left var(--_in) bottom var(--_in),         /* BL shown */
    right var(--_out) bottom var(--_out);      /* BR waiting outside */
  transition: background-position var(--cdb-dur) var(--cdb-ease);
}
.cdb-roll { display: grid; overflow: hidden; }
.cdb-roll > * { grid-area: 1 / 1; transition: transform var(--cdb-dur) var(--cdb-ease); }
.cdb-roll > :last-child { transform: translateY(100%); }

/* hover: the shown pair leaves through its own corners, the waiting pair arrives; both labels move up one line */
.cdb.is-hover, .cdb:focus-visible {
  background-position:
    left var(--_in) top var(--_in),
    right var(--_out) top var(--_out),
    left var(--_out) bottom var(--_out),
    right var(--_in) bottom var(--_in);
}
.cdb.is-hover .cdb-roll > :first-child, .cdb:focus-visible .cdb-roll > :first-child { transform: translateY(-100%); }
.cdb.is-hover .cdb-roll > :last-child, .cdb:focus-visible .cdb-roll > :last-child { transform: translateY(0); }
@media (hover: hover) {
  .cdb:hover {
    background-position:
      left var(--_in) top var(--_in),
      right var(--_out) top var(--_out),
      left var(--_out) bottom var(--_out),
      right var(--_in) bottom var(--_in);
  }
  .cdb:hover .cdb-roll > :first-child { transform: translateY(-100%); }
  .cdb:hover .cdb-roll > :last-child { transform: translateY(0); }
}
.cdb:focus-visible { outline: 2px solid var(--cdb-bg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cdb, .cdb-roll > * { transition-duration: .01s; } }