.section {
  &:has(.floating-cta .promo-cta .icon-button) {
    bottom: 0;
    position: sticky;
    z-index: 4;
  }

  &.rounded-corners-bottom,
  &.rounded-corners {
    & + .section {
      &:has(.floating-cta) {
        margin-block: var(--s2a-spacing-xl) calc(-1 * var(--s2a-spacing-xl));

        /* cancel section-metadata's generic rounded-corners overlap spacer
           so the two don't stack */
        &::before {
          content: none;
        }
      }
    }
  }

  /* the reverse adjacency: cancel section-metadata's generic overlap spacer the same way. */
  &:has(.floating-cta):has(+ .rounded-corners),
  &:has(.floating-cta):has(+ .rounded-corners-top) {
    &::after {
      content: none;
    }
  }
}

.floating-cta {
  display: flex;
  justify-content: center;
  .promo-cta {
    bottom: var(--s2a-spacing-20);
    clip-path: inset(50% round var(--s2a-border-radius-12));
    opacity: 0;
    position: absolute;
    transform: translateY(var(--s2a-spacing-lg));
    transition:
      opacity 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53),
      clip-path 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53),
      transform 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    will-change: opacity, clip-path, transform;
    &.active {
      clip-path: inset(0% round var(--s2a-border-radius-12));
      opacity: 1;
      transform: translateY(0);
      transition:
        opacity 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        clip-path 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      &:focus-visible {
        clip-path: inset(-5px round var(--s2a-border-radius-12));
        outline-offset: var(--s2a-border-width-2);
        transition: none;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta {
    .promo-cta {
      clip-path: none;
      transform: none;
      transition: none;
      &.active {
        transition: none;
      }
    }
  }
}