/**
 * Premium Animation System v4.3
 * 사용자 제공 코드의 애니메이션 품질 유지 + 오류 수정 + 충돌 해결
 *
 * ✅ 유지: 모든 프리미엄 애니메이션 효과
 * ✅ 수정: 요소 사라짐 문제 해결
 * ✅ 수정: 안전한 폴백 시스템
 * ✅ 수정: CustomSkin CSS 충돌 해결
 * ✅ 제거: 모든 box-shadow
 * ✅ 수정: fixed/sticky 헤더 보존
 * ✅ 제거: 글자 글로우 애니메이션
 * ✅ 수정: hover 충돌 해결
 * ✅ 수정: transform 충돌 완전 해결 (GPU 가속 유지)
 */

/* ============================================
   글로벌 설정
   ============================================ */

:root {
  --perf-duration-fast: 0.3s;
  --perf-duration-normal: 0.6s;
  --perf-duration-slow: 1s;
  --perf-duration-slower: 1.5s;
  --perf-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --perf-color-primary: #87CEEB;
  --perf-color-secondary: #5dade2;
  --perf-color-tertiary: #3498db;
}

/* 접근성 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   1. 스크롤 진행률 바
   ============================================ */

.perf-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 99999;
  pointer-events: none;
}

.perf-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--perf-color-primary) 0%, var(--perf-color-secondary) 50%, var(--perf-color-tertiary) 100%);
  width: 0%;
  transition: width 0.1s linear;
  position: relative;
  overflow: hidden;
}

.perf-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  animation: perf-shimmer 2s infinite;
}

@keyframes perf-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ============================================
   2. 페이지 로더
   ============================================ */

.perf-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--perf-easing), visibility 0.6s var(--perf-easing);
}

.perf-page-loader.perf-hidden {
  opacity: 0;
  visibility: hidden;
}

.perf-loader-text {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
  color: var(--perf-color-tertiary);
  letter-spacing: 1px;
}

.perf-loader-subtext {
  margin-top: 10px;
  font-size: 14px;
  color: #999;
}

/* ============================================
   3. 로더 스타일들
   ============================================ */

/* Modern Spinner */
.perf-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(135, 206, 250, 0.2);
  border-top-color: var(--perf-color-primary);
  border-radius: 50%;
  animation: perf-spin 0.8s linear infinite;
}

@keyframes perf-spin {
  to { transform: rotate(360deg); }
}

/* Linear Progress Bar */
.perf-linear-bar-wrapper {
  width: 300px;
  height: 4px;
  background: rgba(135, 206, 250, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.perf-linear-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--perf-color-primary), var(--perf-color-secondary));
  border-radius: 2px;
  animation: perf-linear-progress 1.5s ease-in-out infinite;
}

@keyframes perf-linear-progress {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Dots Loader */
.perf-dots-container {
  display: flex;
  gap: 12px;
}

.perf-dot {
  width: 16px;
  height: 16px;
  background: var(--perf-color-primary);
  border-radius: 50%;
  animation: perf-dot-bounce 1.4s infinite ease-in-out both;
}

.perf-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.perf-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes perf-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Wave Bars */
.perf-wave-container {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 50px;
}

.perf-wave-bar {
  width: 6px;
  height: 100%;
  background: var(--perf-color-primary);
  border-radius: 3px;
  animation: perf-wave 1.2s ease-in-out infinite;
}

.perf-wave-bar:nth-child(1) { animation-delay: 0s; }
.perf-wave-bar:nth-child(2) { animation-delay: 0.1s; }
.perf-wave-bar:nth-child(3) { animation-delay: 0.2s; }
.perf-wave-bar:nth-child(4) { animation-delay: 0.3s; }
.perf-wave-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes perf-wave {
  0%, 100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Pulse Rings */
.perf-pulse-container {
  position: relative;
  width: 50px;
  height: 50px;
}

.perf-pulse-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--perf-color-primary);
  border-radius: 50%;
  animation: perf-pulse 1.5s ease-out infinite;
}

.perf-pulse-ring:nth-child(2) {
  animation-delay: 0.5s;
}

.perf-pulse-ring:nth-child(3) {
  animation-delay: 1s;
}

@keyframes perf-pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* Circular SVG */
.perf-circular-container {
  width: 50px;
  height: 50px;
}

.perf-circular {
  animation: perf-rotate 2s linear infinite;
}

.perf-circular-path {
  stroke: var(--perf-color-primary);
  stroke-linecap: round;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  animation: perf-dash 1.5s ease-in-out infinite;
}

