/* ── 메인 히어로 효과 (기존 구조 유지, CSS만 추가) ── */

/* 슬라이드 배경 느린 줌인 */
.main-visual .swiper-slide .mainVisual-img {
  transition: transform 6s ease-out !important;
}
.main-visual .swiper-slide-active .mainVisual-img {
  transform: scale(1.06) !important;
}

/* 텍스트 등장 애니메이션 */
.main-visual .swiper-slide .container {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}
.main-visual .swiper-slide-active .container {
  opacity: 1;
  transform: translateY(0);
}

/* 파티클 오버레이 */
.hero-particles-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}
.hero-particle {
  position: absolute;
  background: rgba(21, 157, 212, 1);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(21,157,212,0.6);
  animation: heroFloat linear infinite;
}
@keyframes heroFloat {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-200px); }
}

/* 그리드 라인 오버레이 */
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.hero-grid-v {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  background: rgba(21, 157, 212, 0.06);
}
.hero-grid-h {
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  background: rgba(21, 157, 212, 0.06);
}

/* 프로그레스 바 */
.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: #159DD4;
  z-index: 20;
}

/* 슬라이드 카운터 */
.hero-counter {
  position: absolute;
  bottom: 40px;
  right: 60px;
  z-index: 20;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}
.hero-counter .cnt-current {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

/* SCROLL 인디케이터 */
.drot-scroll-down {
  z-index: 20;
}

/* 커스텀 페이지네이션 바 스타일 */
.drot-hero-paging .swiper-pagination-bullet {
  width: 40px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.3) !important;
  opacity: 1 !important;
  transition: all 0.4s !important;
}
.drot-hero-paging .swiper-pagination-bullet-active {
  width: 60px !important;
  background: #159DD4 !important;
}

/* ── 서브비주얼 효과 ── */

/* 서브비주얼 기본 */
.sub-visual {
  overflow: hidden !important;
  position: relative !important;
}

/* 타이틀 등장 */
.sub-visual .container {
  opacity: 0;
  transform: translateY(25px);
  animation: subVisualFadeIn 0.8s ease 0.2s forwards;
  position: relative;
  z-index: 2;
}
@keyframes subVisualFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* 브레드크럼 등장 */
.sub-visual .location {
  opacity: 0;
  transform: translateY(15px);
  animation: subVisualFadeIn 0.6s ease 0.5s forwards;
}

/* 파티클 */
.sub-particles {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
}
.sub-particle {
  position: absolute;
  background: rgba(21, 157, 212, 1);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(21,157,212,0.6);
  animation: subFloat linear infinite;
}
@keyframes subFloat {
  0% { opacity: 0; transform: translateY(50px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-350px); }
}