/*** BUTTON CTA CORNER **/

.shiny-cta:hover {
    background-color: #a485bf;
    transform: translateX(0rem);
    transition: 0.7s cubic-bezier(0.9, 0, 0.1, 1);
    float: left;
    transform: translateY(-0.5rem);
    transition: 0.5s cubic-bezier(0.9, 0, 0.1, 1);
    box-shadow: 0px 6px 13px 3px #36296763 !important;
}

.shiny-cta {
  --animation: gradient-angle linear infinite;
  --duration: 6s;
  --shadow-size: 2px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 1.25rem 2.5rem;
  transition: 0.5s cubic-bezier(0.9, 0, 0.1, 1)!important;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 360px;
  color: white;
  background-color: #3f2754;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);

  &::before,
  &::after,
  span::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
  }

  &:active {
    translate: 0 1px;
  }
}

/* Dots pattern */


/* Inner shimmer */
.shiny-cta::after {
  --animation: shimmer linear infinite;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg,
      transparent,
      var(--shiny-cta-highlight),
      transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
}

.shiny-cta span {
  z-index: 1;

  &::before {
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
    opacity: 0;
    d
  }
}

/* Animate */
.shiny-cta {
  --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
  transition: var(--transition);
  transition-property: --gradient-angle-offset, --gradient-percent,
    --gradient-shine;

  &,
  &::before,
  &::after {
    animation: var(--animation) var(--duration),
      var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
  }

  span::before {
    transition: opacity var(--transition);
    animation: calc(var(--duration) * 1.5) breathe linear infinite;
  }
}

.shiny-cta:is(:hover, :focus-visible) {
  --gradient-percent: 20%;
  --gradient-angle-offset: 95deg;
  /* --gradient-shine: var(--shiny-cta-highlight-subtle); */

  &,
  &::before,
  &::after {
    animation-play-state: running;
  }

  span::before {
    opacity: 1;
  }
}

@keyframes gradient-angle {
  to {
    --gradient-angle: 360deg;
  }
}

@keyframes shimmer {
  to {
    rotate: 360deg;
  }
}

@keyframes breathe {

  from,
  to {
    scale: 1;
  }

  50% {
    scale: 1.2;
  }

  */