/* ─────────────────────────────────────────
   motion.css — JESUS KOREA CHURCH
   transform + opacity 전용 모션 시스템
──────────────────────────────────────────── */

/* ── 접근성: 모션 감소 선호 사용자 ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ── Ken Burns 히어로 배경 ── */
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}
.hero-kenburns {
  animation: kenburns 14s ease-in-out infinite alternate;
  will-change: transform;
  transform-origin: center center;
}

/* ── 히어로 텍스트 순차 페이드인 ── */
.hero-title-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}
.hero-slogan-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease 0.45s, transform 0.8s ease 0.45s;
}
.hero-btn-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease 0.65s, transform 0.7s ease 0.65s;
}
.hero-title-reveal.is-visible,
.hero-slogan-reveal.is-visible,
.hero-btn-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── 스크롤 reveal 초기 상태 ── */
.reveal {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* ── 스크롤 reveal 표시 상태 ── */
.reveal.is-visible,
.reveal-up.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Stagger 컨테이너: 직접 자식에 순차 딜레이 ── */
.stagger-list > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-list.is-visible > * {
  opacity: 1;
  transform: none;
}
.stagger-list.is-visible > *:nth-child(1)  { transition-delay:   0ms; }
.stagger-list.is-visible > *:nth-child(2)  { transition-delay:  90ms; }
.stagger-list.is-visible > *:nth-child(3)  { transition-delay: 180ms; }
.stagger-list.is-visible > *:nth-child(4)  { transition-delay: 270ms; }
.stagger-list.is-visible > *:nth-child(5)  { transition-delay: 360ms; }
.stagger-list.is-visible > *:nth-child(6)  { transition-delay: 450ms; }
.stagger-list.is-visible > *:nth-child(7)  { transition-delay: 540ms; }
.stagger-list.is-visible > *:nth-child(8)  { transition-delay: 630ms; }
.stagger-list.is-visible > *:nth-child(9)  { transition-delay: 720ms; }
.stagger-list.is-visible > *:nth-child(10) { transition-delay: 810ms; }
.stagger-list.is-visible > *:nth-child(11) { transition-delay: 900ms; }
.stagger-list.is-visible > *:nth-child(12) { transition-delay: 990ms; }

/* ── 카드 호버 리프트 ── */
.motion-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  will-change: transform;
}
.motion-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.13);
}

/* ── 이미지 스프링 줌 (image-zoom-wrap 래퍼에 overflow:hidden 필수) ── */
.image-zoom-wrap {
  overflow: hidden;
}
.image-spring-zoom {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-zoom-wrap:hover .image-spring-zoom {
  transform: scale(1.07);
}

/* ── 갤러리 썸네일 스프링 줌 ── */
.gallery-board-card .gallery-board-thumb {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.gallery-board-card:hover .gallery-board-thumb {
  transform: scale(1.07);
}

/* ── CTA 버튼 프레스 피드백 ── */
.motion-button {
  transition: transform 0.12s ease, box-shadow 0.12s ease,
              background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease;
}
.motion-button:active {
  transform: scale(0.96);
}