/* Light Sweep - đặt vào Module CSS hoặc file chung */
.lightsweep{
  position: relative;
  overflow: hidden; /* giữ ánh sáng trong vùng layer */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* lớp con nếu muốn áp dụng effect riêng (tự động dùng pseudo nếu không có) */
.lightsweep > .ls-inner{
  display: block;
}

/* pseudo-element tạo dải ánh sáng */
.lightsweep::before{
 content: "";
  position: absolute;
  top: -60%;
  left: -150%;
  width: 60%;
  height: 220%;
  /* gradient: giữa là sáng, hai đầu trong suốt */
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.85) 45%,
    rgba(255,255,255,0.95) 50%,
    rgba(255,255,255,0.85) 55%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  mix-blend-mode: screen; /* hoặc overlay tùy hiệu ứng */
  opacity: 0.95;
  filter: blur(6px); /* làm mềm viền */
  will-change: transform, left;
  animation: lightsweep-move 1.1s linear infinite;
}

/* chạy 1 lần (khi cần) */
.lightsweep.once::before{
  animation: lightsweep-move 1.1s linear 1;
  animation-fill-mode: forwards;
}

/* chặn lặp tức thì: dùng delay để cách thời gian giữa các lần (vd: 2.5s) */
.lightsweep.spaced::before{
  animation: lightsweep-move 2.0s linear infinite;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* điều chỉnh tốc độ/chiều dài: custom properties */
.lightsweep{
  --ls-duration: 4.1s;
  --ls-width: 40%;
  --ls-skew: -25deg;
  --ls-blur: 6px;
}
.lightsweep::before{
  width: var(--ls-width);
  transform: skewX(var(--ls-skew));
  filter: blur(var(--ls-blur));
  animation-duration: var(--ls-duration);
}

@keyframes lightsweep-move{
  0%   { left: -150%; opacity: 0; }
  10%  { opacity: 0.9; }
  50%  { left: 150%; opacity: 0.9; }
  90%  { opacity: 0.2; }
  100% { left: 150%; opacity: 0; }
}
/* Responsive: giảm blur & width trên màn nhỏ */
@media (max-width: 768px){
  .lightsweep{ --ls-width: 60%; --ls-blur: 4px; --ls-duration: 1.9s; }
}
.call{
   opacity: 0;
}
.call:hover{
   opacity: 1;
}