/* ═══════════════════════════════════════
   HERO — hero.css (v3 통합본)
   daphone-landing-page
   
   2026-04-20 통합:
     - 기존 hero.css + hero-seo.css 병합
     - 오프닝 애니메이션 추가 (A+C 조합 3초 시나리오)
     - 현재 HTML 구조(.hero__catch/headline/lead/btns)에 맞춤
     - 미사용 스타일 제거(.hero__eyebrow, .hero__title, .hero__sub)
   
   HTML 구조 기준:
     <section id="hero" class="hero">
       <div class="hero__text-wrap">
         <p class="hero__catch">
           <span class="hero__catch-a">여전할 것인가</span>
           <span class="hero__catch-b"><em>역전</em></span>
           <span class="hero__catch-c">할 것인가?</span>
         </p>
         <h1 class="hero__headline">휴대폰 성지 <em>다폰</em>, ...</h1>
         <p class="hero__lead">정산·관리·기준이 있는 구조</p>
       </div>
       <div class="hero__watermark"></div>
       <div class="hero__btns">...</div>
     </section>
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   [1] HERO 컨테이너
═══════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--notice-h, 0px) + var(--nav-h, 80px) + 60px) 9% 80px;
  position: relative;
  overflow: hidden;
  background-image: url('../../images/bg-store-04.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 검정 오버레이 — 배경 위 텍스트 가독성 확보 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

/* 내부 콘텐츠 z-index */
.hero__text-wrap,
.hero__watermark,
.hero__btns {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════
   [2] 텍스트 영역
═══════════════════════════════════════ */
.hero__text-wrap {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── 캐치프레이즈 "여전할 것인가 역전 할 것인가?" ── */
.hero__catch {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
}

.hero__catch-a,
.hero__catch-b,
.hero__catch-c {
  display: inline-block;
}

.hero__catch-b em {
  position: relative;
  font-style: normal;
  font-weight: 900;
  font-size: 1.35em;
  padding: 0 4px;
  color: var(--gold, #c9a84c);
}

/* ── 메인 제목 (H1) ── */
.hero__headline {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 20px;
  word-break: keep-all;
}

.hero__headline em {
  color: var(--gold, #c9a84c);
  font-style: normal;
  font-weight: 900;
}

/* ── 리드 텍스트 ── */
.hero__lead {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 40px;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════
   [3] 버튼 그룹
═══════════════════════════════════════ */
.hero__btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 40px auto;
  background: rgba(0, 0, 0, 0.55);
  padding: 24px 40px;
  width: fit-content;
  border-radius: 4px;
}

.hero__btns .btn-primary {
  animation: heroPulse 2s ease-in-out infinite;
  animation-delay: 3.5s; /* 오프닝 애니메이션 끝난 후 시작 */
}

@keyframes heroPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

/* ═══════════════════════════════════════
   [4] 오프닝 애니메이션 (3초 시나리오)
═══════════════════════════════════════ */

/* 초기 상태: 투명 + 대기 위치 */
.hero__catch-a,
.hero__catch-c,
.hero__headline,
.hero__lead,
.hero__btns {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* "역전" em — 마스크 스윕용 초기 상태 */
.hero__catch-b em {
  background-image: linear-gradient(
    90deg,
    var(--gold, #c9a84c) 0%,
    var(--gold, #c9a84c) 100%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(255, 255, 255, 0.25);
  animation: heroGoldSweep 0.9s 0.9s cubic-bezier(0.6, 0.2, 0.3, 1) forwards;
}

/* ── (0.3s) "여전할 것인가" 왼쪽에서 슬라이드 IN ── */
.hero__catch-a {
  transform: translateX(-40px);
  animation: heroSlideInLeft 0.7s 0.3s forwards;
}

/* ── (1.3s) "할 것인가?" 오른쪽에서 슬라이드 IN ── */
.hero__catch-c {
  transform: translateX(40px);
  animation: heroSlideInRight 0.7s 1.3s forwards;
}

/* ── (1.8s) 헤드라인 fade-up ── */
.hero__headline {
  transform: translateY(30px);
  animation: heroFadeUp 0.9s 1.8s forwards;
}

/* ── (2.1s) 리드 fade-up ── */
.hero__lead {
  transform: translateY(30px);
  animation: heroFadeUp 0.9s 2.1s forwards;
}

/* ── (2.5s) 버튼 그룹 fade-up ── */
.hero__btns {
  transform: translateY(30px);
  animation: heroFadeUp 0.9s 2.5s forwards;
}

/* ── Keyframes ── */
@keyframes heroSlideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes heroSlideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes heroGoldSweep {
  0% {
    background-size: 0% 100%;
    color: rgba(255, 255, 255, 0.25);
  }
  60% {
    color: rgba(255, 255, 255, 0.25);
  }
  100% {
    background-size: 100% 100%;
    color: transparent;
  }
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════
   [5] 워터마크 (배경 장식)
═══════════════════════════════════════ */
.hero__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════
   [6] 스크린리더 전용
═══════════════════════════════════════ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ═══════════════════════════════════════
   [7] 반응형
═══════════════════════════════════════ */

/* ── 태블릿 (1024px 이하) ── */
@media (max-width: 1024px) {
  .hero {
    padding: calc(var(--notice-h, 0px) + var(--nav-h, 80px) + 44px) 7% 60px;
  }
  .hero__catch {
    margin-bottom: 16px;
  }
  .hero__btns {
    padding: 20px 32px;
  }
}

/* ── 모바일 (768px 이하) ── */
@media (max-width: 768px) {
  .hero {
    padding: calc(var(--notice-h, 0px) + var(--nav-h, 80px) + 32px) 5% 48px;
    min-height: 90vh;
  }
  .hero__catch {
    font-size: 0.95rem;
    margin-bottom: 14px;
    gap: 4px;
  }
  .hero__headline {
    letter-spacing: -0.025em;
    line-height: 1.35;
    margin-bottom: 16px;
  }
  .hero__lead {
    line-height: 1.55;
    margin-bottom: 32px;
  }
  .hero__btns {
    padding: 18px 24px;
    gap: 12px;
    flex-wrap: wrap;
  }
}

/* ── 초소형 (480px 이하) ── */
@media (max-width: 480px) {
  .hero {
    padding: calc(var(--notice-h, 0px) + var(--nav-h, 80px) + 24px) 5% 40px;
  }
  .hero__catch {
    font-size: 0.88rem;
  }
  .hero__btns {
    padding: 14px 18px;
    width: 100%;
    max-width: 320px;
  }
  .hero__btns .btn-primary,
  .hero__btns .btn-secondary {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    padding: 10px 12px;
  }
}

/* ═══════════════════════════════════════
   [8] 접근성 — 움직임 줄이기 존중
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero__catch-a,
  .hero__catch-c,
  .hero__headline,
  .hero__lead,
  .hero__btns {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__catch-b em {
    animation: none !important;
    color: var(--gold, #c9a84c) !important;
    background-size: 100% 100% !important;
  }
  .hero__btns .btn-primary {
    animation: none !important;
  }
}