/* =================================================================
   ani.css - 스크롤 진입
   배경이 깔린 통은 움직이지 않고, 그 안의 글·이미지만 움직입니다.
   1. 글·제목·진료과목 내용은 아래에서 올라옵니다.
   2. 병원 둘러보기는 살짝 커지며 나타납니다.
   3. 이력과 오시는 길은 오른쪽에서 짧게 들어옵니다.
   ================================================================= */

.fp-section .sec-ttl,
#con1 .con1-intro,
#con2 .con2-head,
#con2 .con2-panel.is-active,
#con3 .con3-head,
#con3 .con3-panel.is-active,
#con4 .item_wrap,
#con5 .con5-guide__info-inner {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s cubic-bezier(0.33, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.33, 0, 0.2, 1);
}

#con4 .con6-coverflow-clip {
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center center;
  transition:
    opacity 0.9s cubic-bezier(0.33, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.33, 0, 0.2, 1);
}

#con1 .con1-profile__info,
#con1 .con1-profile__photo,
#con5 .con5-guide__access-inner {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.9s cubic-bezier(0.33, 0, 0.2, 1),
    transform 0.9s cubic-bezier(0.33, 0, 0.2, 1);
}

#con2 .con2-panel.is-active,
#con3 .con3-panel.is-active,
#con4 .con6-coverflow-clip,
#con4 .item_wrap,
#con1 .con1-profile__photo,
#con5 .con5-guide__access-inner {
  transition-delay: 0.12s;
}

#con5 .sec-ttl {
  opacity: 1;
  transform: none;
  transition: none;
}

.fp-section .sec-ttl.is-in-view,
#con1 .con1-intro.is-in-view,
#con2 .con2-head.is-in-view,
#con2 .con2-panel.is-in-view,
#con3 .con3-head.is-in-view,
#con3 .con3-panel.is-in-view,
#con5 .con5-guide__info-inner.is-in-view,
#con1 .con1-profile__info.is-in-view,
#con1 .con1-profile__photo.is-in-view,
#con4 .con6-coverflow-clip.is-in-view,
#con4 .item_wrap.is-in-view,
#con5 .con5-guide__access-inner.is-in-view {
  opacity: 1;
  transform: none;
}

#con1 .con1-intro__copy h2 span::after {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.33, 0, 0.2, 1) 0.15s;
}

#con1 .con1-intro.is-in-view .con1-intro__copy h2 span::after {
  transform: scaleX(1);
}

@keyframes tab-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.con2-panel.is-tab-in,
.con3-panel.is-tab-in {
  animation: tab-in 0.5s cubic-bezier(0.33, 0, 0.2, 1);
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .fp-section .sec-ttl,
  #con1 .con1-intro,
  #con1 .con1-profile__info,
  #con1 .con1-profile__photo,
  #con2 .con2-head,
  #con2 .con2-panel.is-active,
  #con3 .con3-head,
  #con3 .con3-panel.is-active,
  #con4 .con6-coverflow-clip,
  #con4 .item_wrap,
  #con5 .con5-guide__info-inner,
  #con5 .con5-guide__access-inner {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #con1 .con1-intro__copy h2 span::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .con2-panel.is-tab-in,
  .con3-panel.is-tab-in {
    animation: none;
  }

  .con2-feature__media::after {
    animation: none;
  }
}