/* ─────────────────────────────────────────
   Wildfish — fullpage.css
   풀페이지 스크롤 엔진 · 공통 등장 애니메이션 · 헤더 오버라이드
───────────────────────────────────────── */

/* ─── 뷰포트 단위 ───
   --vh : 실제 보이는 화면 높이 (관리자바 보정)
   --u  : 1920×1080 기준 1px. 화면이 커지거나 작아져도 스크린샷 비율 그대로 유지됩니다.
          (고정 px 로 쓰고 싶다면 --u: 1px; 로 바꾸면 됩니다) */
body {
  --vh: 100vh;
  --u: min(calc(100vw / 1920), calc(var(--vh) / 1080));
  --fp-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (height: 100dvh) {
  body { --vh: 100dvh; }
}
body.admin-bar { --vh: calc(100vh - 32px); }
@supports (height: 100dvh) {
  body.admin-bar { --vh: calc(100dvh - 32px); }
}
@media (max-width: 782px) {
  body.admin-bar { --vh: calc(100vh - 46px); }
}

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}


/* ══════════════════════════════════════
   1. 풀페이지 모드 (html.wf-fp-on — 데스크톱 1024px↑ · 포트폴리오 상세는 모바일 세로 화면도 포함: html.wf-fp-m)
══════════════════════════════════════ */
html.wf-fp-on,
html.wf-fp-on body.wf-fp-page {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}
html.wf-fp-on .wf-fp {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  z-index: 1;
}
html.wf-fp-on body.admin-bar .wf-fp { top: 32px; }
@media (max-width: 782px) {
  html.wf-fp-on body.admin-bar .wf-fp { top: 46px; }
}

html.wf-fp-on .wf-fp-track {
  transform: translate3d(0, calc(var(--fp-i, 0) * var(--vh) * -1), 0);
  transition: transform 1s var(--fp-ease);
  will-change: transform;
}
.wf-fp-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}
html.wf-fp-on .wf-fp-section {
  height: var(--vh);
  min-height: 0;
}
/* 일반 스크롤 모드 (태블릿·모바일) */
html:not(.wf-fp-on) .wf-fp-section.wf-hero { height: var(--vh); min-height: 520px; }


/* ══════════════════════════════════════
   2. 등장 애니메이션
   섹션(.wf-anim)에 .is-active 가 붙으면 안쪽 [data-anim] 요소가 --i 순서대로 등장합니다.
   data-anim: up | down | left | right | fade | zoom | line | reveal | reveal-x | reveal-zoom
══════════════════════════════════════ */
.wf-js .wf-anim [data-anim] {
  opacity: 0;
  /* 비활성으로 돌아갈 때: 화면 밖으로 나간 뒤(0.9s) 조용히 초기화 */
  transition: opacity 0s linear 0.9s, transform 0s linear 0.9s, clip-path 0s linear 0.9s;
  will-change: opacity, transform;
}
.wf-js .wf-anim [data-anim="up"]    { transform: translate3d(0, calc(48 * var(--u, 1px)), 0); }
.wf-js .wf-anim [data-anim="down"]  { transform: translate3d(0, calc(-48 * var(--u, 1px)), 0); }
.wf-js .wf-anim [data-anim="left"]  { transform: translate3d(calc(64 * var(--u, 1px)), 0, 0); }
.wf-js .wf-anim [data-anim="right"] { transform: translate3d(calc(-64 * var(--u, 1px)), 0, 0); }
.wf-js .wf-anim [data-anim="zoom"]  { transform: scale(0.92); }
.wf-js .wf-anim [data-anim="line"]  { opacity: 1; transform: scaleX(0); transform-origin: left center; }

.wf-js .wf-anim [data-anim="reveal"]      { opacity: 1; clip-path: inset(100% 0 0 0); }
.wf-js .wf-anim [data-anim="reveal-x"]    { opacity: 1; clip-path: inset(0 100% 0 0); }
.wf-js .wf-anim [data-anim="reveal-zoom"] { opacity: 0; }
.wf-js .wf-anim [data-anim^="reveal"] > img,
.wf-js .wf-anim [data-anim^="reveal"] > picture > img {
  transform: scale(1.16);
  transition: transform 0s linear 0.9s;
  will-change: transform;
}

/* 활성 */
.wf-js .wf-anim.is-active [data-anim] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity   1.0s var(--anim-ease) calc(var(--i, 0) * 90ms + 420ms),
    transform 1.2s var(--anim-ease) calc(var(--i, 0) * 90ms + 420ms),
    clip-path 1.3s var(--fp-ease)   calc(var(--i, 0) * 90ms + 300ms);
}
.wf-js .wf-anim.is-active [data-anim^="reveal"] > img,
.wf-js .wf-anim.is-active [data-anim^="reveal"] > picture > img {
  transform: none;
  transition: transform 1.9s var(--anim-ease) calc(var(--i, 0) * 90ms + 300ms);
}

