:root{
  /* Title (PC/모바일 동일 체감) */
  --fx-title-distance: 160px;
  --fx-title-duration: 900ms;
  --fx-title-ease: cubic-bezier(.22,.61,.36,1);

  /* Body item(선택) */
  --fx-item-distance: 40px;
  --fx-item-duration: 520ms;
  --fx-item-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============ Title (fx-title) ============ */
.fx-title{
  opacity: 0;
  transform: translate3d(0, calc(-1 * var(--fx-title-distance)), 0);
  transition:
    transform var(--fx-title-duration) var(--fx-title-ease),
    opacity   var(--fx-title-duration) var(--fx-title-ease);
  will-change: transform, opacity;
}
.fx-title.fx-in{
  opacity: 1;
  transform: none;
}

/* 타이틀 내부 장식/아이콘을 부모와 동기화 */
.fx-title::before,
.fx-title::after{ transition: none !important; transform: none !important; }
.fx-title .fas,
.fx-title .far,
.fx-title .fal,
.fx-title .fab,
.fx-title i{ transition: none !important; transform: none !important; }

/* 내부에 css3-animate-it 잔여 시 중복 모션 차단 */
.fx-title .animated{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ============ Item (fx-item) — 선택 사용 ============ */
.fx-item{
  opacity: 0;
  transform: translate3d(0, var(--fx-item-distance), 0);
  transition:
    transform var(--fx-item-duration) var(--fx-item-ease),
    opacity   var(--fx-item-duration) var(--fx-item-ease);
  will-change: transform, opacity;
}
.fx-item.fx-in{
  opacity: 1;
  transform: none;
}

/* 접근성 */
@media (prefers-reduced-motion: reduce){
  .fx-title,
  .fx-title.fx-in,
  .fx-item,
  .fx-item.fx-in{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}