/* ==========================================================================
   home.css — 메인 페이지 전용 스타일 (styled-jsx / <style> 이식분)
   * reveal-1~6 / revealUp / shimmer-bar / shimmerMove 키프레임은 전역 custom.css 담당.
   * .font-suit / .font-42dot / .font-tenor 는 전역 custom.css + fonts.css 담당.
   ========================================================================== */
/* 폰트 @import 및 .font-vujahday/.font-belleza/.font-noto-kr 는
   footer.php(공용 파셜)에서도 쓰이므로 전역 fonts.css로 이동됨. */

/* --------------------------------------------------------------------------
   히어로 (HeroMainSection)
   -------------------------------------------------------------------------- */
@keyframes heroKenBurns {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

.main-hero .hero-bg-motion {
  transform-origin: center center;
  animation: heroKenBurns 17s ease-in-out infinite;
  will-change: transform;
}

@keyframes heroScrollBounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(10px);
  }
}

.main-hero .hero-scroll-bounce {
  animation: heroScrollBounce 1.6s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .main-hero .hero-bg-motion {
    animation: none;
    will-change: auto;
  }

  .main-hero .hero-scroll-bounce {
    animation: none;
    will-change: auto;
  }
}

.main-hero .hero-swiper-pagination.swiper-pagination {
  width: auto;
  display: flex;
  align-items: center;
  gap: 5.1px;
}

.main-hero .hero-swiper-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 !important;
  background: #ffffff;
  opacity: 1;
}

.main-hero .hero-swiper-pagination .swiper-pagination-bullet-active {
  background: #262626;
}

/* --------------------------------------------------------------------------
   거상 쇼케이스 모바일 스와이퍼 (LiftingShowcaseSection)
   -------------------------------------------------------------------------- */
.lifting-showcase-mobile-swiper .swiper-pagination {
  bottom: 0 !important;
}

.lifting-showcase-mobile-swiper .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 4px !important;
  background: #434343;
  opacity: 0.35;
}

.lifting-showcase-mobile-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #262626;
}

/* --------------------------------------------------------------------------
   의료진 마퀴 (SurgeonsSection)
   -------------------------------------------------------------------------- */
@keyframes surgeonsMarqueeRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.surgeons-marquee-track {
  animation: surgeonsMarqueeRight 18s linear infinite;
  text-shadow:
    0 0 10px rgba(37, 27, 19, 0.45),
    0 0 24px rgba(37, 27, 19, 0.25);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .surgeons-marquee-track {
    animation: none;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   전후 사례 스와이퍼 (CaseSwiperSection)
   -------------------------------------------------------------------------- */
.case-swiper--peek .swiper-slide {
  width: min(340px, calc(100vw - 32px));
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .case-swiper--peek .swiper-slide {
    width: 607px;
  }
}

@media (max-width: 1023px) {
  .case-swiper--compact-mobile .swiper-pagination {
    position: relative;
    bottom: auto !important;
    margin-top: 10px;
  }
  .case-swiper--compact-mobile .swiper-button-prev,
  .case-swiper--compact-mobile .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 42%);
    margin-top: 0;
    width: 32px;
    height: 32px;
  }
  .case-swiper--compact-mobile .swiper-button-prev::after,
  .case-swiper--compact-mobile .swiper-button-next::after {
    font-size: 14px;
  }
}

.case-swiper .swiper-button-prev,
.case-swiper .swiper-button-next {
  color: #f5f5eb;
}

.case-swiper .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 0.5;
}

.case-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}