/*!
 * ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — highlight-char-reveal (v1.0.0)
 * ═══════════════════════════════════════════════════════════════════
 *
 * 문자별 스태거로 등장하는 하이라이트 텍스트 애니메이션
 * - 뷰포트 진입 시 한 번만 재생 (once)
 * - 마스크 + 회전 + translateY 조합
 * - chars 단위 기본 (lines 전환 가능)
 *
 * slug: highlight-char-reveal
 * domain: text-animation
 * path: clients/OFFBEAT-STUDIO/02-pages/Home/highlight-char-reveal
 * engine: gsap
 * plugins: [ScrollTrigger, SplitText]
 * qa_combo: [fail-soft, reduce-motion, cleanup, idempotent]
 * fallback_policy: soft-disable
 *
 * SSOT / Non-fabrication:
 * - 본 파일은 코드/정책에 실제로 존재하는 값만 기입한다.
 * - 추가 지시 없이는 새로운 data-role/data-satz-variant를 설계하지 않는다.
 *
 * Docs Used: @AI_CONTEXT_BRIEF.md, @BLOCK_IMPLEMENTATION_PATTERNS.md
 * Decision Matrix: @core/AGENT_WORKFLOW.md#routing-decision-matrix
 *
 * ═══════════════════════════════════════════════════════════════════
 * 🎯 Webflow Designer — 필수 설정
 * ═══════════════════════════════════════════════════════════════════
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 1️⃣ Container Attribute 추가                                    │
 * └─────────────────────────────────────────────────────────────────┘
 *
 * 📍 대상: 텍스트들을 감싸는 래퍼 (Div Block)
 *
 * Designer → Div Block 선택 → Settings → Custom Attributes:
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz                      │
 * │ Value: highlight-char-reveal         │
 * └──────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 2️⃣ 옵션 Attributes (선택)                                      │
 * └─────────────────────────────────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-split                │
 * │ Value: chars | lines (기본: chars)   │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-trigger              │
 * │ Value: parent | .선택자 (기본: 자신) │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-start                │
 * │ Value: top 80% (기본)                │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-rotate               │
 * │ Value: 10 (각도, 기본: 10)           │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-stagger              │
 * │ Value: 0.05 (초, 기본: 0.05)         │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-duration             │
 * │ Value: 0.8 (초, 기본: 0.8)           │
 * └──────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════
 * 📐 구조 예시 (Webflow Navigator)
 * ═══════════════════════════════════════════════════════════════════
 *
 * Div Block [data-satz="highlight-char-reveal"]  ← 래퍼 (마스크)
 *   └─ Heading "featured portrait"
 *
 * 또는 lines 단위 분리:
 *
 * Div Block [data-satz="highlight-char-reveal"] [data-satz-split="lines"]
 *   ├─ Heading "HONDA"
 *   └─ Heading "S2000"
 *
 */

/* ─────────────────────────────────────────────────────────────
   CSS Variables (커스터마이징용)
   ───────────────────────────────────────────────────────────── */
:root {
  --hcr-rotate: 10deg;
  --hcr-translate-y: 120%;
  --hcr-transform-origin: left bottom;
}

/* ─────────────────────────────────────────────────────────────
   Container (마스크 역할)
   ───────────────────────────────────────────────────────────── */
[data-satz="highlight-char-reveal"] {
  position: relative;
  overflow: hidden;
  /* 마스크 핵심! */
}

/* ─────────────────────────────────────────────────────────────
   FOUC 방지 (초기 상태)
   ───────────────────────────────────────────────────────────── */
[data-satz="highlight-char-reveal"]:not([data-satz-state="ready"]) {
  /* 초기화 전에는 내용 숨김 */
  visibility: hidden;
}

[data-satz="highlight-char-reveal"][data-satz-state="ready"] {
  visibility: visible;
}

/* ─────────────────────────────────────────────────────────────
   SplitText로 생성된 라인/글자 래퍼
   ───────────────────────────────────────────────────────────── */
[data-satz="highlight-char-reveal"] .line-wrapper {
  overflow: hidden;
  /* 각 라인별 마스크 */
  display: block;
  /* 레이아웃 격리로 리플로우 범위 제한 */
  contain: layout style;
}

[data-satz="highlight-char-reveal"] .split-line,
[data-satz="highlight-char-reveal"] .split-char {
  display: inline-block;
  transform-origin: var(--hcr-transform-origin);
  /* 
   * Safari 모바일 성능 최적화:
   * - will-change 제거 (GPU 레이어 과다 생성 방지)
   * - backface-visibility: hidden으로 안정적인 GPU 가속 유도
   * - translateZ(0)는 GSAP이 force3D로 자동 적용
   */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 레이아웃 격리 */
  contain: layout style;
}

/* ─────────────────────────────────────────────────────────────
   Reduce Motion 대응
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-satz="highlight-char-reveal"] {
    visibility: visible !important;
  }

  [data-satz="highlight-char-reveal"] .split-line,
  [data-satz="highlight-char-reveal"] .split-char {
    transform: none !important;
    opacity: 1 !important;
  }
}