/* Pre-JS boot splash — static public asset (avoids Vite html-inline-proxy)
 * 화면은 숨기지 않고 반투명 레이어로 덮음 → 준비되면 site-ready에서 페이드아웃 (src/utils/siteBoot.js)
 */
html.site-booting body {
  margin: 0;
  background: #060e1a;
  min-height: 100vh;
}

#boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  /* 가운데는 은은하게 밝고, 바깥으로 갈수록 투명 — 뒤 화면이 더 비침 */
  background:
    radial-gradient(34% 30% at 50% 46%, rgba(126, 200, 255, 0.24), transparent 72%),
    radial-gradient(70% 60% at 50% 46%, rgba(56, 189, 248, 0.14), transparent 75%),
    rgba(6, 14, 26, 0.52);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #e6f2ff;
  font-family: 'Noto Sans KR', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: center;
  animation: boot-splash-in 0.35s ease both;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-backdrop-filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.55s;
}

/* 걷힐 때: 흐림이 풀리면서 내용은 살짝 커지며 사라짐 */
html.site-ready #boot-splash {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}

html.site-ready #boot-splash .boot-splash__mark,
html.site-ready #boot-splash .boot-splash__text,
html.site-ready #boot-splash .boot-splash__tip {
  transform: scale(1.04);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes boot-splash-in {
  from {
    opacity: 0;
  }
}

.boot-splash__mark {
  position: relative;
  width: 84px;
  height: 84px;
}

.boot-splash__icon {
  position: absolute;
  inset: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: url('/apple-touch-icon.png') center / cover no-repeat;
  box-shadow: 0 0 22px rgba(126, 200, 255, 0.35);
  animation: boot-splash-breathe 2.4s ease-in-out infinite;
}

/* 아이콘 주위 회전 링 */
.boot-splash__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(126, 200, 255, 0.16);
  border-top-color: #38bdf8;
  border-right-color: #7ec8ff;
  animation: boot-splash-spin 0.9s linear infinite;
}

.boot-splash__text {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.boot-splash__dots::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: boot-splash-dots 1.2s steps(4, end) infinite;
}

.boot-splash__tip {
  margin: 0;
  max-width: 22rem;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(230, 242, 255, 0.66);
}

@keyframes boot-splash-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes boot-splash-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}

@keyframes boot-splash-dots {
  0% {
    content: '';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75% {
    content: '...';
  }
}

@media (prefers-reduced-motion: reduce) {
  #boot-splash {
    transition: none;
  }
  .boot-splash__icon,
  .boot-splash__ring,
  .boot-splash__dots::after {
    animation: none;
  }
}