/* ═══════════════════════════════════════════════════════════
   animations.css — 바이탈바이브 SG
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero H1 라인 리빌 ─────────────────────────────────── */
.hero__h1-wrap {
  overflow: hidden;
}
.hero__h1-line {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  animation: lineReveal .9s var(--ease-out) forwards;
}
.hero__h1-line:nth-child(2) { animation-delay: .15s; }
.hero__h1-line:nth-child(3) { animation-delay: .3s; }

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

/* ─── 히어로 콘텐츠 페이드 ──────────────────────────────── */
.hero__eyebrow { animation: fadeInUp .7s var(--ease-out) .2s both; }
.hero__sub     { animation: fadeInUp .7s var(--ease-out) .5s both; }
.hero__cta     { animation: fadeInUp .7s var(--ease-out) .65s both; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Trust Strip 카운트 애니메이션 ─────────────────────── */
.trust-item__num[data-count] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.trust-item__num[data-count].counted {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 3D 카드 틸트 ──────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .3s var(--ease-out);
}

/* ─── 섹션 진입 애니메이션 변형들 ───────────────────────── */
.anim-fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.anim-fade-left.is-visible { opacity: 1; transform: translateX(0); }

.anim-fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.anim-fade-right.is-visible { opacity: 1; transform: translateX(0); }

/* ─── 자연 흔들림 (로컬·내추럴 무드) ───────────────────── */
@keyframes sway {
  0%, 100% { transform: rotate(-1deg); }
  50%       { transform: rotate(1deg); }
}
.anim-sway { animation: sway 4s ease-in-out infinite; }

/* ─── 페이지 전환 ────────────────────────────────────────── */
.page-transition {
  animation: pageFadeIn .5s var(--ease-out) both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 플로팅 버튼 등장 ──────────────────────────────────── */
.float-cta {
  animation: floatIn .5s var(--ease-out) 1s both;
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 배경 패럴랙스 (JS 보조) ───────────────────────────── */
.parallax-bg {
  will-change: transform;
}

/* ─── 줄 장식 ───────────────────────────────────────────── */
.deco-line {
  display: inline-block;
  width: 40px; height: 1px;
  background: var(--primary);
  vertical-align: middle;
  margin-right: .75rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out) .2s;
}
.is-visible .deco-line { transform: scaleX(1); }

/* ─── 이미지 줌 호버 ────────────────────────────────────── */
.img-zoom-wrap {
  overflow: hidden;
  border-radius: var(--radius);
}
.img-zoom-wrap img {
  transition: transform .6s var(--ease-out);
}
.img-zoom-wrap:hover img { transform: scale(1.06); }