/*
 * 첫 화면 로더 (assets/index.ejs 의 .boot)
 * 2차 함수 골짜기의 등고선 위를 최급강하법(정확한 직선탐색)이 한 걸음씩 내려가 최솟값에 수렴하는 장면.
 * 궤적·꼭짓점 좌표와 Δf 값은 f(u, v) = (u² + 5v²) / 2 를 (-80, 17.5) 에서 10회 반복한 실제 계산 결과다
 * (골짜기는 -12° 회전, 화면 좌표는 (100, 100) 이 최솟값).
 * 프리렌더된 페이지에는 없고(scripts/prerender.js 가 #root ~ </body> 를 교체), index.tsx 가 첫 렌더 뒤에 걷어낸다.
 */
.boot {
  --boot-cycle: 3s; /* index.tsx 의 BOOT_MIN_MS 와 맞춘다 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0B1530;
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

/* 히어로 바닥과 같은 격자를 가운데만 남기고 흐린다 */
.boot::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image:
    linear-gradient(rgba(125, 211, 252, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, transparent 100%);
}

.boot.is-done {
  opacity: 0;
  visibility: hidden;
}

.boot__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.boot__figure {
  position: relative;
  width: 440px;
  max-width: 86vw;
  margin: 0;
  animation: boot-in 0.6s ease-out both;
}

/* 골짜기 바닥의 은은한 빛 */
.boot__figure::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 64%;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: radial-gradient(closest-side, rgba(34, 180, 230, 0.24), rgba(34, 180, 230, 0));
}

