/* hero.css — 히어로 clip-path 확장 애니메이션 */

/* ── 섹션 인트로 + 히어로 ── */
.section-intro {
  background: var(--white);
  z-index: 1;
}

.section-hero {
  position: relative;
  /* sticky 유지 동안 스크롤할 충분한 높이 */
  height: 250vh;
  height: 250dvh;
  pointer-events: none;
}

/* ── sticky container: 유일한 sticky 요소 ── */
.section-hero-inner {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: calc( 100dvh - 56px );
  overflow: hidden;
}

/* ── 텍스트 공통 (그라데이션 + 흰색 모두) ── */
.section-hero-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 220px 24px 160px;
  box-sizing: border-box;
  z-index: 3;
  will-change: clip-path;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-hero-text.white {
  z-index: 1;
}

/* ── 흰색 텍스트 색상 오버라이드 ── */
.section-hero-text.white .section-badge {
  background: transparent;
  border: 1px solid var(--white);
  color: var(--white);
}

.section-hero-text.white .section-title {
  color: var(--white);
}

.section-hero-text.white .section-body {
  color: var(--white);
}

/* ── 이미지 ── */
.section-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* 초기 clip-path는 JS rAF에서 적용 */
  clip-path: inset(86% 14% 0% 14% round 24px 24px 0 0);
  will-change: clip-path;
}

.section-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#section1 .section-hero-image img {
  object-position: 50% 0%;
}

/* ── 히어로 이미지 딤드 오버레이 ── */
.section-hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 1);
  opacity: var(--dim-opacity, 0);
  pointer-events: none;
}

.section-hero-caption{
  position: absolute;
  right: 32px;
  bottom: 32px;
  color: var(--white);
  z-index: 1;
}

/* ── S1 히어로 등장 초기 상태 — playS1Entrance()가 해제 ── */
#section1 .section-hero-text {
  opacity: 0;
}