/* =========================================================
   Jaein Kim — Portfolio
   Design tokens + variable-font control + shared components
   ========================================================= */

:root {
  --white: #FFFFFF;
  --ink: #0A0A0A;
  --soft: #767676;
  --faint: #7c7c7c;
  --line: #E7E7E7;
  --accent: #000000d2;

  --gutter: clamp(24px, 5vw, 64px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Google Sans Flex', 'Inter', system-ui, -apple-system, sans-serif;
  font-variation-settings: 'wght' 400, 'wdth' 100, 'opsz' 14;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--white); }

/* ---------- Typography ---------- */
/* 1. Geist 폰트 가져오기 */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

/* 2. 모든 요소에 폰트 강제 적용 */
body, h1, h2, h3, h4, p, a, span, div {
  font-family: 'Geist', sans-serif !important;
}

/* Display headings: bold + normal width, per brief (wght 700 / wdth 100) */
h1 {
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.9 !important;
}

h2, .h-display {
  font-family: 'Geist', sans-serif !important;
  font-weight: 800 !important; /* 여기서 강제로 지정 */
  letter-spacing: -0.05em;
  line-height: 0.9;
  margin: 0;
}

h3, .h-sub {
  font-family: 'Geist', sans-serif !important;
  font-variation-settings: 'wght' 600, 'wdth' 100, 'opsz' 28;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Body copy: tuned for reading comfort, slightly narrower width axis */
p, li, .body-copy {
  font-family: 'Geist', sans-serif !important;
  font-variation-settings: 'wght' 350, 'wdth' 100, 'opsz' 20;
  line-height: 1.6;
  color: var(--ink);
  max-width: 1200px;
}

.label {
  font-family: 'Geist', sans-serif !important;
  font-variation-settings: 'wght' 500, 'wdth' 100, 'opsz' 12;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--soft);
  font-size: 0.72rem;
}

.mono-num {
  font-variation-settings: 'wght' 500, 'wdth' 100;
  color: var(--faint);
}

/* ---------- Layout helpers ---------- */

.wrap {
  max-width: 1400px; 
  margin-inline: auto;
  padding-inline: var(--gutter); /* 3rem 정도의 여유 있는 좌우 여백 */
}

.hairline { border-color: var(--line); }

/* ---------- Nav Navigation (Simon Holm Studio Style) ---------- */

/* 링크 박스 기본 설정 */
.nav-link {
  display: block;
  /* 영역을 최소한으로 줄여서 마우스 클릭 간섭 방지 */
  height: 1.25rem; 
  overflow: hidden;
  position: relative;
  font-size: 0.875rem;
  color: #6b7280; /* 회색 */
  transition: color 0.3s ease;
  cursor: pointer; /* 마우스 포인터 명시 */
}

/* 텍스트 컨테이너 설정 */
.nav-link span {
  display: block;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

/* 밑에 숨겨진 글자 위치 조정 */
.nav-link span:last-child {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

/* 마우스 호버 효과 */
.nav-link:hover {
  color: var(--ink);
}

.nav-link:hover span:first-child {
  transform: translateY(-100%);
}

.nav-link:hover span:last-child {
  transform: translateY(-100%);
}

/* 현재 페이지 밑줄 */
.nav-text[aria-current="page"] {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

/* ---------- Signature moment: the Flex title breathing on load ----------
   A literal, one-time demonstration of the variable font's width axis —
   ties the visual signature directly to "Google Sans FLEX". Runs once,
   then holds at the brief's exact spec (wght 700 / wdth 100).
------------------------------------------------------------------------ */

.flex-title {
  animation: flexIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes flexIn {
  0%   { font-variation-settings: 'wght' 700, 'wdth' 62,  'opsz' 144; opacity: 0; }
  55%  { font-variation-settings: 'wght' 700, 'wdth' 108, 'opsz' 144; opacity: 1; }
  100% { font-variation-settings: 'wght' 700, 'wdth' 100, 'opsz' 144; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flex-title { animation: none; font-variation-settings: 'wght' 700, 'wdth' 100, 'opsz' 144; opacity: 1; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Project thumbnails ---------- */

.thumb {
  aspect-ratio: 4 / 1.5;
  background: var(--thumb-bg, #F1F1EF);
  position: relative;
  overflow: hidden;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--c1, #EDEDEA), var(--c2, #D8D8D2));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-card:hover .thumb::after {
  transform: scale(1.045);
}
.project-card .h-sub {
  transition: color 0.25s ease;
}
.project-card:hover .h-sub {
  color: var(--accent);
}

/* ---------- Links ---------- */

.text-link {
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.text-link:hover {
  border-color: var(--ink);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 사이트 전체의 기본 커서를 완전히 숨깁니다. */
body, a, button, input, textarea {
  cursor: none !important;
}

.custom-cursor {
  position: fixed;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  
  /* 글래스모피즘 스타일 유지 (연한 그레이 테두리) */
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(209, 209, 209, 0.8);
  
  pointer-events: none; /* 클릭 방해 방지 */
  z-index: 9999;
  
  /* 부드러운 움직임을 위한 트랜지션 (색상 변화도 추가) */
  transition: transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease;
  will-change: transform;
  
  /* 처음에는 숨겨둠 (마우스가 움직일 때 나타나게 하기 위함) */
  opacity: 0; 
}

/* 마우스가 움직이면 커서를 보이게 함 */
body.cursor-active .custom-cursor {
  opacity: 1;
}

/* 터치 환경(모바일)에서는 기본 커서 유지 */
@media (hover: none) {
  .custom-cursor {
    display: none;
  }
}