@import "./variables.scss";

.dividing {
  flex: 1;
  display: block;
  width: 100%;
  height: 25px;
  position: relative;
  transition: opacity 0.3s ease-in-out;
  --dash-spacing: 10px;
  --dash-width: 2px;

  opacity: 1;
  transition: opacity 0.3s ease-in-out;

  // 虚线背景层 - 带遮罩
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      90deg,
      var(--foreground),
      var(--foreground) var(--dash-width),
      transparent 0,
      transparent var(--dash-spacing)
    );
    background-size: var(--dash-spacing) 100%;
    animation: line-flow 3s linear infinite;

    // 遮罩层实现虚线淡入淡出效果
    mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 3%, black 97%, transparent 100%);
  }

  // 扫描光效 - 模拟终端扫描线
  &::after {
    content: "";
    position: absolute;
    left: -5%;
    top: 50%;
    transform: translateY(-50%);
    width: 30%;
    height: 120%;
    filter: blur(4px);
    background: linear-gradient(90deg, transparent 0%, var(--green) 80%, transparent 100%);
    opacity: 0.3;
    animation: scan-line 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

// 虚线流动动画 - 模拟加载进度
@keyframes line-flow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: var(--dash-spacing) 0;
  }
}

// 扫描线动画 - 模拟终端扫描效果
@keyframes scan-line {
  0% {
    left: -5%;
    width: 5%;
    opacity: 0;
  }
  30% {
    width: 30%;
    opacity: 0.3;
  }
  70% {
    opacity: 0.3;
  }
  100% {
    left: 80%;
    opacity: 0;
  }
}