/* =========================================================
   home sweet home — 로딩 화면
   상태: (기본) → .is-started → .is-ready(집 누르기 기다림) → .is-leaving(집이 다가옴) → 제거
   ========================================================= */

.hsh-loader {
  --hsh-fill: var(--hsh-tone-house); /* 집 색 — base.css 의 [data-hsh-tone] */
  --hsh-ink: #2a2a2a;
  --hsh-pattern: var(--hsh-tone-stars); /* 배경 별 — 집 색보다 채도 · 명도 낮게 */
  --hsh-fade: 900ms; /* 누른 뒤 사라질 때까지 — 집이 다가오는 시간 */

  position: fixed;
  inset: 0; /* 주소창이 줄었다 늘어도 보이는 영역 가운데 */
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--hsh-paper);
  overflow: hidden;
  opacity: 1;
  /* 집이 반쯤 다가온 뒤부터 바래서, 다 다가왔을 때 다음 화면 */
  transition: opacity calc(var(--hsh-fade) * 0.45) ease-in calc(var(--hsh-fade) * 0.55);
  -webkit-tap-highlight-color: transparent;
}

/* 창 주소로 들어왔다(index.html 머리 스크립트) — 로딩 화면 없이 그 창으로. 첫 화면부터 그리지 않는다 */
[data-hsh-entry="direct"] .hsh-loader { display: none; }

.hsh-loader.is-ready .hsh-loader__house {
  cursor: pointer;
}

.hsh-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* ---------- 들어가기 — 글자는 먼저 숨고, 집이 사용자 쪽으로 다가온다 ---------- */

.hsh-loader__house {
  transition: scale var(--hsh-fade) cubic-bezier(0.6, 0, 0.85, 0.3); /* 점점 빠르게 */
}

.hsh-loader.is-leaving .hsh-loader__house {
  scale: 9;
}

/* 배경 별은 그대로 — 평면도 뒤에 같은 자리로 옮겨 둔 별(plan.css)과 이어진다 */

.hsh-loader.is-leaving :is(.hsh-loader__text, .hsh-status) {
  opacity: 0;
  transition: opacity 160ms ease-out;
}

/* ---------- 배경 패턴 ---------- */

.hsh-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hsh-bg__stars {
  fill: var(--hsh-pattern);
}

.hsh-loader__stage {
  position: relative; /* 배경 위 */
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: 0 -3%; /* 첨부처럼 가운데보다 아주 조금 위 */
}

/* 첨부 비율 그대로: 집 폭 340 : 높이 318. 모바일 161~191px, 짧은 가로 화면에서는 높이에 맞춘다 */
.hsh-loader__house {
  display: block;
  width: min(clamp(161px, 47vw, 191px), 45svh * 340 / 318);
  height: auto;
  aspect-ratio: 340 / 318;
  overflow: visible;
}

@media (min-width: 768px) {
  .hsh-loader__house {
    width: min(220px, 45svh * 340 / 318);
  }
}

/* ---------- 윤곽 위글 — 4장 중 한 장만(wobble.js 가 .is-on 을 옮긴다) ---------- */

