:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --arrow-fill-ease: cubic-bezier(.785, .135, .15, .86);
  --arrow-fill-duration: 450ms;
}

/* Native adaptation of the ArrowFillButton supplied by the owner. */
.arrow-fill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 48px;
  min-height: 48px;
  padding: 0 57px 0 21px;
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--red);
  color: #fff;
  line-height: 1;
  --icon-circle: 36px;
  --icon-right: 6px;
  --circle-inset-y: 6px;
  --fill-clip: inset(var(--circle-inset-y) var(--icon-right) var(--circle-inset-y) calc(100% - var(--icon-right) - var(--icon-circle)) round 999px);
  transition: transform 160ms var(--ease-out);
}
.arrow-fill:hover { background: var(--red); }
.arrow-fill:active { transform: scale(.97); }
.afb-label { position: relative; z-index: 1; }
.afb-fill, .afb-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: var(--fill-clip);
  transition: clip-path var(--arrow-fill-duration) var(--arrow-fill-ease);
}
.afb-fill { z-index: 2; background: #fff; }
.afb-mask { z-index: 3; display: flex; align-items: center; padding: inherit; color: var(--red); }
.afb-icon {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: var(--icon-right);
  width: var(--icon-circle);
  height: var(--icon-circle);
  transform: translateY(-50%);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
  color: var(--red);
}
.afb-icon svg {
  position: absolute;
  width: 21px;
  height: 21px;
  top: 50%;
  left: 50%;
  transition: transform var(--arrow-fill-duration) var(--arrow-fill-ease), opacity var(--arrow-fill-duration) var(--arrow-fill-ease);
}
.afb-arrow-enter { transform: translate(-170%, -50%) scale(.65); opacity: 0; }
.afb-arrow-exit { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.arrow-fill:is(:focus-visible, [data-pressed="true"]) .afb-fill,
.arrow-fill:is(:focus-visible, [data-pressed="true"]) .afb-mask { clip-path: inset(0 round 999px); }
.arrow-fill:is(:focus-visible, [data-pressed="true"]) .afb-arrow-enter { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.arrow-fill:is(:focus-visible, [data-pressed="true"]) .afb-arrow-exit { transform: translate(70%, -50%) scale(.65); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .arrow-fill:hover .afb-fill, .arrow-fill:hover .afb-mask { clip-path: inset(0 round 999px); }
  .arrow-fill:hover .afb-arrow-enter { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .arrow-fill:hover .afb-arrow-exit { transform: translate(70%, -50%) scale(.65); opacity: 0; }
}
.dialog-back.arrow-fill { display: inline-flex; align-items: center; font-size: 13px; }

@keyframes enter-soft {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes enter-title {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes enter-line {
  from { opacity: 0; transform: scaleX(.25); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes enter-fade { from { opacity: 0; } to { opacity: 1; } }

#mesh { animation: enter-fade 1200ms ease backwards; }
.wordmark { animation: enter-soft 700ms var(--ease-out) backwards; }
.header nav { animation: enter-soft 700ms var(--ease-out) 80ms backwards; }
.header-cta, .menu-toggle { animation: enter-soft 700ms var(--ease-out) 160ms backwards; }
.title-first { animation: enter-title 1000ms var(--ease-out) 240ms backwards; }
.title-second { animation: enter-title 1000ms var(--ease-out) 420ms backwards; }
.intro-line { transform-origin: left; animation: enter-line 800ms var(--ease-out) 620ms backwards; }
.intro-content p { animation: enter-soft 800ms var(--ease-out) 700ms backwards; }
.intro .cta { animation: enter-soft 800ms var(--ease-out) 780ms backwards; }
.header:focus-within .wordmark, .header:focus-within nav,
.header:focus-within .header-cta, .header:focus-within .menu-toggle,
.hero:focus-within .intro .cta { animation: none; }

dialog {
  opacity: 0;
  transform: scale(.96);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), display 250ms allow-discrete, overlay 250ms allow-discrete;
}
dialog[open] { opacity: 1; transform: scale(1); }
dialog::backdrop { opacity: 0; transition: opacity 250ms ease, display 250ms allow-discrete, overlay 250ms allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style {
  dialog[open] { opacity: 0; transform: scale(.96); }
  dialog[open]::backdrop { opacity: 0; }
}
@media (max-width: 900px) {
  .header nav { animation: none; opacity: 0; transform: translateY(-8px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), display 180ms allow-discrete; }
  .header nav.open { opacity: 1; transform: translateY(0); }
  @starting-style { .header nav.open { opacity: 0; transform: translateY(-8px); } }
}
@media (prefers-reduced-motion: reduce) {
  #mesh, .wordmark, .header nav, .header-cta, .menu-toggle,
  .title-first, .title-second, .intro-line, .intro-content p, .intro .cta { animation: enter-fade 200ms ease backwards; }
  .header nav { animation: none; transform: none; }
  dialog, dialog[open] { transform: none; }
  @starting-style { dialog[open] { transform: none; } }
  .arrow-fill:active { transform: none; }
}