/* ==========================================
   GEUMCHANG MONORAIL - animate.css v2
   스크롤 기반 인터랙션 + 섹션별 애니메이션
   ========================================== */

/* ==========================================
   1. 기본 등장 애니메이션 클래스
   duration / easing 프리미엄 템포로 조정
   ========================================== */

[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-property: opacity, transform;
  transition-duration: 1.0s; /* 0.75s → 1.0s */
}
[data-anim].is-visible {
  opacity: 1;
  transform: none !important;
}

/* fade-up: 이동거리 줄여서 우아하게 */
[data-anim="fade-up"]    { transform: translateY(30px); }
[data-anim="fade-in"]    { transform: translateY(0); }
[data-anim="fade-left"]  { transform: translateX(36px); }
[data-anim="fade-right"] { transform: translateX(-36px); }
[data-anim="scale-up"]   { transform: scale(0.95); }

/* clip-path reveal */
[data-anim="clip"] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim="clip"].is-visible {
  clip-path: inset(0 0% 0 0);
}

/* delay 유틸 — stagger 간격 넓게 */
[data-delay="100"] { transition-delay: 0.12s; }
[data-delay="200"] { transition-delay: 0.24s; }
[data-delay="300"] { transition-delay: 0.36s; }
[data-delay="400"] { transition-delay: 0.50s; }
[data-delay="500"] { transition-delay: 0.62s; }
[data-delay="600"] { transition-delay: 0.76s; }
[data-delay="700"] { transition-delay: 0.90s; }
[data-delay="800"] { transition-delay: 1.05s; }

/* ==========================================
   2. HERO 텍스트 등장 — 딜레이 늘려 여유있게
   ========================================== */
.gc-hero__content .gc-hero__sub,
.gc-hero__content .gc-hero__title,
.gc-hero__content .gc-hero__desc {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.swiper-slide-active .gc-hero__sub   { opacity: 1; transform: none; transition-delay: 0.25s; }
.swiper-slide-active .gc-hero__title { opacity: 1; transform: none; transition-delay: 0.50s; }
.swiper-slide-active .gc-hero__desc  { opacity: 1; transform: none; transition-delay: 0.75s; }

/* ==========================================
   3. 서브히어로 이미지 mask reveal
      clip-path 왼→오 언마스크 + 텍스트 등장
   ========================================== */
.gc-sub-hero {
  overflow: hidden;
}

/* 배경 이미지 자체 마스크 reveal */
.gc-sub-hero__bg {
  clip-path: inset(0 100% 0 0);
  animation: subHeroReveal 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  will-change: clip-path;
}
@keyframes subHeroReveal {
  to { clip-path: inset(0 0% 0 0); }
}

/* 배경 위 다크 오버레이 — 별도 레이어 */
.gc-sub-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 54, 157, 0.55) 0%,
    rgba(8, 54, 157, 0.10) 30%
  );
  z-index: 1;
}

/* 타이틀 — reveal 이후에 등장 */
.gc-sub-hero__title {
  opacity: 0;
  transform: translateY(20px);
  animation: subHeroTitleIn 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}
@keyframes subHeroTitleIn {
  to { opacity: 1; transform: none; }
}

/* ==========================================
   4. 헤더 scroll transition
   ========================================== */
.gc-header {
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gc-header.is-scrolled {
  height: 100px;
}
@media (max-width: 1024px) {
  .gc-header.is-scrolled { height: 60px; }
}

/* ==========================================
   5. 버튼 micro interaction
   ========================================== */
.gc-btn {
  position: relative;
  overflow: hidden;
}
.gc-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.gc-btn:hover::after { opacity: 1; }

.gc-btn--outline,
.gc-btn--dark,
.gc-btn--ghost {
  transition: background 0.4s cubic-bezier(0.16,1,0.3,1),
              color 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.4s cubic-bezier(0.16,1,0.3,1),
              letter-spacing 0.4s cubic-bezier(0.16,1,0.3,1);
}
.gc-btn:hover { letter-spacing: 0.04em; }

/* ==========================================
   6. Banner Card hover
   ========================================== */
.gc-banner-card {
  transition: background 0.4s ease,
              transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s ease;
  transform: translateY(0);
}
.gc-banner-card:hover {
  background: #f4f6fb !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(8,54,157,0.08);
}
.gc-banner-card__btn {
  transition: background 0.4s ease, color 0.4s ease,
              border-color 0.4s ease,
              transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.gc-banner-card:hover .gc-banner-card__btn {
  transform: rotate(45deg);
}

/* ==========================================
   7. 제품 메인 이미지 zoom
   ========================================== */
.gc-product-feature__main-wrap {
  overflow: hidden;
}
.gc-product-feature__main-wrap img {
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
}
.gc-product-feature__main-wrap:hover img {
  transform: scale(1.04);
}

/* ==========================================
   8. KNOWHOW 배경 (패럴랙스는 JS)
   ========================================== */
.gc-knowhow__bg {
  transition: filter 0.5s ease;
  will-change: transform;
}

/* ==========================================
   9. 갤러리 / 인증서 hover
   ========================================== */
.gc-cert-item,
.gc-gallery-item {
  overflow: hidden;
  transition: box-shadow 0.4s ease,
              transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.gc-cert-item:hover,
.gc-gallery-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.13);
}
.gc-cert-item img,
.gc-gallery-item img {
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.gc-cert-item:hover img,
.gc-gallery-item:hover img {
  transform: scale(1.06);
}

/* ==========================================
   10. Count-up 숫자
   ========================================== */
.gc-stat__number {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
@keyframes countPulse {
  0%   { transform: scale(1.0); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1.0); }
}

/* ==========================================
   11. 스크롤 진행 인디케이터
   ========================================== */
.gc-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #08369d, #4a7fd4);
  z-index: 9999;
  transition: width 0.12s linear;
  pointer-events: none;
}

/* ==========================================
   12. gc-label 라인 데코
   ========================================== */
.gc-label { position: relative; }

/* ==========================================
   13. to-top 버튼
   ========================================== */
#gcTotop {
  transition: opacity 0.4s ease,
              transform 0.4s cubic-bezier(0.16,1,0.3,1),
              background 0.3s ease;
}
#gcTotop:hover {
  transform: translateY(-4px);
}

/* ==========================================
   14. 인트로 이미지 clip-path reveal
   ========================================== */
.gc-intro__image-outer {
  will-change: clip-path;
}

/* ==========================================
   15. prefers-reduced-motion 대응
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .gc-hero__content .gc-hero__sub,
  .gc-hero__content .gc-hero__title,
  .gc-hero__content .gc-hero__desc,
  .gc-sub-hero__bg,
  .gc-sub-hero__title {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}