/* ═══════════════════════════════════════════════════════════
   INTRO — intro.css (2단계: 모션 시퀀스)
   · 1단계 골격 유지: 레이어/게이트(html.intro-active)/스킵/세션/스크롤잠금
   · 모션은 transform(translate/scale)·opacity 위주 (리플로우 유발 속성 지양)
   · 총 약 3.0초 타임라인(3단계 연장):
       0.0~0.5s 1줄 쾅 / 0.5~1.0s 2줄 쾅 / 1.0~1.5s 머무름(읽는 시간)
       1.5~2.3s 헤더 로고 원위치 복귀(빌린 로고 transform:none) / 2.0~2.4s 카피 fade-out
       2.4~3.1s 좌우 커튼 오픈(translateX ∓100%) + 본문 #consult-hero 등장 (7단계)
   · prefers-reduced-motion: 게이트가 인트로 자체를 스킵(아래 가드는 안전망)
═══════════════════════════════════════════════════════════ */

/* 기본 숨김 — 게이트(html.intro-active)가 켜질 때만 표시 → 재방문 플래시 방지 */
.intro {
  display: none;
}
html.intro-active .intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2000; /* 헤더(100)·하단바(90) 위 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: transparent; /* 7단계: 흰색은 좌/우 커튼 패널이 담당(열리면 본문 드러남) */
  text-align: center;
}

/* 인트로 떠 있는 동안 본문 스크롤 잠금 */
html.intro-active body {
  overflow: hidden;
}

/* ── 7단계: 좌/우 커튼 패널 (각 화면 절반, 흰색) ──
   로고 안착(6단계) 후 양옆으로 슬라이드하며 무대 커튼처럼 열림. transform(translateX)만 사용. */
.intro__curtain {
  position: absolute;
  top: 0;
  width: 50.5%; /* 가운데 1px 틈 방지로 살짝 겹침 */
  height: 100%;
  background: #ffffff; /* 다폰 톤 (검정/빨강 풀배경 금지) */
  z-index: 0; /* 카피/로고 아래 */
  will-change: transform;
  transition: transform 1.15s cubic-bezier(0.7, 0, 0.3, 1); /* 커튼 오픈 — 조금 더 느리게 */
}
.intro__curtain--left {
  left: 0;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05); /* 안쪽(오른쪽) 가장자리 얇은 그림자 */
}
.intro__curtain--right {
  right: 0;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.05); /* 안쪽(왼쪽) 가장자리 얇은 그림자 */
}
/* 열림: 좌 → 왼쪽(-100%) / 우 → 오른쪽(+100%) 동시 슬라이드 */
.intro.intro--curtain-open .intro__curtain--left {
  transform: translateX(-100%);
}
.intro.intro--curtain-open .intro__curtain--right {
  transform: translateX(100%);
}
/* 카피/스킵은 커튼 위 */
html.intro-active .intro__copy {
  position: relative;
  z-index: 1;
}
html.intro-active .intro__skip {
  z-index: 1;
}

/* [미사용 — 7단계] 기존 레이어 통 fade-out (좌우 커튼 오픈으로 대체). 삭제 보류.
.intro.is-closing {
  opacity: 0;
  pointer-events: none;
}
*/

/* ── 로고 (5단계: 실제 헤더 로고를 빌려 중앙 → 원위치 복귀) ──
   [미사용 — 5단계] 아래는 기존(2~4단계) 별도 인트로 로고(.intro__logo) 이동 방식. 삭제 보류(복구용).
.intro__logo {
  height: 72px;
  width: auto;
  object-fit: contain;
  will-change: transform;
}
html.intro-active .intro__logo {
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
html.intro-active .intro__logo.is-flying {
  transform: translate(var(--logo-dx, 0px), var(--logo-dy, 0px)) scale(var(--logo-scale, 0.5));
}
@keyframes introLogoMove {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--logo-dx, 0px), var(--logo-dy, 0px)) scale(var(--logo-scale, 0.5)); }
}
   끝 [미사용 — 5단계] */

