/* Osmo Supply — Magnetic Hover Effect (resource CSS, unchanged except where marked "Edit") */
.btn-magnetic {
  font-size: 1em;
  position: relative;
}

.btn-magnetic__click {
  cursor: pointer;
  border-radius: 4em;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn-magnetic__fill {
  background-color: #000; /* Edit: black (was #6448b2) */
  width: 100%;
  height: 100%;
  position: absolute;
}

.btn-magnetic__content {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: .75em 2em;
  display: flex;
  position: relative;
}

.btn-magnetic__text {
  position: relative;
  overflow: hidden;
}

.btn-magnetic__text-p {
  color: #fff; /* Edit: white on black (was #ede7ff, a lilac white for the purple) */
  text-align: center;
  margin: 0;
  font-family: PP Neue Montreal, Arial, sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
}

.btn-magnetic__text-p.is--duplicate {
  position: absolute;
  top: 100%;
}

/* Hover */
.btn-magnetic__click .btn-magnetic__text-p {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translateY(0%) rotate(0.001deg);
}
.btn-magnetic__click:hover .btn-magnetic__text-p {
  transform: translateY(-100%) rotate(0.001deg);
}

/* Fitting it into this site (not part of the resource) */

/* the resource's typeface, from the files the other format already has */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("alt/footer/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

/* in an opened card: under its text, as wide as its words */
.dome-grid__content .btn-magnetic {
  margin-top: .5em;
}

/* keyboard focus shows */
.btn-magnetic__click:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* a card whose website is still to come: the button is there, but it can't be clicked yet */
.btn-magnetic__click[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
  opacity: .35;
}

@media (prefers-reduced-motion: reduce) {
  .btn-magnetic__click .btn-magnetic__text-p {
    transition: none;
  }
}