/* h2 ani css */ 
.copy_e{
  position: relative;
  display: inline-block;
}

.copy_e .line{
  position: relative;
  display:inline-block;   /* 핵심 */
  white-space: nowrap;
}

.copy_e .line .copy{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:100%;
  overflow:hidden;
  opacity:0.2;
  transition: width 1s ease-in-out;
}

.copy_e.active .copy{
  width:100%;
  opacity:1;
}
.copy_e br{
  display: none;
}
.copy_e .copy br{
  display: none;
}
.ani-mo{
  display: none;
}

/* 기본 상태 (공통 트랜지션) */
.fade-up,
.fade-left,
.fade-right {
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.8s ease-in-out;
}

/* 위에서 fade-up */
.fade-up {
  transform: translateY(60px);
}
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* 왼쪽에서 fade-left */
.fade-left {
  transform: translateX(-60px);
}
.fade-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* 오른쪽에서 fade-right */
.fade-right {
  transform: translateX(60px);
}
.fade-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* text animation */
.text-clip {
  overflow: hidden;
  line-height: 1.2;
}
.text-clip-inner {
  display: block;
  /* transform: translateY(120%); */
  will-change: transform;
}


/* 흐르는 빛 */
.line-col{
  position: relative;
  width: 6px;
  height: 55px;
  margin: 0 auto;
  border-radius: 50px;
  overflow: hidden;

  background: linear-gradient(
  180deg,
  #ffffff 0%,
  #fef6f8 8%,
  #fde3ea 16%,
  #f9c8d6 24%,
  #f6a8bf 32%,
  #e97c9c 40%,
  #d34d73 48%,
  #b92a50 56%,
  #910023 64%,
  #6e0019 74%,
  #540014 84%,
  #40000f 100%
);
}

.line-col::after{
  content:"";
  position:absolute;
  top:-40%;
  left:0;
  width:100%;
  height:40%;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.05) 20%,
    rgba(255,255,255,0.15) 40%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.15) 70%,
    rgba(255,255,255,0) 100%
  );

  animation: appleLight 3s linear infinite;
}

@keyframes appleLight{
  0%{
    top:-40%;
  }
  100%{
    top:120%;
  }
}