/*!
 * ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — hover-underline-reveal (v1.0.0)
 * ═══════════════════════════════════════════════════════════════════
 *
 * 링크 아래에 방향성 언더라인을 생성해 hover·focus 시 부드럽게 확장합니다.
 *
 * ═══════════════════════════════════════════════════════════════════
 * 🎯 Webflow Designer — 필수 3단계 (MUST)
 * ═══════════════════════════════════════════════════════════════════
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 1️⃣ Link/Text Attribute 추가 (필수!)                             │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   📍 대상: 강조할 링크·버튼·텍스트 요소
 *
 *   Designer → 요소 선택 → Settings → Custom Attributes:
 *   ┌──────────────────────────────────────┐
 *   │ Name:  data-satz                     │
 *   │ Value: hover-underline-reveal        │
 *   └──────────────────────────────────────┘
 *
 *   💡 역할: 언더라인 애니메이션이 적용될 대상 요소를 지정
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 2️⃣ State Attribute 설정 (선택)                                  │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   현재 페이지나 활성 탭을 항상 강조하려면:
 *   ┌──────────────────────────────────────┐
 *   │ Name:  data-satz-state               │
 *   │ Value: active                        │
 *   └──────────────────────────────────────┘
 *
 *   💡 역할: 기본 상태에서도 언더라인이 펼쳐진 채로 유지
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 3️⃣ Variant Attribute 설정 (선택)                                │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   언더라인 전개 방향을 바꾸려면:
 *   ┌──────────────────────────────────────┐
 *   │ Name:  data-satz-variant             │
 *   │ Value: ltr | rtl                     │
 *   └──────────────────────────────────────┘
 *
 *   💡 역할: transform-origin을 좌→우 또는 우→좌로 지정
 *
 * ═══════════════════════════════════════════════════════════════════
 * 📐 구조 예시 (Webflow Navigator)
 * ═══════════════════════════════════════════════════════════════════
 *
 *   Link Block [data-satz="hover-underline-reveal"]
 */

:root {
  --hover-underline-reveal-color: currentColor;
  --hover-underline-reveal-thickness: 0.125rem;
  --hover-underline-reveal-offset: -0.05em;
  --hover-underline-reveal-opacity: 0.9;
  --hover-underline-reveal-duration: 0.35s;
  --hover-underline-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-satz="hover-underline-reveal"],
.hover-underline

/* @deprecated: .hover-underline */
  {
  position: relative;
  text-decoration: none;
  color: inherit;

  --_underline-color: var(--underline-color, var(--hover-underline-reveal-color));
  --_underline-thickness: var(--underline-thickness, var(--hover-underline-reveal-thickness));
  --_underline-offset: var(--underline-offset, var(--hover-underline-reveal-offset));
  --_underline-opacity: var(--underline-opacity, var(--hover-underline-reveal-opacity));
  --_underline-duration: var(--underline-duration, var(--hover-underline-reveal-duration));
  --_underline-ease: var(--underline-ease, var(--hover-underline-reveal-ease));

  --_underline-transform-inactive: scaleX(0);
  --_underline-transform-active: scaleX(1);
  --_underline-origin: left center;
}

:is([data-satz="hover-underline-reveal"], .hover-underline)::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: var(--_underline-offset);
  inline-size: 100%;
  block-size: var(--_underline-thickness);
  background: var(--_underline-color);
  transform: var(--_underline-transform-inactive);
  transform-origin: var(--_underline-origin);
  transition: transform var(--_underline-duration) var(--_underline-ease);
  opacity: var(--_underline-opacity);
  pointer-events: none;
  will-change: transform;
}

:is([data-satz="hover-underline-reveal"], .hover-underline):is(:hover, :focus-visible, :focus-within)::after {
  transform: var(--_underline-transform-active);
}

[data-satz="hover-underline-reveal"][data-satz-state="active"]::after {
  transform: var(--_underline-transform-active);
}

/* @deprecated: .hover-underline.is-active */
.hover-underline.is-active::after {
  transform: var(--_underline-transform-active);
}

[data-satz="hover-underline-reveal"][data-satz-variant="rtl"] {
  --_underline-origin: right center;
}

/* @deprecated: .hover-underline.from-right */
.hover-underline.from-right {
  --_underline-origin: right center;
}

@media (prefers-reduced-motion: reduce) {
  :is([data-satz="hover-underline-reveal"], .hover-underline)::after {
    transition: none;
    transform: var(--_underline-transform-active);
    will-change: auto;
  }
}