/* ==========================================================================
   FLAWLESS 인트로 — intro.css
   DOM은 assets/js/intro.js 가 생성하고, 움직임은 GSAP 타임라인이 맡는다.
   여기서는 레이아웃과 첫 프레임 상태만 정한다.
   GSAP 가 트윈하는 요소에는 CSS transform 초기값을 두지 않는다 (px 로 읽혀 위치가 어긋남).
   초기 상태는 JS 의 gsap.set 이 깔고, 그 전까지는 .is-ready 가 붙기 전 stage 를 가려 둔다.
   ========================================================================== */

/* --- 오버레이 본체: 배경은 투명, 위/아래 두 패널이 화면을 덮는다 ------------- */
.intro {
  --intro-bg: #0b0b0c;
  --intro-ink: #f3efe6;
  --intro-ink-rgb: 243, 239, 230;
  --intro-seal: #d8c3a0; /* 샴페인 — 사이트 accent 와 같은 색 */
  --intro-face: "Archivo", var(--font-sans, system-ui, sans-serif);
  --intro-sans: var(--font-sans, "Pretendard Variable", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif);
  --intro-mono: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace);
  --fs: clamp(28px, 5.4vw, 68px); /* 워드마크 글자 크기 */
  --line-w: min(84vw, calc(var(--fs) * 9.4)); /* 헤어라인 폭 — 완성된 워드마크(글자 범위 약 9fs)보다 살짝 넓게 */

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: transparent;
  color: var(--intro-ink);
  font-family: var(--intro-sans);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

/* 걷히는 동안은 아래 본문이 클릭되지도, 이 오버레이가 클릭되지도 않게 */
.intro.is-leaving {
  pointer-events: none;
}

/* base.css 의 .sr-only 가 없어도 보이지 않도록 */
.intro > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 배경: 위/아래 두 패널. 아주 옅은 정적 비네트(가장자리가 살짝 더 어둡다) ---- */
.intro__half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background-color: var(--intro-bg);
  will-change: transform;
}

/* 두 패널이 맞닿은 화면 중앙이 비네트의 중심이 되도록 각자 안쪽 가장자리에 기준점을 둔다 */
.intro__half--top {
  top: 0;
  background-image: radial-gradient(ellipse 72% 142% at 50% 100%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.34) 100%);
}

.intro__half--bottom {
  bottom: 0;
  background-image: radial-gradient(ellipse 72% 142% at 50% 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.34) 100%);
}

/* --- 무대: 워드마크가 정중앙. 라인·신분 보장 줄은 중앙 기준으로 얹는다 ------- */
.intro__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 움직임은 전부 GSAP 가 맡는다. 사이트 전역의 prefers-reduced-motion 규칙(* { transition-duration: .01ms !important })이
   GSAP 가 쓰는 inline 값마다 한 프레임짜리 CSS 전환을 일으켜 값이 한 프레임씩 늦게 보이므로 오버레이 안에서는 끈다. */
.intro__half,
.intro__stage,
.intro__stage * {
  transition: none !important;
}

/* 첫 타임라인 상태(gsap.set)가 깔리기 전에는 아무것도 보이지 않게 */
.intro:not(.is-ready) .intro__stage {
  visibility: hidden;
}

/* 가로 헤어라인 — 화면 중앙에 겹쳐서 시작. 가운데 정렬은 transform 이 아니라 margin 으로 한다. */
.intro__line {
  position: absolute;
  left: 50%;
  width: var(--line-w);
  margin-left: calc(var(--line-w) / -2);
  height: 1px;
  background: rgba(var(--intro-ink-rgb), 0.55);
  will-change: transform, opacity;
}

/* 위 라인은 중앙선 바로 위, 아래 라인은 바로 아래 — 겹쳐 있을 때 한 줄(2px)처럼 보이지 않고 대칭이 된다 */
.intro__line--top {
  top: calc(50% - 1px);
}

.intro__line--bottom {
  top: 50%;
}

/* --- 워드마크 ------------------------------------------------------------ */
.intro__word {
  flex: none;
  font-family: var(--intro-face);
  font-weight: 300;
  font-stretch: 125%;
  font-size: var(--fs);
  line-height: 1;
  white-space: nowrap;
  color: var(--intro-ink);
  letter-spacing: 0.32em; /* 최종값. 시작값은 JS 가 px 로 깔고 트윈한다 */
  padding-left: 0.32em; /* 마지막 글자 뒤 자간만큼 보정해 시각적 중앙 유지 */
  clip-path: inset(50% 0% 50% 0%); /* 가운데 한 줄로 닫힌 상태에서 위아래로 열린다 */
}

/* --- 신분 보장 + 태그라인: 아래 라인이 벌어진 자리(--intro-d, JS 가 측정)에서 내려온다 ---- */
.intro__under {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--intro-d, calc(var(--fs) * 0.92)) + var(--fs) * 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fs) * 0.35);
}

.intro__seal {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--intro-sans);
  font-weight: 600;
  font-size: max(18px, calc(var(--fs) * 0.36));
  line-height: 1;
  white-space: nowrap;
  color: var(--intro-seal);
}

.intro__seal-ico {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: var(--intro-seal);
  opacity: 0;
}

.intro__seal-text {
  display: inline-flex;
  letter-spacing: 0.42em;
  margin-right: -0.42em; /* 마지막 글자 뒤 자간 때문에 생기는 오른쪽 비대칭 보정 */
}

/* 글자마다 마스크. 줄 높이를 1.5 로 넉넉히 줘서 한글 윗부분이 잘리지 않고,
   yPercent 105 로 내려 둔 글자는 마스크 밖으로 완전히 빠진다 (padding 으로 여유를 주면 윗끝이 비친다). */
.intro__sch {
  display: inline-block;
  overflow: hidden;
  line-height: 1.5;
}

.intro__sch > span {
  display: inline-block;
}

.intro__tag {
  font-family: var(--intro-sans);
  font-weight: 300;
  font-size: max(12px, calc(var(--fs) * 0.19));
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.24em;
  padding-left: 0.24em; /* 마지막 글자 뒤 자간 보정 */
  color: rgba(var(--intro-ink-rgb), 0.55);
  opacity: 0;
}

/* --- SKIP ---------------------------------------------------------------- */
.intro__skip {
  position: absolute;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 20px);
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  font: 400 10.5px/1 var(--intro-mono);
  letter-spacing: 0.3em;
  color: rgba(var(--intro-ink-rgb), 0.4);
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: color 0.3s ease;
}

.intro__skip:hover {
  color: rgba(var(--intro-ink-rgb), 0.85);
}

.intro__skip:focus-visible {
  color: rgba(var(--intro-ink-rgb), 0.85);
  outline: 1px solid rgba(var(--intro-ink-rgb), 0.5);
  outline-offset: 2px;
}

/* --- 반응형 -------------------------------------------------------------- */
@media (max-width: 600px) {
  .intro {
    --fs: 8.4vw;
  }
}