.ny-frame {
  position: relative;
  overflow: hidden;
}

@media (hover: hover) {
  .ny-frame::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;

    background: radial-gradient(
        140px 70px at var(--f1x, 22%) var(--f1y, 18%),
        rgba(255, 255, 255, 0.18),
        transparent 62%
      ),
      radial-gradient(
        160px 90px at var(--f2x, 78%) var(--f2y, 10%),
        rgba(255, 255, 255, 0.12),
        transparent 60%
      ),
      linear-gradient(
        var(--fAng, 135deg),
        rgba(255, 255, 255, 0.12),
        transparent 45%
      );

    opacity: 0;
    transition: opacity 0.22s ease;
    mix-blend-mode: screen;
  }

  .ny-frame:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 0 26px rgba(255, 255, 255, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .ny-frame:hover::after {
    opacity: 1;
  }
}