/* hero_falling_line.css
   - 'falling-dots-container' 하단에 가로줄을 그려줍니다.
   - HTML 수정 없이, CSS만으로 라인을 추가(의사요소)합니다.
   - 필요 시 .animate-line 클래스를 추가하면 좌→우로 그려지는 애니메이션이 작동합니다.
*/

:root{
  --line-touch: 0px;       /* 시각 미세보정: -1~+2px 등 */
  --dot-count: 6;          /* 점 갯수 (현재 화면처럼 6개면 6) */
  --falling-line-offset: 6px;                /* 점 영역 '아래로' 간격 */
  --falling-line-w: min(70vw, 720px);        /* 라인 길이 (vw or px 혼합) */
  --falling-line-h: 2px;                     /* 라인 두께 */
  --falling-line-color: rgba(255,255,255,.85);
  --falling-line-glow: 0 0 12px rgba(255,255,255,.35);  /* 필요 없으면 none */
}

/* 모바일에서는 살짝 더 짧고 얇게 */
@media (max-width: 767.9px){
  :root{
  --dot-count: 6;          /* 점 갯수 (현재 화면처럼 6개면 6) */
    --falling-line-w: min(86vw, 360px);
    --falling-line-h: 1.5px;
  }
}

/* 점 영역 아래 가로줄 */
.falling-dots-container{
  position: absolute;    /* 기존 코드에서도 absolute일 가능성 높음 */
  z-index: 3;            /* 영상/오버레이보다 위로 */

  /* '점갯수×칸높이 + 떨어진거리' 만큼 컨테이너 최소 높이를 확보 */
  min-height: calc( (var(--dot-count) * var(--dot-step)) + var(--dot-fall) );
}

.falling-dots-container::after{
  content: "";
  position: absolute;
  top: calc( (var(--dot-count) * var(--dot-step)) + var(--dot-fall) + var(--falling-line-offset) + var(--line-touch) );
  left: 50%;
  transform: translateX(-50%);
  width: var(--falling-line-w);
  height: var(--falling-line-h);
  background: var(--falling-line-color);
  box-shadow: var(--falling-line-glow);
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
}

/* 애니메이션(선택): .falling-dots-container에 .animate-line를 붙이면 좌->우로 그려짐 */
.falling-dots-container.animate-line::after{
  animation: heroLineGrow 0.7s ease-out 0.15s forwards;
  /* 시작 시 width:0으로 보이게 */
  width: 0;
  opacity: .0;
}

@keyframes heroLineGrow{
  0%   { width: 0; opacity: 0; }
  100% { width: var(--falling-line-w); opacity: 1; }
}


/* === Adjust container height for falling transform & two extra steps ===
   점이 transform으로 아래로 떨어져도, 컨테이너 높이에 그 이동량이 반영되지 않음.
   그래서 컨테이너에 padding-bottom을 더해 실제 '시각적' 바닥을 맞춰준다.
*/
:root{
  --dot-count: 6;          /* 점 갯수 (현재 화면처럼 6개면 6) */
  --dot-size: 5px;      /* .falling-dot { width/height } */
  --dot-gap: 2px;       /* .falling-dot { margin }  => 수직 간격 */
  --dot-step: calc(var(--dot-size) + 2*var(--dot-gap)); /* 점 한 칸 */
  --dot-fall: 20px;     /* @keyframes fall: translateY(20px) 과 동일값으로 맞춰야 정확 */
}

/* 컨테이너 시각적 바닥 보정: '떨어지는 거리 + 점 2칸' 만큼 아래로 확장 */
.falling-dots-container{
  padding-bottom: calc(var(--dot-fall) + (2 * var(--dot-step)));
}


/* === V2: Visual bottom compensation with configurable steps === */
:root{
  --dot-count: 6;          /* 점 갯수 (현재 화면처럼 6개면 6) */
  --dot-size: 5px;         /* .falling-dot { width/height } */
  --dot-gap: 2px;          /* .falling-dot { margin } => 세로 간격 */
  --dot-step: calc(var(--dot-size) + 2*var(--dot-gap)); /* 점 한 칸 높이 */
  --dot-fall: 20px;        /* @keyframes fall translateY(...) 값과 동일하게 */
  --extra-steps: 2;        /* 요구사항: '점 두 칸' 아래로 — 필요 시 1.5, 3 등으로 조정 */
}

/* 컨테이너 시각적 바닥 보정: 떨어지는 거리 + (추가 칸수 × 칸 높이) */
.falling-dots-container{
  padding-bottom: calc(var(--dot-fall) + (var(--extra-steps) * var(--dot-step)));
}
/* === Override: visually hide the falling line but keep layout & conditions === */
.falling-dots-container::after {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Prevent animate-line from flashing */
.falling-dots-container.animate-line::after {
  animation: none !important;
  width: var(--falling-line-w) !important;
  opacity: 0 !important;
  visibility: hidden !important;
}