/* 페이지별 애니메이션 스타일 (관리자 > 등장 애니메이션) */
.wf-js .wf-anim[data-anim-style="fade"] [data-anim] { transform: none; clip-path: none; opacity: 0; }
.wf-js .wf-anim[data-anim-style="fade"] [data-anim] > img { transform: none; }
.wf-js .wf-anim[data-anim-style="fade"].is-active [data-anim] { opacity: 1; }

.wf-js .wf-anim[data-anim-style="slide"] .pp-panel [data-anim] { clip-path: none; opacity: 0; transform: translate3d(calc(-80 * var(--u, 1px)), 0, 0); }
.wf-js .wf-anim[data-anim-style="slide"] .pp-visual [data-anim],
.wf-js .wf-anim[data-anim-style="slide"] .pp-mosaic [data-anim] { clip-path: none; opacity: 0; transform: translate3d(calc(120 * var(--u, 1px)), 0, 0); }
.wf-js .wf-anim[data-anim-style="slide"] [data-anim] > img { transform: none; }
.wf-js .wf-anim[data-anim-style="slide"].is-active [data-anim] { opacity: 1; transform: none; }

.wf-js .wf-anim[data-anim-style="zoom"] [data-anim] { clip-path: none; opacity: 0; transform: scale(0.9); }
.wf-js .wf-anim[data-anim-style="zoom"] [data-anim] > img { transform: none; }
.wf-js .wf-anim[data-anim-style="zoom"].is-active [data-anim] { opacity: 1; transform: none; }

.wf-js .wf-anim[data-anim-style="none"] [data-anim],
.wf-js .wf-anim[data-anim-style="none"] [data-anim] > img {
  opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.wf-fp-on .wf-fp-track { transition-duration: 0.01s; }
  .wf-js .wf-anim [data-anim],
  .wf-js .wf-anim [data-anim] > img {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
}


/* ══════════════════════════════════════
   3. 헤더 (풀페이지 화면)
══════════════════════════════════════ */
html.wf-fp-on body.wf-fp-page .wf-nav {
  position: fixed;
  transition: opacity 0.5s ease, transform 0.6s var(--anim-ease), background 0.3s ease;
}
html.wf-fp-on body.admin-bar.wf-fp-page .wf-nav { top: 32px; }
@media (max-width: 782px) {
  html.wf-fp-on body.admin-bar.wf-fp-page .wf-nav { top: 46px; }
}

/* 푸터 섹션에서는 헤더를 숨김 (푸터 자체에 로고·메뉴가 있음) */
html.wf-fp-on body.fp-on-footer .wf-nav {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -24px, 0);
}

/* 프로젝트 상세: 투명 헤더 + difference 블렌드 → 밝은/어두운 배경 모두에서 자동 대비 */
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav,
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav.scrolled {
  background: transparent !important;
  border-bottom: 0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  mix-blend-mode: difference;
}
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav .nav-logo-img { filter: none !important; }
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav .nav-link { color: rgba(255, 255, 255, 0.78); }
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav .nav-link:hover,
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav .nav-link.active { color: #fff; }
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav .nav-link::after { background: #fff; }
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav .nav-shop,
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav .nav-lang-desktop {
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.4);
}
html.wf-fp-on body:is(.wf-project-fp, .wf-about-fp) .wf-nav .hamburger span { background: #fff; }

/* 커스텀 커서도 자동 대비 */
/* ─── 커스텀 커서: 흰색 + 검은 테두리 2중 톤 ───
   흰 배경에서는 검은 테두리가, 검은·회색·사진 배경에서는 흰색이 보여 어떤 배경에서도 식별됩니다. */
.cursor-dot,
.cursor-dot.light,
.cursor-dot.lightbox {
  width: 8px !important; height: 8px !important;
  background: #fff !important;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.35);
  mix-blend-mode: normal !important;
}
.cursor-ring,
.cursor-ring.light,
.cursor-ring.lightbox {
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(0, 0, 0, 0.62);
  mix-blend-mode: normal !important;
}
.cursor-ring.hover,
.cursor-ring.light.hover {
  border-color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.12);
}

/* 히어로의 scroll 인디케이터는 버튼 */
.hero-scroll { background: none; border: 0; padding: 0; }
.hero-scroll-line { display: block; position: relative; overflow: hidden; }
.hero-scroll-line::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: rgba(255, 255, 255, 0.9);
  animation: wf-scroll-hint 2.2s var(--fp-ease) infinite;
}
@keyframes wf-scroll-hint {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(260%); }
}