/* Flow Button, adapted to native anchors and buttons without replacing actions. */
.flow-button {
  --flow-fill: #181a1b;
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 100px; cursor: pointer;
  transition: border-radius .6s cubic-bezier(.23,1,.32,1), color .6s, background .6s, transform .25s;
}
.button-red.flow-button { --flow-fill: #982a1b; }
.button-ghost.flow-button { --flow-fill: #c93824; }
.has-cinematic-hero .flow-button::before, .flow-button::before {
  content: ''; position: absolute; z-index: -1;
  inset: -140% -10%; border-radius: 50%; background: var(--flow-fill);
  transform: scale(0); opacity: 0;
  transition: transform .8s cubic-bezier(.19,1,.22,1), opacity .4s;
}
.flow-button .flow-label {
  position: relative; z-index: 1; display: block; font-size: inherit; line-height: inherit;
  transform: translateX(-10px); transition: transform .8s ease-out;
}
.flow-button .flow-arrow {
  position: absolute; top: 50%; z-index: 2; line-height: 1;
  font-family: Arial,sans-serif; font-size: 24px; pointer-events: none;
  transform: translateY(-50%); transition: transform .8s cubic-bezier(.34,1.56,.64,1),opacity .5s;
}
.flow-button .flow-arrow-left { left: 17px; transform: translate(-55px,-50%); opacity: 0; }
.flow-button .flow-arrow-right { right: 17px; }
.has-cinematic-hero .flow-button, .flow-button { padding-inline: 36px; }
.has-cinematic-hero .hero-actions .flow-button { padding-inline: 36px; }
.has-cinematic-hero .flow-button:active, .flow-button:active { transform: scale(.95); }
@media (hover:hover) and (pointer:fine) {
  .has-cinematic-hero .flow-button:hover, .flow-button:hover {
    border-radius: 12px; color: #fff; transform: none;
  }
  .has-cinematic-hero .flow-button:hover::before, .flow-button:hover::before { transform: scale(1); opacity: 1; }
  .flow-button:hover .flow-label { transform: translateX(10px); }
  .flow-button:hover .flow-arrow-left { transform: translate(0,-50%); opacity: 1; }
  .flow-button:hover .flow-arrow-right { transform: translate(55px,-50%); opacity: 0; }
}
.flow-button:focus-visible { outline: 3px solid #e6472d; outline-offset: 5px; }
.flow-button:disabled { cursor: wait; opacity: .65; }
@media (prefers-reduced-motion:reduce) {
  .flow-button, .flow-button::before, .flow-button * { transition: none!important; }
}