@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="clip-path-unmask"] .unmask {
      animation: unmask var(--dur-reveal) var(--ease-out-expo) both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes unmask {
      from { clip-path: inset(3% 3% 3% 3% round 0.375rem); }
      to { clip-path: inset(0 0 0 0 round 0); }
    }
  }
}

[data-motion~="zero-bounce-editorial"] main a:not(.btn) {
  text-decoration: none;
  background: linear-gradient(currentColor 0 0) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--dur-slow) var(--ease-out-expo);
}
[data-motion~="zero-bounce-editorial"] .media > img {
  transition: transform var(--dur-reveal) var(--ease-out-expo);
}
@media (hover: hover) {
  [data-motion~="zero-bounce-editorial"] main a:not(.btn):hover {
    background-size: 0 1px;
    background-position: 100% 100%;
  }
  [data-motion~="zero-bounce-editorial"] a:hover .media > img {
    transform: scale(1.03);
  }
}
