/* 通用按钮样式 */
button, .pagebuilder-button-primary {
    position: relative;
    background: none;
    background-color: rgba(255, 255, 255, 0) !important;
    border: none !important;
    font: inherit;
    padding: 4px 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: black !important;
    cursor: pointer;
    text-decoration: none;
    border-bottom: none !important; /* 主下划线 */
    overflow: hidden;
    border-radius: 0px !important;
}

/* 遮罩动画线（伪元素） */
button::after, .pagebuilder-button-primary::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: black; /* 主下划线 */
      z-index: 1;
}

button::before, .pagebuilder-button-primary::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 10%;
    height: 1px;
    background-color: white; /* 滑动线颜色 */
    z-index: 2;
    opacity: 0; /* 初始透明度为 0 */
    transform: translateX(-120%);
    will-change: transform, opacity;
    transition: none; /* 禁用 transition，因为使用了 @keyframes */
    
}

button:hover, .pagebuilder-button-primary:hover{
border:none  !important;
border-bottom: 0px solid white !important;
}

button:hover::before, .pagebuilder-button-primary:hover::before {
  animation: underline-in 0.6s ease-in-out forwards;
}

button:not(:hover)::before, .pagebuilder-button-primary:not(:hover)::before {
  animation: underline-out 0.6s ease-in-out forwards;
}

@keyframes underline-in {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  20% {
    transform: translateX(0%);
    opacity: 1;
  }
  80% {
    transform: translateX(900%);
    opacity: 1;
  }
  100% {
    transform: translateX(1000%);
    opacity: 0;
  }
}

@keyframes underline-out {
  0% {
    transform: translateX(1000%);
    opacity: 0;
  }
  20% {
    transform: translateX(900%);
    opacity: 1;
  }
  80% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-120%);
    opacity: 0;
  }
}