@keyframes perf-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes perf-dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

/* ============================================
   4. 스크롤 애니메이션 (충돌 방지 개선)
   ============================================ */

/*
  안전 게이트 시스템 v4.2:
  - body.perf-ready가 있을 때만 opacity: 0 적용
  - #tt-body-index, #tt-body-category 페이지의 section 제외
  - transform이 레이아웃에 영향 주지 않도록 개선
  - fixed/sticky 헤더 보존 (navbar에 transform 적용 안 함)
*/

/* Section 애니메이션 - 특정 페이지 제외 */
body.perf-ready:not(#tt-body-index):not(#tt-body-category) section:not(.menu):not(.menu1):not(.title):not(.title1).perf-prepare {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
}

body:not(#tt-body-index):not(#tt-body-category) section:not(.menu):not(.menu1):not(.title):not(.title1) {
  transition: opacity 1s var(--perf-easing),
              transform 1s var(--perf-easing);
}

body:not(#tt-body-index):not(#tt-body-category) section:not(.menu):not(.menu1):not(.title):not(.title1).perf-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Card 애니메이션 - GPU 가속 유지 */
body.perf-ready .card.perf-prepare,
body.perf-ready .item.perf-prepare,
body.perf-ready .features-image.perf-prepare,
body.perf-ready .features-without-image.perf-prepare {
  opacity: 0;
  transform: translateY(50px) rotateX(10deg) translateZ(0);
}

.card, .item, .features-image, .features-without-image {
  transition: opacity 0.8s var(--perf-easing),
              transform 0.8s var(--perf-easing);
  perspective: 1000px;
}

.card.perf-visible,
.item.perf-visible,
.features-image.perf-visible,
.features-without-image.perf-visible {
  opacity: 1;
  transform: translateY(0) scale(1) translateZ(0);
}

/* 카드 호버 효과 - opacity 강제 설정 + 3D 속성 유지 */
.card:hover,
.item:hover,
.features-image:hover {
  opacity: 1 !important;  /* 호버 시 완전히 보이도록 강제 */
  transform: translateY(-6px) scale(1.03) translateZ(0) !important;
  transform-style: preserve-3d !important;
  perspective: 1000px !important;
  backface-visibility: hidden !important;
  transition: opacity var(--perf-duration-fast) var(--perf-easing),
              transform var(--perf-duration-fast) var(--perf-easing) !important;
  transition-delay: 0s !important;
}

/* 순차 등장 효과 */
.card:nth-child(1), .item:nth-child(1), .features-image:nth-child(1) { transition-delay: 0.1s; }
.card:nth-child(2), .item:nth-child(2), .features-image:nth-child(2) { transition-delay: 0.2s; }
.card:nth-child(3), .item:nth-child(3), .features-image:nth-child(3) { transition-delay: 0.3s; }
.card:nth-child(4), .item:nth-child(4), .features-image:nth-child(4) { transition-delay: 0.4s; }
.card:nth-child(5), .item:nth-child(5), .features-image:nth-child(5) { transition-delay: 0.5s; }
.card:nth-child(6), .item:nth-child(6), .features-image:nth-child(6) { transition-delay: 0.6s; }

/* 제목 애니메이션 - 글로우 효과 제거 */
body.perf-ready h1.perf-prepare,
body.perf-ready h2.perf-prepare,
body.perf-ready h3.perf-prepare,
body.perf-ready .pgk-section-title.perf-prepare,
body.perf-ready .pgk-section-subtitle.perf-prepare {
  opacity: 0;
  transform: translateY(-30px) scale(0.9);
}

h1, h2, h3, h4, h5, h6,
.pgk-section-title,
.pgk-section-subtitle {
  transition: opacity 0.8s var(--perf-easing),
              transform 0.8s var(--perf-easing);
}

h1.perf-visible, h2.perf-visible, h3.perf-visible,
.pgk-section-title.perf-visible,
.pgk-section-subtitle.perf-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* 글로우 애니메이션 제거 */
}

/* 버튼 애니메이션 */
body.perf-ready .btn.perf-prepare,
body.perf-ready .pgk-section-btn a.perf-prepare {
  opacity: 0;
  transform: scale(0.9);
}

.btn,
.pgk-section-btn a {
  transition: opacity 0.5s var(--perf-easing),
              transform 0.5s var(--perf-easing);
  position: relative;
  overflow: hidden;
}

.btn.perf-visible,
.pgk-section-btn a.perf-visible {
  opacity: 1;
  transform: scale(1);
}

