/* ===========================================================================
   분해도 — 재생 모양 (3D 가 있을 때)

   섹션을 길게 늘여 스크롤 길이를 만들고, 무대를 화면에 붙인다. 스크롤
   위치를 0~1 로 바꿔 3D 와 글을 함께 움직이는 것은 anatomy3d.js 다. 여기서는
   그 값(--a-head, --a-steps, --a-outro, --a-progress)을 받아 그리기만 한다.

   글은 늘 읽혀야 한다. 넓은 화면에서는 왼쪽에 글 기둥을 세우고 그 뒤를
   어둡게 누른다. 기계는 3D 쪽에서 오른쪽으로 비켜 앉힌다(카메라 view offset).
   좁은 화면에서는 지금 단계 하나만 아래쪽 카드로 띄운다.
   =========================================================================== */

/* 캔버스 뒤의 배경 빛. 3D 가 돌 때만 있다(모션 최소화 · 정지 모양에서는 없다). */
.anatomy__pool {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .anatomy:not(.is-static) {
    height: 560vh;
  }

  html.js .anatomy:not(.is-static) .anatomy__stage {
    position: sticky;
    top: var(--anatomy-top);
    height: calc(100vh - var(--anatomy-top));
    height: calc(100svh - var(--anatomy-top));
    max-width: none;
    padding: 0;
    overflow: hidden;
  }

  /* 글 기둥 뒤를 누르는 막. 3D 가 아무리 밝아도 글이 읽히게 한다.
     글은 오른쪽이다 — 기계는 급지부가 왼쪽 앞으로 오는 시점이라 오른쪽에는
     멀어지는 구분부 끝만 걸린다. */
  html.js .anatomy:not(.is-static) .anatomy__stage::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    /* 글 기둥 전체는 거의 까맣게, 그 왼쪽 180px 에서만 풀린다. */
    width: calc(var(--anatomy-col) + max(var(--nx-sp-6), (100vw - var(--nx-container-wide)) / 2) + 200px);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.9) calc(100% - 180px), transparent 100%);
    opacity: var(--a-steps, 0);
    pointer-events: none;
  }

  html.js .anatomy:not(.is-static) .anatomy__canvas {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 1s ease-out;
  }

  html.js .anatomy:not(.is-static) .anatomy__canvas.is-ready {
    opacity: 1;
  }

  /* 무대 뒤의 은은한 빛. 자리(transform)와 밝기(--a-pool)는 anatomy-stage.js 가
     정한다 — 화면에서 기계 뒤에 머문다. WebGL 로 화면 전체를 한 번 더 칠하는
     대신 그러데이션 하나다. #0c0f13 보다 밝히지 않는다: 검게 녹는 안개 위에서
     기계의 윤곽이 잘려 보인다. 캔버스가 준비된 뒤에만, 캔버스처럼 1초에 걸쳐
     켠다(:has() 를 모르는 브라우저에서는 꺼진 채로 남는다). */
  html.js .anatomy:not(.is-static) .anatomy__pool {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 110vmin;
    height: 64vmin;
    margin: -32vmin 0 0 -55vmin; /* 가운데가 transform 의 점에 온다 */
    background: radial-gradient(closest-side, #0c0f13 0%, rgba(9, 11, 14, 0.7) 40%, transparent 100%);
    opacity: 0;
    transition: opacity 1s ease-out;
    will-change: transform;
    pointer-events: none;
  }

  html.js .anatomy:not(.is-static) .anatomy__stage:has(> .anatomy__canvas.is-ready) > .anatomy__pool {
    opacity: var(--a-pool, 0);
  }

  /* ── 머리: 처음에만 보이고 분해가 시작되면 위로 빠진다 ── */

  html.js .anatomy:not(.is-static) .anatomy__head {
    position: absolute;
    inset: clamp(28px, 7vh, 72px) 0 auto;
    z-index: 2;
    margin: 0 auto;
    padding: 0 var(--nx-sp-6);
    opacity: var(--a-head, 1);
    transform: translateY(calc((1 - var(--a-head, 1)) * -40px));
    pointer-events: none;
  }

  html.js .anatomy:not(.is-static) .anatomy__hint {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-sp-2);
    margin-top: var(--nx-sp-6);
    font-size: var(--nx-fs-xs);
    color: var(--nx-text-invert-2);
  }

  .anatomy__mouse {
    position: relative;
    width: 16px;
    height: 24px;
    border: 1.5px solid currentColor;
    border-radius: 9px;
  }

  .anatomy__mouse::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 2px;
    height: 5px;
    margin-left: -1px;
    border-radius: 1px;
    background: currentColor;
    animation: anatomy-wheel 1.8s ease-in-out infinite;
  }

  @keyframes anatomy-wheel {
    0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; }
  }

  /* ── 장 목록 ───────────────────────────────────────────── */

  html.js .anatomy:not(.is-static) .anatomy__steps {
    position: absolute;
    right: max(var(--nx-sp-6), calc((100vw - var(--nx-container-wide)) / 2));
    top: 50%;
    z-index: 2;
    width: var(--anatomy-col);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-50%);
    opacity: var(--a-steps, 0);
    pointer-events: none;
  }

  html.js .anatomy:not(.is-static) .anatomy__steps.is-on { pointer-events: auto; }

  html.js .anatomy:not(.is-static) .anatomy__step {
    padding: var(--nx-sp-3) 0 var(--nx-sp-3) var(--nx-sp-5);
    border-radius: 0;
    background: none;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
    opacity: 0.42;
    transition: opacity var(--nx-t-normal), border-color var(--nx-t-normal);
  }

  html.js .anatomy:not(.is-static) .anatomy__step.is-active {
    opacity: 1;
    border-left-color: var(--nx-accent-dark);
  }

  html.js .anatomy:not(.is-static) .anatomy__step.is-done {
    opacity: 0.62;
  }

  html.js .anatomy:not(.is-static) .anatomy__jump {
    cursor: pointer;
  }

  html.js .anatomy:not(.is-static) .anatomy__jump:focus-visible {
    outline: 2px solid var(--nx-accent-dark);
    outline-offset: 4px;
    border-radius: 4px;
  }

  /* 펼침은 높이를 grid 트랙으로 여닫는다. height:auto 는 애니메이션이 안 된다. */
  html.js .anatomy:not(.is-static) .anatomy__detail {
    display: grid;
    /* 본문 · 소프트웨어 두 줄이다. */
    grid-template-rows: 0fr 0fr;
    transition: grid-template-rows var(--nx-t-slow);
  }

  html.js .anatomy:not(.is-static) .anatomy__detail > * {
    min-height: 0;
    overflow: hidden;
  }

  html.js .anatomy:not(.is-static) .anatomy__step.is-active .anatomy__detail {
    grid-template-rows: 1fr 1fr;
  }

  /* ── 끝맺음 ────────────────────────────────────────────── */

  /* 끝맺음 글 뒤를 아래에서부터 누른다. 조립된 기계가 글 뒤로 지나간다. */
  html.js .anatomy:not(.is-static) .anatomy__stage::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    height: 48%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.75) 55%, transparent 100%);
    opacity: var(--a-outro, 0);
    pointer-events: none;
  }

  html.js .anatomy:not(.is-static) .anatomy__outro {
    position: absolute;
    inset: auto 0 clamp(40px, 10vh, 110px);
    z-index: 2;
    margin: 0 auto;
    padding: 0 var(--nx-sp-6);
    opacity: var(--a-outro, 0);
    transform: translateY(calc((1 - var(--a-outro, 0)) * 30px));
    pointer-events: none;
  }

  html.js .anatomy:not(.is-static) .anatomy__outro.is-on { pointer-events: auto; }

  /* ── 지시선 · 진행 막대 ────────────────────────────────── */

  html.js .anatomy:not(.is-static) .anatomy__leader {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    opacity: 0;
    transition: opacity var(--nx-t-normal);
  }

  html.js .anatomy:not(.is-static) .anatomy__leader.is-on { opacity: 1; }

  .anatomy__leader line {
    stroke: var(--nx-accent-dark);
    stroke-width: 1.25;
    stroke-dasharray: 3 4;
  }

  html.js .anatomy:not(.is-static) .anatomy__progress {
    display: block;
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
  }

  .anatomy__progress span {
    display: block;
    height: 100%;
    background: var(--nx-accent-dark);
    transform-origin: 0 50%;
    transform: scaleX(var(--a-progress, 0));
  }

  html.js .anatomy:not(.is-static) .anatomy__note {
    position: absolute;
    right: var(--nx-sp-6);
    bottom: var(--nx-sp-4);
    z-index: 2;
    margin: 0;
    text-align: right;
    opacity: 0.75;
  }
}