/*
 * Opt-in treatment for unmistakably interactive content actions.
 * The border geometry and palette mirror the approved mobile menu control.
 */

#main-content .zv-trace-action {
  position: relative;
  isolation: isolate;
  text-align: center;
}

#main-content .zv-trace-action::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #6556d8 0%,
      #29b5a7 12.5%,
      #ffd25b 25%,
      #ff7478 37.5%,
      #6556d8 50%,
      #29b5a7 62.5%,
      #ffd25b 75%,
      #ff7478 87.5%,
      #6556d8 100%
    );
  background-position: 0% 50%;
  background-size: 200% 100%;
  pointer-events: none;
  -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;
  animation: zv-action-border-flow 8s linear infinite !important;
}

/* The animated border replaces the old arrow marker on homepage link cards. */
#main-content .zv-link-card.zv-trace-action::after,
#main-content .zv-link-card.zv-trace-action:hover::after {
  content: none;
  display: none;
}

#main-content .age-card > .zv-action-link {
  align-self: center;
  margin-inline: auto;
  text-align: center;
}

/*
 * Compact actions are frequently the last child of RTL flex/grid cards.
 * Center them explicitly so page-local alignment rules cannot push them right.
 */
#main-content .zv-action-link.zv-trace-action {
  align-self: center;
  justify-self: center;
  margin-inline: auto;
}

#main-content .zv-actions,
#main-content .hub-cta-row {
  justify-content: center;
  text-align: center;
}

#main-content .hub-cta > .zv-trace-action,
#main-content .hub-cta-row > .zv-trace-action {
  align-self: center;
  justify-self: center;
  margin-inline: auto;
}

@keyframes zv-action-border-flow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 200% 50%;
  }
}