/* =========================================
   EXPERIENCE PAGE — experience.css
   ========================================= */

/* ── Top Section ── */
#exp-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 96px 40px 0;   /* GNB 높이(~80px) + 여백만 */
  text-align: center;
}

.exp-top-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.exp-desc {
  font-family: 'Geist Mono', monospace;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.45;
  color: var(--black);
  max-width: 640px;
  letter-spacing: 0.02em;
}

.exp-click {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--black);
  text-decoration: none;
  margin-left: 0.4em;
  position: relative;
  transition: letter-spacing 0.3s ease;
}

.exp-click::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--black);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.exp-click:hover {
  letter-spacing: 0.2em;
}

.exp-click:hover::after {
  transform: scaleX(1.05);
}

/* CTA — CLICK! 링크만 사용 (above 스타일은 .exp-click 참조) */

/* ── Main Section (히어로 + 카테고리) ── */
#exp-main {
  position: relative;
  z-index: 2;
  height: calc(100vh - 96px); /* 뷰포트 - 상단 텍스트 영역 */
  margin-top: -4px;
  overflow: hidden;
}

/* 히어로 이미지 — 뷰포트 기준 정중앙 */
.exp-hero-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30vw;
  max-width: 440px;
  z-index: 3;
  pointer-events: none;
}

.exp-hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}

/* ── 카테고리 레이블 ── */
.cat-label {
  position: absolute;
  font-family: 'Geist Mono', monospace;
  font-size: clamp(10px, 0.9vw, 13px);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--black);
  white-space: nowrap;
  z-index: 4;
  cursor: none;
  transition: color 0.25s ease, letter-spacing 0.3s ease;
  user-select: none;
}

.cat-label:hover {
  color: var(--black);
  letter-spacing: 0.22em;
}

/*
  카테고리 레이블 — 히어로를 감싸는 배치
  히어로: 가로 35~65% 점유 (30vw, 중앙 50%)

  ┌─────────────────────────────────────────────┐
  │    BRAND POPUP          SNS CONTENT         │  ← row1  ~18%
  │ IMC CAMPAIGN                EVENT ART DIR   │  ← row2  ~35%
  │   FANDOM FESTIVAL            LAUNCHING...   │  ← row3  ~52%
  │     REELS CONTENT          INSTAGRAM...     │  ← row4  ~68%
  └─────────────────────────────────────────────┘
*/

/* row 1 — 상단 */
#cat-brand  { left: 24%;  top: 15%; }
#cat-sns    { left: 63%;  top: 15%; }

/* row 2 — 중상단 */
#cat-imc    { left: 20%;  top: 32%; }
#cat-event  { left: 63%;  top: 32%; }

/* row 3 — 중하단 */
#cat-fandom { left: 18%;  top: 50%; }
#cat-launch { left: 64%;  top: 50%; }

/* row 4 — 하단 */
#cat-reels  { left: 20%;  top: 67%; }
#cat-insta  { left: 63%;  top: 67%; }

/* ── 이미지 트레일 ── */
#trail-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}

.trail-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  transform-origin: center center;
  pointer-events: none;
  will-change: transform, opacity;
}

.trail-item img {
  display: block;
  width: clamp(110px, 10vw, 160px);
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

.trail-num {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--black);
  line-height: 1;
}

/* ── Current page indicator: is-active = same as hover (image shows) ── */

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #exp-top {
    padding: 88px 24px 0;
  }

  .exp-desc {
    font-size: 12px;
  }

  #exp-main {
    height: calc(100vh - 88px);
  }

  .exp-hero-wrap {
    width: 65vw;
  }

  .cat-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  /* 모바일: 카테고리 좌우 재배치 */
  #cat-brand  { left: 3%;   top: 20%; }
  #cat-sns    { right: 3%;  top: 20%; }
  #cat-imc    { left: 3%;   top: 35%; }
  #cat-event  { right: 3%;  top: 35%; }
  #cat-fandom { left: 3%;   top: 52%; }
  #cat-launch { right: 3%;  top: 52%; }
  #cat-reels  { left: 3%;   top: 68%; }
  #cat-insta  { right: 3%;  top: 68%; }

  .trail-item img {
    width: 90px;
  }
}