// LinesComponent.scss

.lines-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50vh; /* Adjust the height as needed */
	pointer-events: none; /* Prevents the lines from blocking interactions with elements below */
	z-index: 1; /* Ensure lines are behind other elements */
  }
  
  .lines {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image:
	  linear-gradient(to right, #ffffff 1px, transparent 0),
	  linear-gradient(to bottom, #ffffff 1px, transparent 0);
	background-size: 45px 30px;
	background-repeat: repeat;
	transform-origin: 100% 0 0;
	animation: none;
	transform: rotateX(45deg) translateY(0);
  }
  
  .line {
	position: absolute;
	width: 1px;
	height: 100%;
	top: 0;
	left: 50%;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
  
	&::after {
	  content: '';
	  display: block;
	  position: absolute;
	  height: 15vh;
	  width: 100%;
	  top: -50%;
	  left: 0;
	  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
	  animation: drop 7s 0s infinite;
	  animation-fill-mode: forwards;
	  animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
	}
  
	&:nth-child(1) {
	  margin-left: -25%;
  
	  &::after {
		animation-delay: 2s;
	  }
	}
  
	&:nth-child(3) {
	  margin-left: 25%;
  
	  &::after {
		animation-delay: 2.5s;
	  }
	}
  }
  
  @keyframes drop {
	0% {
	  top: -50%;
	}
	100% {
	  top: 110%;
	}
  }