/* =================================================================
   ani.css - 페이지 진입/스크롤 애니메이션 모음
   - main.css 이후에 로드하여 정적 스타일 위에 모션을 덮어씁니다.
   - 활성 트리거: 풀페이지 섹션에 .is-in-view 부착 (fullpage.js)
   - prefers-reduced-motion: reduce 환경 대응 포함
   ================================================================= */

/* =================================================================
   con1 - 병원 소개 섹션
   ================================================================= */

/* 타이틀: fade-up + blur 해제 */
.con1-title {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

#con1.is-in-view .con1-title {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 강조 텍스트(i): 하이라이트가 좌→우로 그려졌다가 좌→우로 지워짐 */
.con1-title i {
  background-image: linear-gradient(
    120deg,
    rgba(19, 126, 181, 0.18) 0%,
    rgba(48, 187, 193, 0.22) 100%
  );
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 38%;
}

#con1.is-in-view .con1-title i {
  animation: con1-i-highlight 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}

#con1.is-in-view .con1-title i:nth-of-type(2) {
  animation-delay: 0.65s;
}

@keyframes con1-i-highlight {
  0% {
    background-size: 0% 38%;
    background-position: 0 88%;
  }
  30% {
    background-size: 100% 38%;
    background-position: 0 88%;
  }
  60% {
    background-size: 100% 38%;
    background-position: 100% 88%;
  }
  100% {
    background-size: 0% 38%;
    background-position: 100% 88%;
  }
}

/* 브랜드명(em): 그라데이션 텍스트 + 스프링 진입 + 글로우 펄스 */
.con1-title em {
  display: inline-block;
  position: relative;
  background: linear-gradient(
    120deg,
    var(--color-primary) 0%,
    var(--color-accent) 55%,
    #5fd6dc 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  opacity: 0;
  transform: translateY(20px) scale(0.78);
  filter: drop-shadow(0 0 0 transparent);
  transition:
    opacity 0.5s ease 0.9s,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s;
}

#con1.is-in-view .con1-title em {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation:
    con1-em-shine 3.2s ease-in-out 1.4s infinite,
    con1-em-glow 1.4s ease-out 1.4s 1;
}

@keyframes con1-em-shine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes con1-em-glow {
  0% {
    filter: drop-shadow(0 6px 18px rgba(48, 187, 193, 0.55));
  }
  60% {
    filter: drop-shadow(0 4px 14px rgba(48, 187, 193, 0.25));
  }
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* 하단 라인: 위→아래로 그려짐 */
.con1-line {
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.65, 0, 0.35, 1) 1.1s,
    opacity 0.3s ease 1.1s;
}

#con1.is-in-view .con1-line {
  transform: scaleY(1);
  opacity: 1;
}

/* con1 모션 감소 환경 대응 */
@media (prefers-reduced-motion: reduce) {
  .con1-title,
  .con1-title i,
  .con1-title em,
  .con1-line {
    transition: none !important;
    animation: none !important;
  }
  .con1-title {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .con1-title i {
    background-size: 100% 38%;
  }
  .con1-title em {
    opacity: 1;
    transform: none;
  }
  .con1-line {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* =================================================================
   con2 - 의료진 소개 / 인용문(quote) 애니메이션
   ================================================================= */

.doctor-txt-quote .quote-text {
  display: inline;
}

.doctor-txt-quote .quote-word {
  display: inline-block;
  margin-right: 4px;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(5px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.doctor-txt-quote .quote-mark {
  display: inline-block;
  font-size: 1.6em;
  line-height: 0.8;
  vertical-align: -0.15em;
  color: var(--color-accent);
  opacity: 0;
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.doctor-txt-quote .quote-mark--left {
  margin-right: 6px;
  transform: scale(0.4) rotate(-25deg);
  transform-origin: bottom right;
}

.doctor-txt-quote .quote-mark--right {
  margin-left: 6px;
  transform: scale(0.4) rotate(25deg);
  transform-origin: bottom left;
}

#con2.is-in-view .doctor-txt-quote .quote-mark--left {
  opacity: 1;
  transform: scale(1) rotate(0);
  transition-delay: 0.05s;
}

#con2.is-in-view .doctor-txt-quote .quote-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

#con2.is-in-view .doctor-txt-quote .quote-word:nth-child(1) {
  transition-delay: 0.25s;
}
#con2.is-in-view .doctor-txt-quote .quote-word:nth-child(2) {
  transition-delay: 0.32s;
}
#con2.is-in-view .doctor-txt-quote .quote-word:nth-child(3) {
  transition-delay: 0.39s;
}
#con2.is-in-view .doctor-txt-quote .quote-word:nth-child(4) {
  transition-delay: 0.46s;
}
#con2.is-in-view .doctor-txt-quote .quote-word:nth-child(5) {
  transition-delay: 0.53s;
}
#con2.is-in-view .doctor-txt-quote .quote-word:nth-child(6) {
  transition-delay: 0.6s;
}
#con2.is-in-view .doctor-txt-quote .quote-word:nth-child(7) {
  transition-delay: 0.67s;
}

