/* ═══════════════════════════════════════════════════════════
   SERVICE INTRO — service-intro.css
   index 인트로(common/intro.css)를 service 페이지 전용으로 복제·이식.
   · index 의존부(#consult-hero)를 service 구조(.hero)로 교체. 헤더는 .gnb / .gnb__logo-img 공통.
   · 키프레임·타임라인·동작은 index 와 동일(로고 슉 안착 + 좌우 커튼 오픈 + 카피 "팡").
   · index 인트로(common/intro.*)는 전혀 건드리지 않음 — 본 파일/JS 는 service 에서만 로드.
   · transform/opacity 위주. prefers-reduced-motion → 게이트가 스킵(아래 가드는 안전망).
═══════════════════════════════════════════════════════════ */

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

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

/* ── 좌/우 커튼 패널 (각 화면 절반, 흰색) — 로고 안착 후 양옆 슬라이드(transform만) ── */
.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);
}
.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;
}

/* ── 로고 (service 헤더 로고 .gnb__logo-img 를 빌려 중앙 → 원위치 복귀) ──
   인트로 동안 .gnb 를 인트로 레이어 위로 올리되 '로고만' 보이게(레이아웃 유지). */
html.intro-active .gnb {
  z-index: 2001; /* 인트로 레이어(2000) 위 — 빌린 로고가 보이도록 */
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  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만 사용 */
}
/* 중앙+확대 상태(즉시 적용, 트랜지션 없음) — 좌표/스케일은 service-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) */
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);
  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; /* 중앙 상단 빌린 로고와 겹치지 않게 */
}
.intro__copy em {
  font-style: normal;
  color: var(--svc-purple, #762ae4); /* 다픽 연보라 강조 */
}
.intro__copy-line {
  display: block;
}
/* 카피 묶음 fade-out (T2.0~2.4s) */
html.intro-active .intro__copy {
  animation: introCopyOut 0.4s ease 2s forwards;
}
@keyframes introCopyOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* 줄별 "팡!" — scale 1.8→1.0 + opacity 0→1 + blur 4→0 */
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 첫 등장(겹침) — service-intro.js가 close 시 html.intro-revealing 부여 ── */
html.intro-revealing .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(--svc-purple, #762ae4);
  color: var(--svc-purple-deep, #5e22b6);
}

/* 모션 줄이기 — 안전망(게이트에서 이미 인트로 스킵) */
@media (prefers-reduced-motion: reduce) {
  html.intro-active .intro,
  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 .hero {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}