/**
 * ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — image-parallax (v1.0.0)
 * ═══════════════════════════════════════════════════════════════════
 *
 * FOUC 방지 및 필수 스타일
 *
 * slug: image-parallax
 * path: clients/OFFBEAT-STUDIO/02-pages/Studio/parallax-image/index.css
 *
 */

/* ─────────────────────────────────────────────────────────────
   FOUC 방지 (초기 상태)
   ───────────────────────────────────────────────────────────── */
[data-satz="image-parallax"] {
  position: relative;
  overflow: hidden;

  /* Safari 수평이동 버그 방지: 컨테이너에는 3D 속성 제거 */
  /* transform-style, backface-visibility는 이미지에만 적용 */
}

[data-satz="image-parallax"]:not([data-satz-state="ready"]) {
  opacity: 0;
  visibility: hidden;
}

/* ─────────────────────────────────────────────────────────────
   이미지 스타일 (패럴랙스 공간 확보)
   ───────────────────────────────────────────────────────────── */
[data-satz="image-parallax"]>img,
[data-satz="image-parallax"]>video {
  /* 원래대로 block 유지 (absolute는 컨테이너 높이 0 유발) */
  display: block;
  width: 100%;
  height: 120%;
  /* 컨테이너보다 크게 → 이동 공간 확보 */
  object-fit: cover;
  object-position: center center;

  /* ✅ iOS Safari 첫 스크롤 버벅임 방지:
     will-change를 처음부터 걸어서 GPU 레이어를 미리 승격.
     .is-ready 붙을 때 승격되면 그 순간 stutter 발생함. */
  will-change: transform;

  /* Safari GPU 안정화 */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ─────────────────────────────────────────────────────────────
   Ready 상태 (초기화 완료)
   ───────────────────────────────────────────────────────────── */
[data-satz="image-parallax"][data-satz-state="ready"] {
  opacity: 1;
  visibility: visible;
}

[data-satz="image-parallax"].is-ready {
  opacity: 1;
  visibility: visible;
}

/* ─────────────────────────────────────────────────────────────
   Reduce Motion 대응
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  [data-satz="image-parallax"]>img,
  [data-satz="image-parallax"]>video {
    height: 100%;
    /* 패럴랙스 비활성화 시 정상 크기 */
    transform: none !important;
  }
}