#con2.is-in-view .doctor-txt-quote .quote-mark--right {
  opacity: 1;
  transform: scale(1) rotate(0);
  transition-delay: 0.85s;
}

@media (prefers-reduced-motion: reduce) {
  .doctor-txt-quote .quote-mark,
  .doctor-txt-quote .quote-word {
    transition: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* =================================================================
   con3 - 진료 과목 탭 패널 전환
   ================================================================= */

.con3-panel {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.5s;
}

.con3-panel.active {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* 패널 내 요소의 미세한 stagger 진입 */
.con3-panel__img,
.con3-panel__desc,
.con3-card:nth-of-type(1),
.con3-card:nth-of-type(2) {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.con3-panel.active .con3-panel__img {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.con3-panel.active .con3-panel__desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.con3-panel.active .con3-card:nth-of-type(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.con3-panel.active .con3-card:nth-of-type(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.28s;
}

@media (prefers-reduced-motion: reduce) {
  .con3-panel,
  .con3-panel__img,
  .con3-panel__desc,
  .con3-card,
  .con3-tab {
    transition: none !important;
    opacity: 1;
    transform: none;
  }
}

/* =================================================================
   공통: 섹션 진입 시 페이드업 - 과하지 않게
   - 트리거: .fp-section.is-in-view (fullpage.js 가 부착)
   - 디자인 원칙: opacity + translateY 만 사용, 0.7s 이내
   ================================================================= */

/* -----------------------------------------------------------------
   con3 - 진료 과목 (타이틀 + 탭 리스트 + 패널 영역)
   - 풀페이지 스크롤 도착 시간(~0.6s)을 감안해 base delay 부여
   ----------------------------------------------------------------- */
#con3 .con3-wrap > h2,
#con3 .con3-tab-list,
#con3 .con3-panels {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#con3.is-in-view .con3-wrap > h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}
#con3.is-in-view .con3-tab-list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}
#con3.is-in-view .con3-panels {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

/* -----------------------------------------------------------------
   con4 - 비수술 클리닉 (4 sub-section)
   - 이미지: 좌(또는 우)에서 슬라이드
   - 우측 콘텐츠: 위→아래 stagger
   ----------------------------------------------------------------- */
.con4-section .con4-img {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.con4-section--reverse .con4-img {
  transform: translateX(40px);
}
.con4-section.is-in-view .con4-img {
  opacity: 1;
  transform: translateX(0);
}

/* content-inner 직속 자식들 - stagger */
.con4-section .content-inner > .con4-title,
.con4-section .content-inner > h4,
.con4-section .content-inner > p,
.con4-section .content-inner > .con4-apply,
.con4-section .content-inner > .con4-apply-list {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.con4-section.is-in-view .content-inner > .con4-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.con4-section.is-in-view .content-inner > h4 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.con4-section.is-in-view .content-inner > p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}
.con4-section.is-in-view .content-inner > .con4-apply {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}
.con4-section.is-in-view .content-inner > .con4-apply-list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* -----------------------------------------------------------------
   con5 - 보유 장비 (타이틀 + 스와이퍼)
   ----------------------------------------------------------------- */
#con5 .container > h2,
#con5 .c6_swiper_wrap,
#con5 .item_pagination {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#con5.is-in-view .container > h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}
#con5.is-in-view .c6_swiper_wrap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}
#con5.is-in-view .item_pagination {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

/* -----------------------------------------------------------------
   con6 - 둘러보기 (타이틀 + 메인/썸네일 슬라이더)
   ----------------------------------------------------------------- */
#con6 .container > h2,
#con6 .main-slider,
#con6 .thumb-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#con6.is-in-view .container > h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}
#con6.is-in-view .main-slider {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}
#con6.is-in-view .thumb-wrapper {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.85s;
}

/* -----------------------------------------------------------------
   prefers-reduced-motion 대응 (con3 ~ con6)
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #con3 .con3-wrap > h2,
  #con3 .con3-tab-list,
  #con3 .con3-panels,
  .con4-section .con4-img,
  .con4-section .content-inner > .con4-title,
  .con4-section .content-inner > h4,
  .con4-section .content-inner > p,
  .con4-section .content-inner > .con4-apply,
  .con4-section .content-inner > .con4-apply-list,
  #con5 .container > h2,
  #con5 .c6_swiper_wrap,
  #con5 .item_pagination,
  #con6 .container > h2,
  #con6 .main-slider,
  #con6 .thumb-wrapper {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}