/* =========================================
   Scroll Reactive Animations (Scrub)
   - JS가 각 요소에 --p(0~1) 값을 넣어줌
   - opacity/transform이 스크롤에 따라 계속 변함
========================================= */

:root{
--anim-distance: 22px; /* 이동 거리 */
--hero-ease: cubic-bezier(.2,.8,.2,1);
--hero-dur: 720ms;
}

.anim{
  /* JS가 넣어줄 진행도 */
  --p: 0;

  opacity: var(--p);
  transform: translate3d(
    calc((1 - var(--p)) * var(--dx, 0px)),
    calc((1 - var(--p)) * var(--dy, 0px)),
    0
  );

  will-change: opacity, transform;
}

/* 방향 프리셋(이동 벡터만 정의) */
.anim.fade-in{ --dx: 0px; --dy: 0px; }

.anim.fade-up{ --dx: 0px; --dy: var(--anim-distance); }
.anim.fade-down{ --dx: 0px; --dy: calc(var(--anim-distance) * -1); }
.anim.fade-left{ --dx: var(--anim-distance); --dy: 0px; }
.anim.fade-right{ --dx: calc(var(--anim-distance) * -1); --dy: 0px; }

.anim.fade-left-up{ --dx: var(--anim-distance); --dy: var(--anim-distance); }
.anim.fade-left-down{ --dx: var(--anim-distance); --dy: calc(var(--anim-distance) * -1); }
.anim.fade-right-up{ --dx: calc(var(--anim-distance) * -1); --dy: var(--anim-distance); }
.anim.fade-right-down{ --dx: calc(var(--anim-distance) * -1); --dy: calc(var(--anim-distance) * -1); }

.hero .once{
  opacity: 0;
  transform: translate3d(0, var(--anim-distance, 22px), 0);
  will-change: opacity, transform;
}

.hero .once.is-on{
  animation: heroFadeUp var(--hero-dur) var(--hero-ease) forwards;
  animation-delay: var(--d, 0ms);
}


/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .anim{
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes heroFadeUp{
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}