/*
  Image Swap Slide — Developing + Grain Texture Variant
  -----------------------------------------------------
  Base idea:
  - 기본 상태: base 이미지가 또렷하게 보이고, alt 이미지는 숨겨져 있음.
  - 호버 시:
    1) base가 어두워지면서 서서히 사라지고,
    2) 컨테이너 위에 거친 필름/노이즈 질감이 잠깐 강하게 깔렸다가,
    3) alt가 blur + grayscale + dark 상태에서 서서히 "현상"되며 등장,
    4) 마지막에는 alt 이미지는 깨끗하게, 노이즈는 살짝만 남거나 거의 안 보이게.

  Notes:
  - HTML 구조 변경 없이, 컨테이너의 ::before 오버레이만 추가해서 구현.
  - Webflow에서 data-satz="image-swap-slide" 구조 그대로 사용 가능.
*/

[data-satz="image-swap-slide"] {
  --dur: 1.08s;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --radius: 0px;
  --blur-amount: 15px;
  --start-brightness: 0.6;
  /* alt 시작 밝기 (0~1) */
  --noise-max-opacity: 0.35;
  /* 호버 초반, 가장 거친 질감 농도 */
  --noise-final-opacity: 0.12;
  /* 호버 후반, 거의 정착했을 때 남길 정도의 질감 */
  --grain-size: 150px;
  /* 노이즈 타일 크기 (작을수록 촘촘한 그레인) */

  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
}

/* 공통 이미지 레이어 설정 */
[data-satz="image-swap-slide"] :where([data-role="base"], [data-role="alt"]) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* 1. Base 이미지 — 기본은 깨끗한 상태, 호버 시 어두워지며 사라짐 */
[data-satz="image-swap-slide"] [data-role="base"] {
  z-index: 1;
  opacity: 1;
  filter: brightness(1);
  transition:
    opacity calc(var(--dur) / 2) var(--ease),
    filter calc(var(--dur) / 2) var(--ease);
}

/* 2. Alt 이미지 — 어둡고, 흐리고, 흑백 상태에서 현상되듯 등장 */
[data-satz="image-swap-slide"] [data-role="alt"] {
  z-index: 2;
  opacity: 0;
  filter:
    blur(var(--blur-amount)) grayscale(100%) brightness(var(--start-brightness));
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  transition:
    opacity var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  will-change: opacity, filter;
}

/* 3. 노이즈 / 필름 그레인 오버레이 — 컨테이너 위에 얹히는 질감 레이어 */
[data-satz="image-swap-slide"]:has([data-role="alt"])::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  /* base, alt 둘 다 위에 올라가도록 */

  /* 필름 그레인 노이즈 텍스처 (Base64 인라인 SVG) */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: var(--grain-size) var(--grain-size);
  mix-blend-mode: overlay;

  opacity: 0;
  /* 기본 상태에서는 보이지 않게 */
  /* 호버 인/아웃은 animation으로 제어 (아래 keyframes 참고) */
}

/* 4. Hover / Focus 시 상태 변화 */

[data-satz="image-swap-slide"]:where(:hover, :focus-visible, :focus-within):has([data-role="alt"]) [data-role="base"] {
  /* base는 약간 더 어두워지면서 페이드 아웃 */
  opacity: 0;
  filter: brightness(0.6);
  transition-delay: 0.08s;
  /* alt 현상과 살짝 겹치도록 미묘한 딜레이 */
}

[data-satz="image-swap-slide"]:where(:hover, :focus-visible, :focus-within) [data-role="alt"] {
  opacity: 1;
  /* blur / grayscale / brightness를 서서히 풀어서 "현상" 느낌 */
  filter:
    blur(0) grayscale(0%) brightness(1);
}

/* Hover 시 노이즈 오버레이 — 초반에 강하게, 후반에 살짝만 남도록 */
[data-satz="image-swap-slide"]:has([data-role="alt"]):where(:hover, :focus-visible, :focus-within)::before {
  animation: satz-image-swap-noise-in var(--dur) var(--ease) forwards;
}

/* Hover가 끝났을 때는 부드럽게 노이즈 제거 */
[data-satz="image-swap-slide"]:has([data-role="alt"]):not(:hover):not(:focus-visible):not(:focus-within)::before {
  animation: satz-image-swap-noise-out 0.25s ease-out forwards;
}

/* 5. 노이즈 애니메이션 정의 */
/* 호버 인: 0 → (강한 노이즈) → (살짝 남긴 상태) */
@keyframes satz-image-swap-noise-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  18% {
    opacity: var(--noise-max-opacity);
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: var(--noise-final-opacity);
    transform: translate3d(0, 0, 0);
  }
}

/* 호버 아웃: 남아 있던 노이즈를 빠르게 걷어내기 */
@keyframes satz-image-swap-noise-out {
  0% {
    opacity: var(--noise-final-opacity);
  }

  100% {
    opacity: 0;
  }
}

/* 6. 접근성: 움직임 최소화 환경에서는 효과 단순화 */
@media (prefers-reduced-motion: reduce) {

  [data-satz="image-swap-slide"] [data-role="base"],
  [data-satz="image-swap-slide"] [data-role="alt"] {
    transition: none;
  }

  [data-satz="image-swap-slide"]::before {
    animation: none;
    opacity: 0;
    /* 노이즈 레이어 비활성화 */
  }
}