/*!
 * ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — hover-scale-brighten (v0.1.0)
 * ═══════════════════════════════════════════════════════════════════
 *
 * 이미지나 비디오를 살짝 확대하고 밝게 만들어 hover 상태를 강조합니다.
 *
 * ═══════════════════════════════════════════════════════════════════
 * 🎯 Webflow Designer — 필수 3단계 (MUST)
 * ═══════════════════════════════════════════════════════════════════
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 1️⃣ Media Wrapper Attribute 추가 (필수!)                         │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   📍 대상: 이미지/비디오를 감싸는 래퍼 Div Block
 *
 *   Designer → 래퍼 선택 → Custom Attributes:
 *   ┌──────────────────────────────────────┐
 *   │ Name:  data-satz                     │
 *   │ Value: hover-scale-brighten          │
 *   └──────────────────────────────────────┘
 *
 *   💡 역할: overflow 및 transform 토큰을 제어하는 루트
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 2️⃣ Media Child 배치                                              │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   📍 대상: 래퍼의 직계 자식 (img, picture, video, .media 등)
 *   💡 역할: scale 및 filter 애니메이션이 적용되는 실제 미디어 요소
 *   ⚠️ 참고: 래퍼 바로 아래에 배치해야 `> :is(...)` 선택자가 동작합니다.
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 3️⃣ CSS 변수 조정 (선택)                                         │
 * └─────────────────────────────────────────────────────────────────┘
 *
 *   브랜드 톤에 맞춰 다음 토큰을 재정의하세요:
 *   `--hsb-scale`, `--hsb-brightness`, `--hsb-contrast`, `--hsb-duration`, `--hsb-overscan`
 *
 * ═══════════════════════════════════════════════════════════════════
 * 📐 구조 예시 (Webflow Navigator)
 * ═══════════════════════════════════════════════════════════════════
 *
 *   Div Block [data-satz="hover-scale-brighten"]
 *     └─ Image / Video
 */

[data-satz="hover-scale-brighten"] {
  overflow: hidden;
  position: relative;
  --hsb-scale: 1.08;
  --hsb-brightness: 1.05;
  --hsb-contrast: 1.05;
  --hsb-duration: 0.6s;
  --hsb-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --hsb-overscan: 0px;
  --hsb-scale-reduced: 1.016;
  --hsb-brightness-reduced: 1.01;
  --hsb-contrast-reduced: 1.01;
}

[data-satz="hover-scale-brighten"]> :is(img, picture, .media, video) {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: calc(var(--hsb-overscan) * -1);
  transform-origin: center center;
  transform: scale(1);
  filter: brightness(1) contrast(1);
  transition:
    transform var(--hsb-duration) var(--hsb-ease),
    filter var(--hsb-duration) var(--hsb-ease);
  backface-visibility: hidden;
  will-change: transform, filter;
}

[data-satz="hover-scale-brighten"]>picture>img {
  display: block;
  width: 100%;
  height: 100%;
}

[data-satz="hover-scale-brighten"]:focus-visible {
  outline: auto;
}

[data-satz="hover-scale-brighten"]:is(:hover, :focus-visible)> :is(img, picture, .media, video) {
  transform: scale(var(--hsb-scale));
  filter: brightness(var(--hsb-brightness)) contrast(var(--hsb-contrast));
}

@media (prefers-reduced-motion: reduce) {
  [data-satz="hover-scale-brighten"] {
    --hsb-scale-reduced: calc(1 + (var(--hsb-scale) - 1) * 0.2);
    --hsb-brightness-reduced: calc(1 + (var(--hsb-brightness) - 1) * 0.2);
    --hsb-contrast-reduced: calc(1 + (var(--hsb-contrast) - 1) * 0.2);
    transition: none;
  }

  [data-satz="hover-scale-brighten"]> :is(img, picture, .media, video) {
    transition: none;
  }

  [data-satz="hover-scale-brighten"]:is(:hover, :focus-visible)> :is(img, picture, .media, video) {
    transform: scale(var(--hsb-scale-reduced));
    filter:
      brightness(var(--hsb-brightness-reduced)) contrast(var(--hsb-contrast-reduced));
  }
}