@charset "utf-8";

/* ============================================================
   common-anim.css — 스크롤 애니메이션 **초기 상태**만 정의 (메인 전용)
   실제 재생은 js/common-anim.js (GSAP + ScrollTrigger).
   ⚠️ 여기 요소는 기본 opacity:0 이라 JS 가 안 돌면 화면에서 사라진다.
============================================================ */

/* ── fade 계열 ── */

.anim-fade-up,
.anim-fade-left,
.anim-fade-right {
  opacity: 0;
}

.anim-fade-up {
  transform: translateY(40px);
}

.anim-fade-left {
  transform: translateX(-50px);
}

.anim-fade-right {
  transform: translateX(50px);
}

/* ── zoom-in ── */

.anim-zoom-in {
  opacity: 0;
  transform: scale(0.92);
}

/* ── count ── */

.anim-count {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.anim-count.is-active {
  opacity: 1;
}

/* ── sticky — JS 는 PC 비터치에서만 실행, 터치기기는 자연 흐름 ── */

.anim-sticky-container {
  position: relative;
}

.anim-sticky-sec {
  position: relative;
  will-change: transform;
}

@media all and (max-width: 1024px) {
  .anim-sticky-sec {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    padding-top: 0 !important;
    will-change: auto;
  }
}

/* ── pin + scroll reveal — 외부 pin 고정 / 내부 리스트는 마스크 안에서 스크롤 ── */

.anim-pin-container {
  position: relative;
}

.anim-pin-target {
  position: relative;
  z-index: 2;
}

.anim-pin-scroll {
  position: relative;
  z-index: 1;
}

.anim-pin-item {
}

@media all and (min-width: 1025px) {
  .anim-pin-container {
    overflow: visible;
  }

  .anim-pin-target {
    align-self: flex-start;
  }

  .anim-pin-scroll {
    overflow: visible;
    padding-top: 90px;
  }
}

@media all and (max-width: 1024px) {
  .anim-pin-container {
    min-height: auto !important;
    overflow: visible !important;
  }

  .anim-pin-scroll {
    max-height: none !important;
    overflow: visible !important;
  }

  .anim-pin-target,
  .anim-pin-scroll,
  .anim-pin-item {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}

/* ── scroll right/left — 부모에 overflow-x:hidden 필요 ── */

.anim-scroll-right,
.anim-scroll-left {
  will-change: transform;
}

.anim-scroll-right {
  transform: translateX(-50vw);
}

.anim-scroll-left {
  transform: translateX(50vw);
}

/* ── floating — 스크롤 방향에 따라 JS 가 y 제어 ── */

.anim-float-dir {
}

/* ── legacy one-fade-in-* ── */

.one-fade-in-up,
.one-fade-in-down,
.one-fade-in-left,
.one-fade-in-right {
  opacity: 0;
}

.one-fade-in-up {
  transform: translateY(40px);
}

.one-fade-in-down {
  transform: translateY(-40px);
}

.one-fade-in-left {
  transform: translateX(-40px);
}

.one-fade-in-right {
  transform: translateX(40px);
}