/*!
 * ══════════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — HoverSiblingColor (0.1.0)
 * ══════════════════════════════════════════════════════════════════════
 *
 * slug: sbl-text-hover-000-sibling-color
 * domain: text
 * path: blocks/text/01-hover/000-sibling-color
 * engine: css-first
 * plugins: []
 * qa_combo: ["fail-soft","reduce-motion","cleanup","idempotent"]
 * fallback_policy: soft-disable
 *
 * SSOT / Non-fabrication:
 * - README가 단일 정본입니다. 본 주석은 구현 요약만 제공합니다.
 * - 명시된 data-satz / 옵션 외 새로운 데이터 스키마를 추가하지 않습니다.
 * - 코드에서 확인되지 않은 옵션·구조는 Designer Quick Box에 기재하지 않습니다.
 *
 * Docs Used: docs/core/AI_CONTEXT_BRIEF.md#ltm-ppp; docs/core/QUALITY_CHECKLIST.md#qa-core; docs/core/BLOCK_IMPLEMENTATION_PATTERNS.md#4-c-hover-trigger-접근성-포함; docs/core/GSAP_ENV.md#fail-soft-examples; docs/core/COMMENT_TEMPLATE.md#block-header; docs/router/ROUTER_INDEX.md#core-routing; docs/registry/BLOCK_REGISTRY.md#text-hover
 * Decision Matrix:
 * - Routing: text → hover → css-first (docs/router/ROUTER_INDEX.md#core-routing)
 * - Trigger: hover/focus within scope; target: `.satz-hover-item` siblings dim (docs/core/BLOCK_IMPLEMENTATION_PATTERNS.md#4-c-hover-trigger-접근성-포함)
 * - Reduce Motion: transition collapses to instant (docs/core/QUALITY_CHECKLIST.md#qa-core)
 * - Cleanup: CSS primary, JS fallback resets classes (docs/core/QUALITY_CHECKLIST.md#qa-core)
 *
 * Webflow Designer — MUST:
 * 1) 컨테이너(`[data-satz="hover-sibling-color"]`)에 flex · gap을 지정해 정렬을 잡습니다.
 * 2) 아이템마다 `.satz-hover-item` 클래스를 부여하고 기본 텍스트 색을 토큰으로 선언합니다.
 * 3) `data-satz-active|inactive|duration` 값이 필요할 경우 컨테이너 Settings → Custom Attributes에 입력합니다.
 */

[data-satz="hover-sibling-color"] {
  --satz-hover-active: #111;
  --satz-hover-inactive: #9aa0a6;
  --satz-hover-duration: 180ms;
  --satz-hover-ease: ease-out;
}

[data-satz="hover-sibling-color"] .satz-hover-item {
  color: var(--satz-hover-active);
  fill: var(--satz-hover-active);
  transition-property: color, fill;
  transition-duration: var(--satz-hover-duration);
  transition-timing-function: var(--satz-hover-ease);
}

[data-satz="hover-sibling-color"] .satz-hover-item:visited {
  color: var(--satz-hover-active);
}

[data-satz="hover-sibling-color"][data-satz-prop="fill"] .satz-hover-item {
  color: inherit;
}

[data-satz="hover-sibling-color"]:has(.satz-hover-item:is(:hover, :focus-visible)) .satz-hover-item {
  color: var(--satz-hover-inactive);
  fill: var(--satz-hover-inactive);
}

[data-satz="hover-sibling-color"]:has(.satz-hover-item:is(:hover, :focus-visible)) .satz-hover-item:is(:hover, :focus-visible) {
  color: var(--satz-hover-active);
  fill: var(--satz-hover-active);
}

[data-satz="hover-sibling-color"]:has(.satz-hover-item:is(:hover, :focus-visible)) .satz-hover-item:visited {
  color: var(--satz-hover-inactive);
}

[data-satz="hover-sibling-color"]:has(.satz-hover-item:is(:hover, :focus-visible)) .satz-hover-item:is(:hover, :focus-visible):visited {
  color: var(--satz-hover-active);
}

[data-satz="hover-sibling-color"].is-hovering .satz-hover-item,
[data-satz="hover-sibling-color"].is-dim .satz-hover-item {
  color: var(--satz-hover-inactive);
  fill: var(--satz-hover-inactive);
}

[data-satz="hover-sibling-color"].is-hovering .satz-hover-item.is-active,
[data-satz="hover-sibling-color"].is-dim .satz-hover-item.is-active {
  color: var(--satz-hover-active);
  fill: var(--satz-hover-active);
}

[data-satz="hover-sibling-color"].is-hovering .satz-hover-item.is-active:visited,
[data-satz="hover-sibling-color"].is-dim .satz-hover-item.is-active:visited {
  color: var(--satz-hover-active);
}

@media (prefers-reduced-motion: reduce) {
  [data-satz="hover-sibling-color"] .satz-hover-item {
    transition-duration: 0.01ms;
  }
}

/* Trace
 * Engine: css
 * Output Combo: A
 * Docs Used: docs/core/AI_CONTEXT_BRIEF.md#ltm-ppp; docs/core/QUALITY_CHECKLIST.md#qa-core; docs/core/BLOCK_IMPLEMENTATION_PATTERNS.md#4-c-hover-trigger-접근성-포함; docs/core/GSAP_ENV.md#fail-soft-examples; docs/router/ROUTER_INDEX.md#core-routing; docs/registry/BLOCK_REGISTRY.md#text-hover
 * QA: FOUC: pass | Reduce-Motion: pass | Cleanup: pass | Idempotent: pass
 * Fallback: true (js class toggle when :has unsupported)
 */