.boot__plot {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 바깥(높은 곳)은 깊은 파랑, 바닥으로 갈수록 밝은 시안 */
.boot__iso ellipse {
  fill: none;
  stroke-width: 0.5;
}
.boot__iso ellipse:nth-child(1) { stroke: rgba(96, 130, 246, 0.2); }
.boot__iso ellipse:nth-child(2) { stroke: rgba(90, 150, 248, 0.24); }
.boot__iso ellipse:nth-child(3) { stroke: rgba(84, 172, 248, 0.3); }
.boot__iso ellipse:nth-child(4) { stroke: rgba(80, 194, 248, 0.36); }
.boot__iso ellipse:nth-child(5) { stroke: rgba(90, 214, 250, 0.44); }
.boot__iso ellipse:nth-child(6) { stroke: rgba(110, 230, 252, 0.54); }
.boot__iso ellipse:nth-child(7) { stroke: rgba(140, 242, 255, 0.66); }

/* 수렴하는 순간 바닥에서 등고선을 따라 퍼지는 물결 */
.boot__iso .boot__ripple {
  stroke: rgb(125, 240, 255);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: boot-ripple var(--boot-cycle) cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.boot__trail {
  fill: none;
  stroke: rgb(125, 240, 255);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(125, 240, 255, 0.7));
  animation: boot-trail var(--boot-cycle) cubic-bezier(0.5, 0, 0.2, 1) infinite;
}

.boot__it {
  fill: rgb(200, 250, 255);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation-duration: var(--boot-cycle);
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.boot__head {
  fill: #fff;
  filter: drop-shadow(0 0 3px rgba(125, 240, 255, 0.95));
  animation: boot-head var(--boot-cycle) cubic-bezier(0.5, 0, 0.2, 1) infinite;
}

.boot__min {
  fill: #FBBF24;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.9));
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: boot-min var(--boot-cycle) ease-out infinite;
}

.boot__halo {
  fill: none;
  stroke: #FBBF24;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: boot-halo var(--boot-cycle) cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

/* 반복 횟수와 상대 오차. 히어로 HUD 와 같은 글꼴·색 */
.boot__hud {
  position: relative;
  height: 16px;
  margin: 28px 0 0;
  font: 11px/16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  color: rgba(190, 232, 245, 0.62);
}

.boot__row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 2.4em;
  opacity: 0;
  animation-duration: var(--boot-cycle);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.boot__row b {
  font-weight: 400;
  color: rgba(200, 238, 250, 0.9);
}

.boot__row:last-child,
.boot__row:last-child b {
  color: #FBBF24;
}

.boot__logo {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 128px;
  height: auto;
  margin-left: -64px;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  animation: boot-in 0.6s ease-out both;
}

@keyframes boot-in {
  from { opacity: 0; transform: scale(0.97); }
}

@keyframes boot-min {
  0%, 59.99% { opacity: 0; transform: scale(0); }
  64% { opacity: 1; transform: scale(1.5); }
  70%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes boot-halo {
  0%, 59.99% { opacity: 0; transform: scale(1); }
  60% { opacity: 0.9; transform: scale(1); }
  82%, 100% { opacity: 0; transform: scale(7); }
}

@keyframes boot-ripple {
  0%, 59.99% { opacity: 0; transform: scale(1); }
  60% { opacity: 1; transform: scale(1); }
  70% { opacity: 0.7; }
  88%, 100% { opacity: 0; transform: scale(10.4); }
}

/* ↓ gen: 궤적·꼭짓점·읽음값 시간표 (DRAW 0–60%, 수렴 60–84%, 사라짐 84–94%) */
@keyframes boot-trail {
  0% { stroke-dashoffset: 112.2; opacity: 1; }
  6% { stroke-dashoffset: 74.9; opacity: 1; }
  12% { stroke-dashoffset: 48.56; opacity: 1; }
  18% { stroke-dashoffset: 32.06; opacity: 1; }
  24% { stroke-dashoffset: 20.41; opacity: 1; }
  30% { stroke-dashoffset: 13.11; opacity: 1; }
  36% { stroke-dashoffset: 7.95; opacity: 1; }
  42% { stroke-dashoffset: 4.72; opacity: 1; }
  48% { stroke-dashoffset: 2.44; opacity: 1; }
  54% { stroke-dashoffset: 1.01; opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  84% { stroke-dashoffset: 0; opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes boot-head {
  0% { transform: translate(25.39px, 133.75px); opacity: 1; }
  6% { transform: translate(44.28px, 101.59px); opacity: 1; }
  12% { transform: translate(66.99px, 114.93px); opacity: 1; }
  18% { transform: translate(75.35px, 100.7px); opacity: 1; }
  24% { transform: translate(85.39px, 106.61px); opacity: 1; }
  30% { transform: translate(89.09px, 100.31px); opacity: 1; }
  36% { transform: translate(93.54px, 102.92px); opacity: 1; }
  42% { transform: translate(95.17px, 100.14px); opacity: 1; }
  48% { transform: translate(97.14px, 101.29px); opacity: 1; }
  54% { transform: translate(97.86px, 100.06px); opacity: 1; }
  60% { transform: translate(98.73px, 100.57px); opacity: 1; }
  63% { transform: translate(100px, 100px); opacity: 1; }
  66%, 100% { transform: translate(100px, 100px); opacity: 0; }
}
@keyframes boot-it-1 {
  0%, 5.99% { opacity: 0; transform: scale(0); }
  8% { opacity: 1; transform: scale(1.6); }
  11%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--1 { animation-name: boot-it-1; }
@keyframes boot-it-2 {
  0%, 11.99% { opacity: 0; transform: scale(0); }
  14% { opacity: 1; transform: scale(1.6); }
  17%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--2 { animation-name: boot-it-2; }
@keyframes boot-it-3 {
  0%, 17.99% { opacity: 0; transform: scale(0); }
  20% { opacity: 1; transform: scale(1.6); }
  23%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--3 { animation-name: boot-it-3; }
@keyframes boot-it-4 {
  0%, 23.99% { opacity: 0; transform: scale(0); }
  26% { opacity: 1; transform: scale(1.6); }
  29%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--4 { animation-name: boot-it-4; }
@keyframes boot-it-5 {
  0%, 29.99% { opacity: 0; transform: scale(0); }
  32% { opacity: 1; transform: scale(1.6); }
  35%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--5 { animation-name: boot-it-5; }
@keyframes boot-it-6 {
  0%, 35.99% { opacity: 0; transform: scale(0); }
  38% { opacity: 1; transform: scale(1.6); }
  41%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--6 { animation-name: boot-it-6; }
@keyframes boot-it-7 {
  0%, 41.99% { opacity: 0; transform: scale(0); }
  44% { opacity: 1; transform: scale(1.6); }
  47%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--7 { animation-name: boot-it-7; }
@keyframes boot-it-8 {
  0%, 47.99% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.6); }
  53%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--8 { animation-name: boot-it-8; }
@keyframes boot-it-9 {
  0%, 53.99% { opacity: 0; transform: scale(0); }
  56% { opacity: 1; transform: scale(1.6); }
  59%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--9 { animation-name: boot-it-9; }
@keyframes boot-it-10 {
  0%, 59.99% { opacity: 0; transform: scale(0); }
  62% { opacity: 1; transform: scale(1.6); }
  65%, 84% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(1); }
}
.boot__it--10 { animation-name: boot-it-10; }
@keyframes boot-row-0 {
  0%, 5.99% { opacity: 1; }
  6%, 100% { opacity: 0; }
}
.boot__row--0 { animation-name: boot-row-0; }
@keyframes boot-row-1 {
  0%, 5.99% { opacity: 0; }
  6%, 11.99% { opacity: 1; }
  12%, 100% { opacity: 0; }
}
.boot__row--1 { animation-name: boot-row-1; }
@keyframes boot-row-2 {
  0%, 11.99% { opacity: 0; }
  12%, 17.99% { opacity: 1; }
  18%, 100% { opacity: 0; }
}
.boot__row--2 { animation-name: boot-row-2; }
@keyframes boot-row-3 {
  0%, 17.99% { opacity: 0; }
  18%, 23.99% { opacity: 1; }
  24%, 100% { opacity: 0; }
}
.boot__row--3 { animation-name: boot-row-3; }
@keyframes boot-row-4 {
  0%, 23.99% { opacity: 0; }
  24%, 29.99% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
.boot__row--4 { animation-name: boot-row-4; }
@keyframes boot-row-5 {
  0%, 29.99% { opacity: 0; }
  30%, 35.99% { opacity: 1; }
  36%, 100% { opacity: 0; }
}
.boot__row--5 { animation-name: boot-row-5; }
@keyframes boot-row-6 {
  0%, 35.99% { opacity: 0; }
  36%, 41.99% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
.boot__row--6 { animation-name: boot-row-6; }
@keyframes boot-row-7 {
  0%, 41.99% { opacity: 0; }
  42%, 47.99% { opacity: 1; }
  48%, 100% { opacity: 0; }
}
.boot__row--7 { animation-name: boot-row-7; }
@keyframes boot-row-8 {
  0%, 47.99% { opacity: 0; }
  48%, 53.99% { opacity: 1; }
  54%, 100% { opacity: 0; }
}
.boot__row--8 { animation-name: boot-row-8; }
@keyframes boot-row-9 {
  0%, 53.99% { opacity: 0; }
  54%, 59.99% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
.boot__row--9 { animation-name: boot-row-9; }
@keyframes boot-row-10 {
  0%, 59.99% { opacity: 0; }
  60%, 93.99% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
.boot__row--10 { animation-name: boot-row-10; }