/* 5단계: 인트로 동안 헤더를 인트로 레이어 위로 올리되 '로고만' 보이게(레이아웃은 유지).
   헤더 로고를 transform으로만 중앙+확대 → 복귀는 transform:none = 진짜 헤더 위치(측정 불필요·정밀). */
html.intro-active .gnb {
  z-index: 2001; /* 인트로 레이어(2000) 위 — 빌린 로고가 보이도록 */
  background: transparent;
  border-bottom-color: transparent;
  pointer-events: none; /* 스킵 버튼 클릭 방해 금지 */
}
html.intro-active .gnb__menu,
html.intro-active .gnb__right,
html.intro-active .gnb__toggle {
  opacity: 0; /* 로고 외 헤더 요소 숨김(공간 유지 → 네비/토글 정렬 안 깨짐) */
}
html.intro-active .gnb__logo-img {
  will-change: transform; /* 레이아웃 차지 유지, transform만 사용 */
}
/* 중앙+확대 상태(즉시 적용, 트랜지션 없음) — 좌표/스케일은 intro.js가 헤더 로고 기준 주입 */
html.intro-active .gnb__logo-img.logo-intro-flying {
  transform: translate(var(--fly-dx, 0px), var(--fly-dy, 0px)) scale(var(--fly-scale, 1));
  transform-origin: center center;
}
/* 복귀 트랜지션(중앙·확대 → 원래 헤더, transform:none) — 단일 transform 트랜지션 */
html.intro-active .gnb__logo-img.logo-returning {
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── 카피 (2줄 "쾅" stagger → 1.0s 후 fade-out) ── */
.intro__copy {
  font-size: clamp(2.2rem, 7vw, 6rem); /* 4단계: 화면 압도 (데스크톱 ~6rem, 모바일 비례 확대) */
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--color-text, #1a1a1a);
  word-break: keep-all;
  padding: 0 24px;
  line-height: 1.25;
  margin-top: 12vh; /* 5단계: 중앙 상단에 떠 있는 빌린 헤더 로고와 겹치지 않게 아래로 */
}
.intro__copy em {
  font-style: normal;
  color: var(--gold);
}
.intro__copy-line {
  display: block;
}
/* 카피 묶음 fade-out (T2.0~2.4s — 커튼 오픈 2.4s 직전 마무리) — 부모 opacity로 두 줄 동시 사라짐 */
html.intro-active .intro__copy {
  animation: introCopyOut 0.4s ease 2.0s forwards;
}
@keyframes introCopyOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* 줄별 "팡!" — scale 1.8→1.0 + opacity 0→1 + blur 4→0 (바운스/오버슈트 없음, 강한 ease-out) */
html.intro-active .intro__copy-line {
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: introPop 0.4s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
html.intro-active .intro__copy-line:nth-child(1) {
  animation-delay: 0s; /* T0.0~0.5s */
}
html.intro-active .intro__copy-line:nth-child(2) {
  animation-delay: 0.5s; /* T0.5~1.0s */
}
@keyframes introPop {
  0% {
    opacity: 0;
    transform: scale(1.8);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ── 본문 hero 첫 등장(겹침) — intro.js가 close 시 html.intro-revealing 부여 ── */
html.intro-revealing #consult-hero {
  animation: introHeroIn 0.5s ease both;
}
@keyframes introHeroIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ── 스킵 버튼 ── */
.intro__skip {
  position: absolute;
  top: 18px;
  right: 18px;
  min-height: 40px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-sub, #555);
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    color 0.25s ease;
}
.intro__skip:hover {
  border-color: var(--gold);
  color: var(--gold-dark);
}

/* 모션 줄이기 — 안전망(게이트에서 이미 인트로 스킵) */
@media (prefers-reduced-motion: reduce) {
  html.intro-active .intro,
  html.intro-active .intro__logo,
  html.intro-active .gnb__logo-img,
  html.intro-active .intro__copy,
  html.intro-active .intro__copy-line,
  html.intro-active .intro__curtain,
  html.intro-revealing #consult-hero {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}