/**
 * sections.css — 섹션별 스타일 (hero, intro, guestbook, sticky steps)
 */

/* ----- Section 01 Hero ----- */
.section-hero {
  /* intro는 scroll 기반이 아니므로 레이아웃 안정성을 최우선 */
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  /* hero-intro.css 에서 플랫폼별 --hero-ground-band 보조 */
  --hero-ground-band: 120px;
}

/* visualViewport 기반에서 주소창 변화에도 안정적으로 보이도록 보조 */
@supports (height: 100svh) {
  .section-hero { min-height: 100svh; }
}

.hero-stage {
  position: relative;
  min-height: inherit;
  text-align: center;
}

.hero-ground {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--color-hero-ground);
  will-change: transform;
}

html[data-intro-state="done"] .section-hero {
  margin-top: calc(-1 * var(--header-height));
}

.hero-balls-visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

@media (max-width: 480px) {
  .hero-ball--mobile-hide {
    display: none;
  }
}

/* ----- Sticky 단계 ----- */
.scroll-step {
  opacity: 0.3;
  transform: scale(var(--scroll-step-scale, 0.95));
  transition: opacity 0.4s var(--ease-smooth-in-out), transform 0.4s var(--ease-smooth-in-out);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-step {
    transition: none;
  }
}

.scroll-step[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}

.sticky-inner .scroll-step {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  max-width: 36rem;
}

/* ----- Intro ----- */
#intro h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

#intro p {
  margin: 0;
  max-width: 40rem;
}

/* 스크롤 테스트용 캡션 (헤더 프로그레스 확인) */
.section-test-caption {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}
.section--sticky .sticky-inner .scroll-step p:first-child {
  margin-top: 0;
}