/* ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — Text Reveal (v1.0)
 * ═══════════════════════════════════════════════════════════════════
 *
 * 텍스트가 마스크 아래에서 위로 스르륵 올라오며 등장하는 애니메이션.
 * GSAP + SplitType 기반.
 *
 * ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
 * CSS Variables
 * ───────────────────────────────────────────────────────────────── */
:root {
  --tr-duration: 0.6s;
  --tr-ease: cubic-bezier(0.33, 1, 0.68, 1);
  /* power3.out 근사 */
  --tr-stagger: 0.1s;
}

/* ─────────────────────────────────────────────────────────────────
 * FOUC Prevention Gate
 * ───────────────────────────────────────────────────────────────── */
[data-satz="text-reveal"] {
  opacity: 0;
  visibility: hidden;
}

html.satz-pending [data-satz="text-reveal"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.satz-ready [data-satz="text-reveal"] {
  opacity: 1;
  visibility: visible;
}

/* 측정 모드: 줄 분할 시 레이아웃 계산을 위해 잠시 visible */
[data-satz="text-reveal"].tr-measuring {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ─────────────────────────────────────────────────────────────────
 * Mask Reveal Structure
 * ───────────────────────────────────────────────────────────────── */

/* 마스크 래퍼: overflow hidden으로 자식 요소 클리핑 */
[data-satz="text-reveal"] .tr-line {
  display: block;
  overflow: hidden;
}

/* 애니메이션 대상: 아래에서 위로 등장 */
[data-satz="text-reveal"] .tr-line-inner {
  display: inline-block;
  will-change: transform;
}

/* SplitType line 클래스 대응 */
[data-satz="text-reveal"] .line {
  display: inline-block;
  will-change: transform;
}

/* Word 및 Char 요소 */
[data-satz="text-reveal"] .tr-word,
[data-satz="text-reveal"] .word {
  display: inline-block;
  will-change: transform;
}

[data-satz="text-reveal"] .tr-word {
  white-space: pre;
}

/* ─────────────────────────────────────────────────────────────────
 * Animation State Classes
 * ───────────────────────────────────────────────────────────────── */
[data-satz="text-reveal"].is-animating {
  pointer-events: none;
}

[data-satz="text-reveal"][data-satz-state="done"] {
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────────────
 * Reduce Motion Support
 * ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-satz="text-reveal"] {
    opacity: 1 !important;
    visibility: visible !important;
  }

  [data-satz="text-reveal"] .tr-line-inner,
  [data-satz="text-reveal"] .line,
  [data-satz="text-reveal"] .tr-word,
  [data-satz="text-reveal"] .word {
    transform: none !important;
    will-change: auto;
  }
}