/* ==========================================================================
   WEBDOT Scroll Reveal — 공통 CSS 유틸리티

   사용법: 다른 코드 아카이브에서 이 파일을 링크하면 data-wd-reveal 속성만으로
   스크롤 진입 애니메이션을 적용할 수 있음.

   <link rel="stylesheet" href="상대경로/_shared/wd-scroll-reveal.css">
   <script src="상대경로/_shared/lib/wd-scroll-reveal.js"></script>
   ========================================================================== */

:root {
  --wd-reveal-distance: 30px;
  --wd-reveal-duration: 0.8s;
  --wd-reveal-easing: ease-in-out;
}

/* Base */
[data-wd-reveal] {
  transition-duration: var(--wd-reveal-duration);
  transition-timing-function: var(--wd-reveal-easing);
  pointer-events: none;
  will-change: transform, opacity;
}
[data-wd-reveal].wd-revealed {
  pointer-events: auto;
}

/* Fade variants */
[data-wd-reveal^="fade"] {
  opacity: 0;
  transition-property: opacity, transform;
}
[data-wd-reveal^="fade"].wd-revealed {
  opacity: 1;
  transform: none;
}
[data-wd-reveal="fade-up"] {
  transform: translate3d(0, var(--wd-reveal-distance), 0);
}
[data-wd-reveal="fade-down"] {
  transform: translate3d(0, calc(var(--wd-reveal-distance) * -1), 0);
}
[data-wd-reveal="fade-right"] {
  transform: translate3d(calc(var(--wd-reveal-distance) * -1), 0, 0);
}
[data-wd-reveal="fade-left"] {
  transform: translate3d(var(--wd-reveal-distance), 0, 0);
}
[data-wd-reveal="fade"] {
  transform: none;
}

/* Duration */
[data-wd-reveal-duration="200"] { transition-duration: 0.2s; }
[data-wd-reveal-duration="400"] { transition-duration: 0.4s; }
[data-wd-reveal-duration="600"] { transition-duration: 0.6s; }
[data-wd-reveal-duration="800"] { transition-duration: 0.8s; }
[data-wd-reveal-duration="1000"] { transition-duration: 1s; }
[data-wd-reveal-duration="1200"] { transition-duration: 1.2s; }
[data-wd-reveal-duration="1500"] { transition-duration: 1.5s; }
[data-wd-reveal-duration="2000"] { transition-duration: 2s; }

/* Delay */
[data-wd-reveal-delay] { transition-delay: 0s; }
[data-wd-reveal-delay="100"].wd-revealed { transition-delay: 0.1s; }
[data-wd-reveal-delay="200"].wd-revealed { transition-delay: 0.2s; }
[data-wd-reveal-delay="300"].wd-revealed { transition-delay: 0.3s; }
[data-wd-reveal-delay="400"].wd-revealed { transition-delay: 0.4s; }
[data-wd-reveal-delay="500"].wd-revealed { transition-delay: 0.5s; }
[data-wd-reveal-delay="600"].wd-revealed { transition-delay: 0.6s; }
[data-wd-reveal-delay="800"].wd-revealed { transition-delay: 0.8s; }
[data-wd-reveal-delay="1000"].wd-revealed { transition-delay: 1s; }

/* Easing */
[data-wd-reveal-easing="linear"] { transition-timing-function: linear; }
[data-wd-reveal-easing="ease"] { transition-timing-function: ease; }
[data-wd-reveal-easing="ease-in"] { transition-timing-function: ease-in; }
[data-wd-reveal-easing="ease-out"] { transition-timing-function: ease-out; }
[data-wd-reveal-easing="ease-in-out"] { transition-timing-function: ease-in-out; }
[data-wd-reveal-easing="smooth"] { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }