:root {
  --ssw-button-038-color: #131313;
  --ssw-button-038-focus-color: #000;
  --ssw-button-038-padding: 0.75em 1em;
  --ssw-button-038-radius: 2.5em;
  --ssw-button-038-focus-inset: -0.125em;
  --ssw-button-038-stagger: 0.015s;
  --ssw-button-038-ease-hover: cubic-bezier(0.625, 0.05, 0, 1);
  --ssw-button-038-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
  --ssw-button-038-width-hover: -10px;
  --ssw-button-038-height-hover: -5px;
}

.ssw-button-038 {
  color: var(--ssw-button-color, var(--ssw-button-038-color)) !important;
  background-color: transparent !important;
  border: none;
  outline-style: none;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid !important;
  position: relative;
  overflow: visible;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--ssw-button-038-ease-hover);
}

.ssw-button-038::after {
  content: "";
  position: absolute;
  inset: var(--ssw-button-038-focus-inset);
  border-radius: var(--ssw-button-radius, var(--ssw-button-038-radius));
  transition:
    box-shadow 0.3s var(--ssw-button-038-ease-focus),
    scale 0.45s var(--ssw-button-038-ease-hover);
  pointer-events: none;
  z-index: 3;
}

.ssw-button-038:focus-visible::after {
  box-shadow: 0 0 0 0.125em var(--ssw-button-focus-color, var(--ssw-button-038-focus-color));
  scale: var(--ssw-button-038-scale-x, 1) var(--ssw-button-038-scale-y, 1);
  transition:
    box-shadow 0.3s var(--ssw-button-038-ease-focus),
    scale 0.55s 0.05s var(--ssw-button-038-ease-hover);
}

.ssw-button-038__bg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  background: var(--ssw-button-bg, #fff);
  border: var(--ssw-button-border, none);
  border-radius: var(--ssw-button-radius, var(--ssw-button-038-radius));
  transition: scale 0.45s var(--ssw-button-038-ease-hover);
}

.ssw-button-038__inner {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding: var(--ssw-button-padding, var(--ssw-button-038-padding));
  display: flex;
  align-items: center;
  justify-content: center;
}

.ssw-button-038__text {
  clip-path: inset(-10% 0%);
  white-space: nowrap;
}

.ssw-button-038__text span {
  display: inline-block;
  white-space: pre;
  will-change: transform;
  translate: 0 0 0;
  text-shadow: 0 1.3em currentColor;
  transition: translate 0.6s calc(var(--index) * var(--ssw-button-038-stagger))
    var(--ssw-button-038-ease-hover);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ssw-button-038:is(:hover, :focus-visible) {
    transform: translateY(2px);
  }

  .ssw-button-038:is(:hover, :focus-visible) .ssw-button-038__bg {
    scale: var(--ssw-button-038-scale-x, 1) var(--ssw-button-038-scale-y, 1);
    transition: scale 0.55s 0.05s var(--ssw-button-038-ease-hover);
  }

  .ssw-button-038:is(:hover, :focus-visible) .ssw-button-038__text span {
    translate: 0 -1.3em 0;
    transition: translate 0.6s
      calc(var(--index) * var(--ssw-button-038-stagger) + 0.05s)
      var(--ssw-button-038-ease-hover);
  }
}

.section4 .rectangles .box .rightbox button.ssw-button-038 {
  --ssw-button-bg: #aeaeae;
  --ssw-button-color: #111;
  --ssw-button-radius: 10px;
  --ssw-button-038-width-hover: -22px;
  --ssw-button-038-height-hover: -12px;
}

.federation-button.ssw-button-038 {
  --ssw-button-radius: 999px;
}

.federation-button--light.ssw-button-038 {
  --ssw-button-bg: #fff;
  --ssw-button-color: #111;
}

.federation-button--dark.ssw-button-038 {
  --ssw-button-bg: #141414;
  --ssw-button-color: #fff;
}