/**
 * 🫧 LIQUID METAL EFFECT v2.0 - SITE-WIDE
 * ========================================
 * 사이트 전체에 적용되는 메탈릭 액체 배경
 * 
 * ✨ 최적화 포인트:
 * - position: fixed (스크롤해도 한 번만 렌더링)
 * - 블롭 3개로 축소
 * - opacity 낮춤 (가독성 확보)
 * - 마우스 인터랙션은 선택적
 */

/* ========================================
   🫧 전역 컨테이너 (FIXED)
======================================== */
.liquid-metal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  
  /* 성능 최적화 */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout style paint;
}

/* ========================================
   🫧 히어로 전용 컨테이너 (강조)
======================================== */
.liquid-metal-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

/* ========================================
   🫧 액체 블롭 - 기본 스타일
======================================== */
.liquid-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  mix-blend-mode: screen;
  will-change: transform, border-radius;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 전역 배경용 (더 부드럽게) */
.liquid-metal-bg .liquid-blob {
  filter: blur(120px);
  opacity: 0.35;
}

/* 히어로용 (더 선명하게) */
.liquid-metal-container .liquid-blob {
  filter: blur(80px);
  opacity: 0.6;
}

/* ========================================
   🫧 블롭 1 - 메인 골드 (좌상단)
======================================== */
.liquid-blob-1 {
  width: clamp(400px, 50vw, 700px);
  height: clamp(400px, 50vw, 700px);
  top: -10%;
  left: -5%;
  
  background: 
    radial-gradient(
      ellipse 60% 60% at 30% 30%,
      rgba(255, 223, 150, 0.5) 0%,
      rgba(201, 169, 98, 0.4) 30%,
      rgba(139, 90, 43, 0.2) 60%,
      transparent 80%
    );
  
  animation: 
    liquidMorph1 25s ease-in-out infinite,
    liquidFloat1 30s ease-in-out infinite;
}

/* ========================================
   🫧 블롭 2 - 우측 (세컨드)
======================================== */
.liquid-blob-2 {
  width: clamp(350px, 40vw, 600px);
  height: clamp(350px, 40vw, 600px);
  top: 20%;
  right: -10%;
  
  background: 
    radial-gradient(
      ellipse 50% 70% at 60% 40%,
      rgba(212, 184, 150, 0.45) 0%,
      rgba(201, 169, 98, 0.35) 40%,
      rgba(139, 90, 43, 0.15) 70%,
      transparent 85%
    );
  
  animation: 
    liquidMorph2 30s ease-in-out infinite,
    liquidFloat2 35s ease-in-out infinite;
  animation-delay: -8s;
}

/* ========================================
   🫧 블롭 3 - 하단 (악센트)
======================================== */
.liquid-blob-3 {
  width: clamp(300px, 35vw, 500px);
  height: clamp(300px, 35vw, 500px);
  bottom: -5%;
  left: 20%;
  
  background: 
    radial-gradient(
      ellipse 70% 50% at 50% 60%,
      rgba(201, 169, 98, 0.4) 0%,
      rgba(139, 90, 43, 0.25) 50%,
      transparent 80%
    );
  
  animation: 
    liquidMorph3 22s ease-in-out infinite,
    liquidFloat3 28s ease-in-out infinite;
  animation-delay: -15s;
}

/* ========================================
   🫧 블롭 4 - 히어로 전용 (중앙 하이라이트)
======================================== */
.liquid-blob-4 {
  width: clamp(250px, 30vw, 450px);
  height: clamp(250px, 30vw, 450px);
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  
  background: 
    radial-gradient(
      circle at 40% 40%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(201, 169, 98, 0.25) 40%,
      transparent 70%
    );
  
  filter: blur(100px);
  opacity: 0.4;
  
  animation: 
    liquidMorph4 20s ease-in-out infinite,
    liquidFloat4 25s ease-in-out infinite;
  animation-delay: -5s;
}

/* ========================================
   🌊 MORPHING 애니메이션 (형태 변형)
======================================== */
@keyframes liquidMorph1 {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  20% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  40% {
    border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%;
  }
  60% {
    border-radius: 40% 50% 60% 50% / 60% 40% 50% 60%;
  }
  80% {
    border-radius: 70% 30% 50% 40% / 40% 70% 40% 60%;
  }
}

@keyframes liquidMorph2 {
  0%, 100% {
    border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;
  }
  25% {
    border-radius: 60% 40% 30% 70% / 40% 60% 40% 60%;
  }
  50% {
    border-radius: 30% 70% 50% 50% / 60% 30% 70% 40%;
  }
  75% {
    border-radius: 50% 50% 60% 40% / 30% 60% 40% 70%;
  }
}