.hsh-loader__frame {
  display: none;
  fill: var(--hsh-fill);
  stroke: var(--hsh-line);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.hsh-loader:not(.is-wobbling) .hsh-loader__frame:first-child,
.hsh-loader__frame.is-on {
  display: inline;
}

/* 덧그린 굵은 선 — draw.js 가 윤곽 4장을 본떠 넣는다. 윤곽과 같은 장만 보인다 */
.hsh-loader__ink {
  display: none;
  fill: none;
  stroke: var(--hsh-line);
  stroke-width: 2.8; /* viewBox 단위 — 화면에서 1.5px 남짓, 다가올 때 함께 굵어진다 */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1; /* pathLength="1" */
}

.hsh-loader:not(.is-wobbling) .hsh-loader__ink:first-child,
.hsh-loader__ink.is-on {
  display: inline;
}

/* ---------- 글자 ---------- */

.hsh-loader__text {
  font-family: var(--hsh-hand);
  font-size: 41px; /* viewBox 단위. 집을 90%로 줄일 때 글자는 화면 크기를 지키려고 키웠다 */
  font-weight: 400;
  fill: var(--hsh-ink);
  letter-spacing: 0;
  visibility: hidden; /* JS 가 글자를 나누기 전 깜빡임 방지 */
}

.hsh-loader.is-started .hsh-loader__text {
  visibility: visible;
}

.hsh-loader__char {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.hsh-loader__char.is-shown {
  opacity: 1;
}

/* ---------- 방문 단계 ---------- */

.hsh-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  margin: 22px 0 0;
  font-family: var(--hsh-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--hsh-note);
  white-space: nowrap;
  transition: opacity 220ms ease;
}

.hsh-status__char {
  display: inline-block; /* wobble.js 가 글자마다 살짝 기울인다 */
}

.hsh-status.is-swapping {
  opacity: 0;
}

.hsh-status__icon {
  flex: none;
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: var(--hsh-fill);
  stroke: var(--hsh-line);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hsh-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.hsh-status__icon :is(path, circle, rect) {
  transform-box: fill-box; /* wobble.js 의 손떨림이 도형 가운데를 축으로 */
  transform-origin: center;
}

.hsh-icon { display: none; }
.hsh-status[data-step="bell"] .hsh-icon--bell,
.hsh-status[data-step="run"] .hsh-icon--run,
.hsh-status[data-step="door"] .hsh-icon--door,
.hsh-status[data-step="tap"] .hsh-icon--tap { display: inline; }

/* 초인종 — 잠깐 쉬었다 딩동 */
.hsh-bell {
  transform-box: view-box;
  transform-origin: 12px 3px;
  animation: hsh-bell 1.6s ease-in-out infinite;
}

.hsh-ring {
  fill: none;
  opacity: 0;
  animation: hsh-ring 1.6s ease-out infinite;
}

@keyframes hsh-bell {
  0%, 52%, 100% { rotate: 0deg; }
  60% { rotate: 14deg; }
  68% { rotate: -12deg; }
  76% { rotate: 8deg; }
  84% { rotate: -4deg; }
  92% { rotate: 0deg; }
}

@keyframes hsh-ring {
  0%, 55% { opacity: 0; }
  62%, 84% { opacity: 1; }
  100% { opacity: 0; }
}

/* 달려나옴 — 다리 두 자세를 번갈아, 통통 */
.hsh-icon--run path {
  fill: none;
}

.hsh-run__body {
  animation: hsh-bob 0.36s ease-in-out infinite alternate;
}

.hsh-run__a,
.hsh-run__b {
  animation: hsh-stride 0.36s steps(1, end) infinite;
}

.hsh-run__b {
  animation-delay: -0.18s;
}

.hsh-run__speed {
  animation: hsh-speed 0.72s ease-out infinite;
}

@keyframes hsh-bob {
  from { translate: 0 0; }
  to { translate: 0 -1px; }
}

@keyframes hsh-stride {
  0% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes hsh-speed {
  0% { opacity: 0; translate: 1.5px 0; }
  40% { opacity: 1; }
  100% { opacity: 0; translate: -1.5px 0; }
}

/* 문 — 빼꼼 열렸다 닫힘 */
.hsh-door__gap {
  fill: var(--hsh-tone-door);
}

.hsh-door__panel {
  transform-box: fill-box;
  transform-origin: left center;
  animation: hsh-door 2.2s ease-in-out infinite;
}

@keyframes hsh-door {
  0%, 15% { scale: 1 1; }
  50%, 72% { scale: 0.3 1; }
  100% { scale: 1 1; }
}

/* 들어가기 */
.hsh-tap {
  fill: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: hsh-tap 1.8s ease-out infinite;
}

@keyframes hsh-tap {
  0% { scale: 0.7; opacity: 1; }
  100% { scale: 1.5; opacity: 0; }
}

/* ---------- 모션 줄이기 — 완성 상태 그대로 ---------- */

@media (prefers-reduced-motion: reduce) {
  .hsh-loader {
    --hsh-fade: 200ms;
    transition: opacity var(--hsh-fade) ease;
  }

  .hsh-loader.is-leaving .hsh-loader__house {
    scale: none;
  }

  .hsh-bell,
  .hsh-ring,
  .hsh-run__body,
  .hsh-run__speed,
  .hsh-door__panel,
  .hsh-tap {
    animation: none;
  }

  .hsh-run__a {
    animation: none;
  }

  .hsh-run__b {
    display: none;
  }

  .hsh-status {
    transition: none;
  }

  .hsh-loader__text {
    visibility: visible;
  }

  .hsh-loader__char {
    opacity: 1;
    transition: none;
  }
}