/* static/css/motion.css — 바닐라 모션 엔진 스타일
 * reveal.js(스크롤 리빌, GSAP ScrollTrigger 대체)
 * splitTextIn.js(히어로 글자 등장, GSAP SplitText 대체)
 * 각 JS 유틸이 클래스를 토글한다. prefers-reduced-motion 시 즉시 표시. */

/* ─── 스크롤 리빌 ─── */
[data-reveal] > .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal] > .reveal-item.reveal-shown {
  opacity: 1;
  transform: none;
}

/* ─── 히어로 글자 등장 (SplitText 대체) ─── */
/* 단어 내부 글자 사이 줄바꿈 방지 — splitTextIn.js가 단어별로 이 컨테이너에 글자를 묶는다.
   background는 상속 프로퍼티가 아니라서, 이 래퍼가 h1과 .split-char 사이에 끼면
   그라데이션 텍스트(-webkit-background-clip:text)의 inherit 체인이 끊겨 글자가
   투명 배경(안 보임)이 된다 — 아래 4개 프로퍼티로 체인을 한 단계 더 이어준다. */
.split-word {
  display: inline-block; white-space: nowrap;
  background: inherit; -webkit-background-clip: inherit; background-clip: inherit;
  -webkit-text-fill-color: inherit; color: inherit;
}
.split-char {
  display: inline-block;
  opacity: 0;
  /* % 대신 em — %는 span의 line-height 기준 박스 높이에 비례해 폰트마다
     체감 이동거리가 달라진다(한글 대응 가변폰트는 라틴 폰트보다 라인박스
     메트릭이 커서 더 아래에서 시작하는 것처럼 보임). em은 font-size에만
     비례해 언어/폰트 메트릭과 무관하게 이동거리가 일정하다. */
  transform: translateY(0.75em) rotate(4deg);
  /* 그라데이션 텍스트(-webkit-background-clip:text)를 글자별로 유지 */
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
  -webkit-text-fill-color: inherit;
  color: inherit;
}
.split-char.split-in {
  animation: split-char-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes split-char-in {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] > .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .split-char {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}