@keyframes liquidMorph3 {
  0%, 100% {
    border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;
  }
  33% {
    border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%;
  }
  66% {
    border-radius: 60% 40% 50% 50% / 50% 50% 50% 50%;
  }
}

@keyframes liquidMorph4 {
  0%, 100% {
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  }
  50% {
    border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%;
  }
}

/* ========================================
   🎈 FLOATING 애니메이션 (위치 이동)
======================================== */
@keyframes liquidFloat1 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  25% {
    transform: translate(5vw, -3vh) scale(1.08) rotate(3deg);
  }
  50% {
    transform: translate(2vw, -6vh) scale(0.95) rotate(-2deg);
  }
  75% {
    transform: translate(-3vw, -2vh) scale(1.05) rotate(1deg);
  }
}

@keyframes liquidFloat2 {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(-4vw, 3vh) scale(1.1) rotate(-3deg);
  }
  66% {
    transform: translate(-2vw, -4vh) scale(0.92) rotate(2deg);
  }
}

@keyframes liquidFloat3 {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(6vw, -2vh) scale(1.12);
  }
}

@keyframes liquidFloat4 {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(calc(-50% + 3vw), calc(-50% - 2vh)) scale(1.15);
  }
}

/* ========================================
   ✨ 메탈릭 하이라이트
======================================== */
.liquid-blob::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 15%;
  width: 35%;
  height: 35%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(15px);
  animation: metallicShine 10s ease-in-out infinite;
}

@keyframes metallicShine {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.35;
  }
  50% {
    transform: translate(15%, 15%) scale(1.1);
    opacity: 0.6;
  }
}

/* ========================================
   🎞️ FILM GRAIN 오버레이
======================================== */
.film-grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  mix-blend-mode: overlay;
}

.film-grain::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainMove 0.5s steps(8) infinite;
}

@keyframes grainMove {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-5%, -5%); }
  40% { transform: translate(5%, 5%); }
  60% { transform: translate(-3%, 3%); }
  80% { transform: translate(3%, -3%); }
  100% { transform: translate(0, 0); }
}

/* ========================================
   🖱️ 마우스 인터랙션 (JS 연동)
======================================== */
.liquid-blob.interactive {
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ========================================
   🎨 페이지별 커스터마이징
======================================== */

/* 히어로 섹션 - 더 강조 */
.hero .liquid-metal-container .liquid-blob {
  opacity: 0.6;
  filter: blur(80px);
}

/* 일반 섹션 - 은은하게 */
.section .liquid-metal-container .liquid-blob {
  opacity: 0.3;
  filter: blur(120px);
}

/* 다크 섹션 */
.bg-dark .liquid-metal-container .liquid-blob {
  opacity: 0.4;
}

/* ========================================
   📱 반응형 - 모바일
======================================== */
@media (max-width: 768px) {
  .liquid-metal-bg,
  .liquid-metal-container {
    opacity: 0.5;
  }
  
  .liquid-blob {
    filter: blur(150px) !important;
  }
  
  .liquid-blob-3,
  .liquid-blob-4 {
    display: none;
  }
  
  .liquid-blob-1 {
    width: 300px;
    height: 300px;
    animation-duration: 35s, 40s;
  }
  
  .liquid-blob-2 {
    width: 250px;
    height: 250px;
    animation-duration: 40s, 45s;
  }
  
  .film-grain {
    opacity: 0.02;
  }
}

/* 태블릿 */
@media (min-width: 769px) and (max-width: 1024px) {
  .liquid-blob {
    filter: blur(100px);
  }
  
  .liquid-blob-4 {
    display: none;
  }
}

/* 대형 화면 */
@media (min-width: 1600px) {
  .liquid-blob-1 { width: 800px; height: 800px; }
  .liquid-blob-2 { width: 700px; height: 700px; }
  .liquid-blob-3 { width: 600px; height: 600px; }
}

/* ========================================
   ♿ 접근성 - 모션 감소
======================================== */
@media (prefers-reduced-motion: reduce) {
  .liquid-blob,
  .liquid-blob::before,
  .film-grain::before {
    animation: none !important;
  }
  
  .liquid-metal-bg,
  .liquid-metal-container {
    opacity: 0.2;
  }
}

/* ========================================
   🔋 저전력 모드 감지
======================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 고성능 환경에서만 추가 효과 */
  .liquid-blob {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* ========================================
   🎮 GPU 가속 강화
======================================== */
@supports (backdrop-filter: blur(1px)) {
  .liquid-blob {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
  }
}

/* ========================================
   🌙 배경 어둡게 (콘텐츠 가독성)
======================================== */
body {
  background: #0a0a0a;
}

.liquid-metal-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 30%,
    transparent 0%,
    rgba(10, 10, 10, 0.3) 70%,
    rgba(10, 10, 10, 0.6) 100%
  );
  pointer-events: none;
}