/* Shared arrow-shift treatment for the labeled CTAs on v2a. */
.button-05,
.button-05 * {
  box-sizing: border-box;
}

.button-05 {
  --motion-curve: cubic-bezier(.2, 1, .25, 1);
  --motion-time: 620ms;
  --arrow-lag: 80ms;
  --edge-space: 20px;
  --arrow-width: 16px;
  --arrow-gap: 12px;
  --arrow-bleed: 4px;
  --copy-travel: calc(var(--arrow-width) + var(--arrow-gap));
  --arrow-surface: rgba(18, 18, 18, .96);
  --arrow-surface-hover: rgba(18, 18, 18, .87);

  position: relative;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  corner-shape: superellipse(1.2);
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.v2a .button.button-05 {
  gap: 0;
  padding: 0;
  background: transparent;
  color: #fff;
}

.button-05 .glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  background-color: var(--arrow-surface);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color var(--motion-time) var(--motion-curve),
    transform var(--motion-time) var(--motion-curve);
}

.button-05 .content {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  border-radius: inherit;
  padding: 12px calc(var(--edge-space) + var(--arrow-width) + var(--arrow-gap)) 12px var(--edge-space);
  transition: transform 210ms var(--motion-curve);
}

.button-05 .content::before,
.button-05 .content::after {
  content: "→";
  position: absolute;
  top: 50%;
  z-index: 1;
  width: var(--arrow-width);
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
  transform: translate3d(0, -50%, 0);
  transition: transform var(--motion-time) var(--motion-curve);
}

.button-05 .content::before {
  left: var(--edge-space);
  transform: translate3d(calc(-100% - var(--edge-space) - var(--arrow-bleed)), -50%, 0);
  transition-delay: 0s;
}

.button-05 .content::after {
  right: var(--edge-space);
  transition-delay: var(--arrow-lag);
}

.button-05 .copy {
  position: relative;
  z-index: 1;
  line-height: 1.2;
  transition: transform var(--motion-time) var(--motion-curve);
}

.button-05:is(:hover, :focus-visible) .glass {
  background-color: var(--arrow-surface-hover);
  transform: scaleY(.955);
}

.button-05:is(:hover, :focus-visible) .content::before {
  transform: translate3d(0, -50%, 0);
  transition-delay: var(--arrow-lag);
}

.button-05:is(:hover, :focus-visible) .content::after {
  transform: translate3d(calc(100% + var(--edge-space)), -50%, 0);
  transition-delay: 0s;
}

.button-05:is(:hover, :focus-visible) .copy {
  transform: translate3d(var(--copy-travel), 0, 0);
}

.button-05:active .glass {
  transform: scaleY(.93);
  transition: transform 210ms var(--motion-curve);
}

.button-05:active .content {
  transform: translate3d(2px, 0, 0);
}

.navigation-01-header .cta.button-05 {
  --edge-space: 17px;
  --arrow-width: 15px;
  --arrow-gap: 10px;
  --arrow-surface: rgba(226, 255, 58, .96);
  --arrow-surface-hover: rgba(240, 255, 154, .96);
  min-height: 0;
  gap: 0;
  padding: 0;
  background: transparent;
  color: #121212;
  transition: none;
}

.navigation-01-header .cta.button-05:hover,
.navigation-01-header .cta.button-05:active {
  opacity: 1;
  background: transparent;
  transform: none;
}

.navigation-01-header .cta.button-05 .content {
  min-height: 44px;
  padding-block: 9px;
}

.navigation-01-header:not(.is-scrolled):not(.is-mobile-nav-open) .cta.button-05 {
  --arrow-surface: #121212;
  --arrow-surface-hover: #303030;
  color: #fff;
}

.v2a .button.v2a-hero-cta.button-05 {
  --arrow-surface: rgba(226, 255, 58, .96);
  --arrow-surface-hover: rgba(240, 255, 154, .96);
  color: #121212;
}

.v2a .button.v2a-photo-cta.button-05 {
  --arrow-surface: rgba(226, 255, 58, .96);
  --arrow-surface-hover: rgba(240, 255, 154, .96);
  color: #121212;
}

@media (max-width: 600px) {
  .navigation-01-header .cta.button-05 {
    --edge-space: 12px;
    --arrow-width: 14px;
    --arrow-gap: 8px;
    font-size: 12px;
  }

  .navigation-01-header .cta.button-05 .content {
    min-height: 34px;
    padding-block: 7px;
  }

  .v2a .button.v2a-photo-cta.button-05 {
    --edge-space: 17px;
    --arrow-width: 14px;
    --arrow-gap: 10px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-05 .glass,
  .button-05 .content,
  .button-05 .content::before,
  .button-05 .content::after,
  .button-05 .copy {
    transition: none;
  }

  .button-05:is(:hover, :focus-visible) .glass,
  .button-05:active .glass,
  .button-05:active .content,
  .button-05:is(:hover, :focus-visible) .copy {
    transform: none;
  }

  .button-05:is(:hover, :focus-visible) .content::before {
    transform: translate3d(calc(-100% - var(--edge-space) - var(--arrow-bleed)), -50%, 0);
  }

  .button-05:is(:hover, :focus-visible) .content::after {
    transform: translate3d(0, -50%, 0);
  }
}