/* V13: cursor-directed edge light for the two Hero actions only. */
.hero-actions > .v13-specular {
  --v13-spec-x: 50%;
  --v13-spec-y: 50%;
  --v13-spec-strength: 0;
  --v13-spec-radius: 52px;
  --v13-spec-core: rgba(255, 250, 243, .94);
  --v13-spec-tail: rgba(215, 162, 168, .32);
  position: relative;
  isolation: isolate;
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 10px 30px rgba(8, 1, 3, .16);
  transition:
    background-color 180ms cubic-bezier(.16, 1, .3, 1),
    border-color 180ms cubic-bezier(.16, 1, .3, 1),
    color 180ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}

.hero-actions > .v13-specular.button-light {
  --v13-spec-radius: 42px;
  --v13-spec-core: rgba(97, 18, 35, .88);
  --v13-spec-tail: rgba(211, 158, 166, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .66),
    0 10px 28px rgba(8, 1, 3, .13);
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .hero-actions > .v13-specular::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 1px;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
      circle var(--v13-spec-radius) at var(--v13-spec-x) var(--v13-spec-y),
      var(--v13-spec-core) 0 8%,
      var(--v13-spec-tail) 38%,
      transparent 74%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: var(--v13-spec-strength);
    transition: opacity 240ms cubic-bezier(.16, 1, .3, 1);
  }

  body:not(.v13-specular-ready) .hero-actions > .v13-specular:hover::after {
    --v13-spec-y: 0%;
    opacity: .66;
  }

  body.v13-specular-ready .hero-actions > .v13-specular::after {
    transition: none;
  }

  .hero-actions > .v13-specular:focus-visible::after {
    --v13-spec-x: 50%;
    --v13-spec-y: 0%;
    opacity: .72;
  }
}

.hero-actions > .v13-specular.button-light:hover {
  background: #f4ede3;
  border-color: #f4ede3;
  color: #270b10;
}

.hero-actions > .v13-specular:not(.button-light):hover {
  background: rgba(245, 238, 228, .055);
  border-color: rgba(255, 255, 255, .62);
  color: #fffaf3;
}

.hero-actions > .v13-specular:not(.button-light):focus-visible {
  --v13-spec-core: rgba(112, 24, 42, .94);
  --v13-spec-tail: rgba(211, 158, 166, .48);
}

.hero-actions > .v13-specular:focus-visible {
  outline: 2px solid rgba(255, 250, 243, .92);
  outline-offset: 4px;
}

.hero-actions > .v13-specular:active::after {
  opacity: .56;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero-actions > .v13-specular::after {
    content: none !important;
  }
}