/* v5.90 곡선 와이프(curved wipe) 전환.
   transitions.js가 <html> 바로 아래(body 밖)에 .curtain을 만들어 두므로, ClientRouter가 body를 갈아끼워도 그대로 남는다.
   면 색은 브랜드 잉크 단색(검정·흰색·그레이디언트·그림자 금지), 워드마크는 크림 + 사이트 세리프.
   곡선은 transitions.js가 SVG path(d)를 requestAnimationFrame으로 갱신해 그린다. */

.curtain {
  position: fixed;
  /* v6.00: lvh 높이 — 주소창이 접혀 화면이 커져도 전환 막이 아래까지 덮는다. 워드마크는 svh 기준 가운데(아래 여백으로 보정) */
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100lvh;
  padding-bottom: var(--viewport-gap, 0px);
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  touch-action: none;
  visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* 진행 중에만 보이고, 뒤쪽 클릭·탭을 막는다(이중 실행 방지). */
.curtain.is-active {
  pointer-events: auto;
  visibility: visible;
}

.curtain__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.curtain__path {
  fill: var(--color-ink, #2e2b26);
  stroke: none;
}

/* 페이지 이동에서 완전히 덮였을 때만 나타나는 워드마크(첫 로딩 화면의 워드마크와 같은 서체·크기). */
.curtain__mark {
  position: relative;
  color: var(--color-paper, #f6f5ef);
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-size: clamp(3.6rem, 10vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.85;
  opacity: 0;
  transform: translate3d(0, 0.22em, 0);
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.625, 0.05, 0, 1);
  white-space: nowrap;
}

.curtain.is-mark-in .curtain__mark {
  opacity: 1;
  transform: none;
}

/* 드러내기가 시작되면 면보다 먼저 위로 올라가며 사라진다(크림색이라 크림 바탕 위에 남으면 안 보이거나 어색하다). */
.curtain.is-mark-out .curtain__mark {
  opacity: 0;
  transform: translate3d(0, -0.28em, 0);
  transition: opacity 240ms ease-out, transform 520ms cubic-bezier(0.625, 0.05, 0, 1);
}

/* ---- Astro 기본 전환 끄기 ----
   main.css의 기본 페이드(view-transition 지원: ::view-transition-*, 미지원 폴백: data-astro-transition-fallback)와
   v5.85 방향 전환(data-pager)은 곡선 와이프와 겹치므로 끈다. 면이 덮은 동안 DOM이 바뀌므로 크로스페이드가 필요 없다. */
::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
  mix-blend-mode: normal !important;
}

::view-transition-old(root) {
  display: none !important;
}

html[data-astro-transition-fallback] body {
  animation: none !important;
}

/* ---- 메뉴·전체 보기: 와이프가 상태 전환을 맡으므로 기존 열기/닫기 애니메이션은 끈다 ----
   html.has-wipe는 와이프가 실제로 동작할 때(스크립트 로드 + 동작 줄이기 아님)만 붙는다. */
html.has-wipe .menu-overlay,
html.has-wipe .menu-overlay.is-open,
html.has-wipe .menu-overlay.is-closing {
  transition: none;
}

html.has-wipe .site-header.is-menu-closing {
  transition: none;
}

/* 덮인 상태에서 메뉴가 열리고 곧바로 걷히므로, 글자 진입 지연을 와이프 드러내기(약 0.5s)에 맞춰 줄인다. */
html.has-wipe .menu-overlay__item {
  --d: calc(0.14s + var(--i) * 0.07s);
}

html.has-wipe .menu-overlay__small {
  --d: calc(0.4s + var(--i) * 0.06s);
}

html.has-wipe .view-all-modal,
html.has-wipe .view-all-modal.is-open {
  transition: none;
}

html.has-wipe .view-all-modal__surface,
html.has-wipe .view-all-modal.is-open .view-all-modal__surface {
  transform: none;
  transition: none;
}