/* ---------------------- 스크롤 모션 ---------------------- */

/* 위로 페이드 */
.fade_up {
  opacity: 0;
  transform: translateY(30px);
}
.fade_up.show {
  animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1.2) forwards;
}
@keyframes fadeUp {
  0% {opacity: 0; transform: translateY(30px);}
  100% {opacity: 1; transform: translateY(0);}
}

/* 아래로 페이드 */
.fade_down {
  opacity: 0;
  transform: translateY(-30px);
}
.fade_down.show {
  animation: fadeDown 1s cubic-bezier(0.2, 0.8, 0.2, 1.2) forwards;
}
@keyframes fadeDown {
  0% {opacity: 0; transform: translateY(-30px);}
  100% {opacity: 1; transform: translateY(0);}
}

/* 슬라이드 다운 */
.slide_down {
  opacity: 0;
  transform: translateY(-50px);
}
.slide_down.show {
  animation: slideDown 0.5s ease-out forwards;
}
@keyframes slideDown {
  to {opacity: 1; transform: translateY(0);}
}

/* 페이드 인 */
.fade_in {
  opacity: 0;
}
.fade_in.show {
  animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
  to {opacity: 1;}
}

/* 팝 인 */
.pop_in {
  opacity: 0;
  transform: scale(0.5);
}
.pop_in.show {
  animation: popIn 0.6s ease-out forwards;
}
@keyframes popIn {
  80% {opacity: 1; transform: scale(1.05);}
  100% {opacity: 1; transform: scale(1);}
}

/* 좌 → 우 */
.ltr_in {
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(2px);
}
.ltr_in.show {
  animation: ltr-in 0.8s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes ltr-in {
  from {transform: translateX(-40px); opacity: 0; filter: blur(2px);}
  to   {transform: translateX(0);     opacity: 1; filter: blur(0);}
}

/* 우 → 좌 */
.rtr_in {
  opacity: 0;
  transform: translateX(40px);
  filter: blur(2px);
}
.rtr_in.show {
  animation: rtr-in-reverse 0.8s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes rtr-in-reverse {
  from {transform: translateX(40px); opacity: 0; filter: blur(2px);}
  to   {transform: translateX(0);    opacity: 1; filter: blur(0);}
}


.float_up {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
}
.float_up.show {
  animation: floatUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes floatUp {
  0% {opacity: 0; transform: translateY(40px) scale(0.95);}
  60% {opacity: 1; transform: translateY(-6px) scale(1.02);}
  100% {opacity: 1; transform: translateY(0) scale(1);}
}

.blur_in {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
}
.blur_in.show {
  animation: blurIn 1.2s ease-out forwards;
}
@keyframes blurIn {
  0% {opacity: 0; filter: blur(10px); transform: translateY(20px);}
  100% {opacity: 1; filter: blur(0); transform: translateY(0);}
}



.spread_fade {
  opacity: 0;
  transform: scale(0.9);
  filter: brightness(0.8);
}
.spread_fade.show {
  animation: spreadFade 0.5s ease-out forwards;
}
@keyframes spreadFade {
  0% {opacity: 0; transform: scale(0.9); filter: brightness(0.8);}
  50% {opacity: 1; transform: scale(1.05); filter: brightness(1.2);}
  100% {opacity: 1; transform: scale(1); filter: brightness(1);}
}

.swing_in {
  opacity: 0;
  transform: rotateX(-30deg) translateY(30px);
  transform-origin: top;
}
.swing_in.show {
  animation: swingIn 0.8s cubic-bezier(0.25, 0.85, 0.5, 1.25) forwards;
}
@keyframes swingIn {
  0% {opacity: 0; transform: rotateX(-30deg) translateY(30px);}
  100% {opacity: 1; transform: rotateX(0deg) translateY(0);}
}