@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;

  // 虚线背景层 - 带遮罩
  &::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: -30%;
    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);
  }

  &.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 100;
    --dash-spacing: 6px;
    --dash-width: 2px;
    background: var(--background);
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &::before {
      animation: line-flow 1.5s linear infinite;
      mask-image: none;
      -webkit-mask-image: none;
      top: calc(50% - 1px);
      height: 2px;
    }

    &::after {
      animation: scan-line 2.5s ease-in-out infinite;
      opacity: 0.6;
      filter: blur(3px);
      // 调整扫描线高度以适应 5px 容器
      height: 200%;
      width: 25%;
    }
  }
}

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

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