/* 버튼 호버 효과 */
.btn:hover,
.pgk-section-btn a:hover {
  transform: translateY(-3px) scale(1.05);
  transition: all var(--perf-duration-fast) var(--perf-easing);
}

.btn:active,
.pgk-section-btn a:active {
  transform: translateY(-1px) scale(1.02);
}

/* 컨테이너 애니메이션 */
body.perf-ready .container.perf-prepare,
body.perf-ready .container-fluid.perf-prepare {
  opacity: 0;
  transform: translateY(20px);
}

.container, .container-fluid {
  transition: opacity 0.6s var(--perf-easing),
              transform 0.6s var(--perf-easing);
}

.container.perf-visible,
.container-fluid.perf-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 리스트 아이템 애니메이션 */
body.perf-ready ul li.perf-prepare,
body.perf-ready ol li.perf-prepare {
  opacity: 0;
  transform: translateX(-20px);
}

ul li, ol li {
  transition: opacity 0.4s var(--perf-easing),
              transform 0.4s var(--perf-easing);
}

ul li.perf-visible,
ol li.perf-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 리스트 순차 등장 */
ul li:nth-child(1), ol li:nth-child(1) { transition-delay: 0.05s; }
ul li:nth-child(2), ol li:nth-child(2) { transition-delay: 0.1s; }
ul li:nth-child(3), ol li:nth-child(3) { transition-delay: 0.15s; }
ul li:nth-child(4), ol li:nth-child(4) { transition-delay: 0.2s; }
ul li:nth-child(5), ol li:nth-child(5) { transition-delay: 0.25s; }

/* ============================================
   5. 버튼 리플 효과
   ============================================ */

.perf-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: perf-ripple-animation 0.6s ease-out;
  pointer-events: none;
}

@keyframes perf-ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ============================================
   6. 이미지 로딩
   ============================================ */

img.perf-loading {
  opacity: 0.3;
  filter: blur(5px);
  transition: opacity 0.5s ease, filter 0.5s ease;
}

img.perf-loaded {
  opacity: 1;
  filter: blur(0);
}

/* ============================================
   7. 네비게이션 스크롤 효과 (fixed/sticky 보존)
   ============================================ */

.navbar.perf-scrolled {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95) !important;
  transition: all 0.3s ease;
  /* transform 제거 - fixed/sticky 보존 */
}

/* ============================================
   8. 스크롤 투 탑 버튼
   ============================================ */

.pgk-arrow-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease,
              visibility 0.3s ease,
              transform 0.3s ease;
}

.pgk-arrow-up.perf-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pgk-arrow-up:hover {
  transform: translateY(-5px);
}

/* ============================================
   9. 커스텀 스크롤바
   ============================================ */

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--perf-color-primary), var(--perf-color-secondary));
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--perf-color-secondary), var(--perf-color-tertiary));
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--perf-color-primary) #f1f1f1;
}

/* ============================================
   10. 유틸리티 클래스
   ============================================ */

.perf-fade-in {
  animation: perf-fade-in 0.6s ease-in-out;
}

@keyframes perf-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.perf-slide-up {
  animation: perf-slide-up 0.6s ease-out;
}

@keyframes perf-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.perf-scale-in {
  animation: perf-scale-in 0.5s ease-out;
}

@keyframes perf-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   11. 모바일 최적화
   ============================================ */

@media (max-width: 768px) {
  /* 모바일에서 애니메이션 간소화 */
  body.perf-ready section.perf-prepare,
  body.perf-ready .card.perf-prepare,
  body.perf-ready h1.perf-prepare,
  body.perf-ready h2.perf-prepare,
  body.perf-ready h3.perf-prepare {
    transform: translateY(20px) !important;
  }

  /* 호버 효과 비활성화 */
  .card:hover,
  .item:hover,
  .features-image:hover,
  .btn:hover {
    transform: none !important;
  }

  /* 스크롤바 숨김 */
  ::-webkit-scrollbar {
    width: 0;
  }
}

/* ============================================
   12. GPU 가속 최적화 (navbar 제외)
   ============================================ */

.perf-page-loader,
.perf-progress-bar,
section:not(.menu):not(.menu1):not(.title):not(.title1),
.card,
.item,
/* .features-image는 개별 transform 규칙에서 translateZ(0) 포함됨 */
h1, h2, h3,
.btn {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* navbar는 fixed/sticky 보존을 위해 transform 제외 */

/* features-image는 backface-visibility만 적용 (transform은 개별 규칙에서 처리) */
.features-image {
  backface-visibility: hidden;
}

body {
  -webkit-overflow-scrolling: touch;
}