/* Link cards and plain cards expose the same native text selection behavior. */
.float-card,
.float-card :where(h1, h2, h3, h4, h5, h6, p, span, strong, em, small) { user-select: text; }
.hero-note::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -75px;
  border: 1px solid rgba(110, 137, 199, .24);
  border-radius: 50%;
  pointer-events: none;
}
.button {transition: transform 160ms ease, background-color 160ms ease;}
.button:active {transform: scale(.97);}
@media (hover: hover) and (pointer: fine) {
  .primary:hover {background-color: #3b559b;}
  .subtle:hover {background-color: #dfe7f7;}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .float-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --card-lift: 0px;
    transform: perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 320ms ease-out, box-shadow 320ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out, opacity 100ms linear;
  }
  .float-card.is-tilting {
    --card-lift: -4px;
    box-shadow: 0 18px 38px -26px rgba(58, 85, 151, .55);
  }
}
/* Selection needs a flat surface immediately; drag feedback uses translate/scale. */
.float-card.is-card-interacting {transform: none; transition: none;}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .float-card {transform: none; transition: none; animation: none;}
}
@media (prefers-reduced-motion: reduce) {
  .button {transform: none; transition: none; animation: none;}
}