/* ================================================================
 * hero.css - 히어로 슬라이더, 화살표, 닷, 스크롤 인디케이터, 뱃지
 * Homepage CSS Module
 * ================================================================ */

/* ── 히어로 (시네마틱 배경) ──────────────────────── */
.hero {
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: 0 60px;
  position:relative; overflow:hidden;
  text-align:center;
}

/* ── 히어로 슬라이더 ──────────────────────── */
.hero-slider {
  position: absolute; inset: 0; z-index: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  background: center center / cover no-repeat;
  opacity: 0;
  transition: opacity .8s ease;
  transform: scale(1);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-slide.active {
  opacity: 1;
  animation: heroZoomIn 5.5s ease-out forwards;
}
.hero-slide:nth-child(even).active {
  animation: heroZoomOut 5.5s ease-out forwards;
}
@keyframes heroZoomIn {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
@keyframes heroZoomOut {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}
.hero-slide.hero-fit {
  background-size: 100% auto;
  background-position: center center;
}
.hero-slide.hero-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: var(--surface, #fff);
}

/* ── 좌우 화살표 ──────────────────────── */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
  backdrop-filter: blur(4px);
  line-height: 1;
  padding: 0 0 2px 0;
}
.hero-arrow:hover {
  background: rgba(255,255,255,0.9);
  color: #111;
  border-color: #fff;
}
.hero-prev { left: 32px; }
.hero-next { right: 32px; }

/* ── 하단 도트 인디케이터 ──────────────────────── */
.hero-dots {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: transparent;
  cursor: pointer;
  transition: all .3s;
  padding: 0;
}
.hero-dot.active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.2);
}

/* ── 히어로 뱃지 ──────────────────────── */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; margin-bottom:28px;
  border:1px solid var(--border);
  border-radius:100px;
  font-size:.78rem; color:var(--accent);
  background:rgba(255,107,0,0.06);
  margin-left:auto; margin-right:auto;
}
.badge-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent2);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.4; transform:scale(.7); }
}

/* ── 히어로 버튼 ──────────────────────── */
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ── HERO SCROLL INDICATOR ──────────────────────── */
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 28px;
  height: 46px;
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .3s;
}
.hero-scroll:hover { border-color: var(--accent); }
.hero-scroll span {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6px;
  animation: scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim {
  0%   { top: 6px;  opacity: 1; }
  50%  { top: 28px; opacity: 0; }
  100% { top: 6px;  opacity: 0; }
}

/* ── 모바일 반응형 ──────────────────────── */
@media(max-width:768px) {
  .hero { padding: 0; min-height: auto; aspect-ratio: 16/9; }
  .hero-slide {
    background-size: contain;
    background-position: center center;
    background-color: #000;
  }
  .hero-scroll { margin-top: 40px; }
  .hero-dots { bottom: 16px; }
  .hero-prev { left: 8px; width: 36px; height: 36px; font-size: 1.2rem; }
  .hero-next { right: 8px; width: 36px; height: 36px; font-size: 1.2rem; }
}