/*!
 * ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — text-rotate-reveal (v1.0.0)
 * ═══════════════════════════════════════════════════════════════════
 *
 * 회전하며 등장/퇴장하는 텍스트 애니메이션
 * - 스크롤 scrub 방식
 * - 마스크 + 회전 + translateY 조합
 * - chars/lines 단위 스위칭 가능
 *
 * slug: text-rotate-reveal
 * domain: text-animation
 * path: clients/OFFBEAT-STUDIO/02-pages/Home/text-rotate-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: text-rotate-reveal            │
 * └──────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 2️⃣ 옵션 Attributes (선택)                                      │
 * └─────────────────────────────────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-split                │
 * │ Value: lines | chars (기본: lines)   │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-trigger              │
 * │ Value: parent | .선택자 (기본: 자신) │
 * │ → sticky 사용 시 부모 섹션을 지정!   │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-start                │
 * │ Value: top top (기본: top 80%)       │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-end                  │
 * │ Value: bottom bottom (기본: bottom 20%)│
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-rotate               │
 * │ Value: 10 (각도, 기본: 10)           │
 * └──────────────────────────────────────┘
 *
 * ┌──────────────────────────────────────┐
 * │ Name: data-satz-stagger              │
 * │ Value: 0.05 (초, 기본: 0.05)         │
 * └──────────────────────────────────────┘
 *
 * ═══════════════════════════════════════════════════════════════════
 * 📐 구조 예시 (Webflow Navigator)
 * ═══════════════════════════════════════════════════════════════════
 *
 * Div Block [data-satz="text-rotate-reveal"]  ← 래퍼 (마스크)
 *   ├─ Heading "HONDA"
 *   ├─ Heading "S2000"
 *   └─ Paragraph "Description..."
 *
 * 또는 단일 텍스트 + chars 분리:
 *
 * Div Block [data-satz="text-rotate-reveal"] [data-satz-split="chars"]
 *   └─ Heading "HONDA S2000"
 *
 */

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

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

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

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

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

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

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

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