/* v5.93 로고 리빌 로더 (홈 첫 로딩).
   단색 Ink 면 위에 크림 BLASSONG가 옅게(.18) 깔려 있고, 진행률만큼 같은 워드마크의 선명한 버전이 왼쪽부터 채워진다.
   맨 아래 얇은 크림 진행선이 같은 비율로 늘어난다. 100%가 되면 잠깐 머문 뒤 면이 아래 가장자리를 곡선으로 휘며 위로 올라가 첫 화면을 드러낸다
   (main.js setupInitialLoader가 SVG path를 rAF로 갱신 — transitions.js의 곡선 와이프와 같은 이징·곡선).
   색은 팔레트(Ink·Paper)만, 그레이디언트·그림자 없음. 첫 페인트용 최소 규칙은 BaseLayout의 인라인 <style>에도 있다. */

.initial-loader {
  position: fixed;
  /* v6.00: lvh 높이 — 주소창이 접혀도 로더 면이 아래까지 덮는다 */
  inset: 0 0 auto 0;
  height: 100vh;
  height: 100lvh;
  z-index: 120;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink, #2e2b26);
  color: var(--color-paper, #f6f5ef);
}

/* 걷히는 동안에는 SVG 면(아래 가장자리가 휘는 path)이 면 색을 맡는다. */
.initial-loader.is-exiting {
  background: transparent;
  pointer-events: none;
}

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

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

.initial-loader__content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* v6.00: 워드마크는 svh 기준 가운데 */
  padding: 1.25rem 1.25rem calc(1.25rem + var(--viewport-gap, 0px));
  will-change: transform;
}

.initial-loader__mark {
  display: grid;
  font-family: var(--font-serif);
  font-size: clamp(3.6rem, calc(12vw + 1rem), 13rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.85;
  white-space: nowrap;
  /* 웹폰트(Instrument Serif) 준비 전 대체 세리프가 그려졌다 좁아지는 점프를 막기 위해 준비된 뒤 페이드인 */
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.initial-loader.is-font-ready .initial-loader__mark {
  opacity: 1;
}

/* 옅은 워드마크와 선명한 워드마크를 같은 칸에 겹친다. 선명한 쪽은 main.js가 clip-path로 왼쪽부터 드러낸다. */
.initial-loader__word {
  grid-area: 1 / 1;
}

.initial-loader__word--ghost {
  opacity: 0.18;
}

.initial-loader__word--fill {
  clip-path: inset(-0.25em 100% -0.25em 0);
}

/* window load(=JS 시작) 전에도 채움이 멈춰 보이지 않게 30%까지 미리 올려 둔다. main.js가 시작하면 is-js를 붙여 이 값을 이어받는다. */
.initial-loader.is-font-ready:not(.is-js) .initial-loader__word--fill {
  animation: initial-loader-prefill 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.initial-loader.is-font-ready:not(.is-js) .initial-loader__bar-fill {
  animation: initial-loader-prebar 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes initial-loader-prefill {
  from { clip-path: inset(-0.25em 100% -0.25em 0); }
  to { clip-path: inset(-0.25em 70% -0.25em 0); }
}

@keyframes initial-loader-prebar {
  from { transform: scaleX(0); }
  to { transform: scaleX(0.3); }
}

.initial-loader__bar {
  position: absolute;
  right: 0;
  bottom: var(--viewport-gap, 0px); /* v6.00: 툴바가 보일 때 눈에 보이는 영역의 맨 아래 */
  left: 0;
  height: 2px;
}

.initial-loader__bar {
  transition: opacity 200ms ease-out;
}

/* 걷히기가 시작되면 진행선은 먼저 사라진다(면과 함께 올라가며 가로줄로 남지 않게). */
.initial-loader.is-exiting .initial-loader__bar {
  opacity: 0;
}

.initial-loader__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-paper, #f6f5ef);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .initial-loader__mark {
    transition: none;
  }

  .initial-loader.is-font-ready:not(.is-js) .initial-loader__word--fill,
  .initial-loader.is-font-ready:not(.is-js) .initial-loader__bar-fill {
    animation: none;
  }
}