/* ===========================================================================
   분해도 — 불러오는 동안의 표시

   3D 가 뜨기 전, 기계가 설 자리에 띄운다(켜고 끄는 것은 anatomy-load.js).
   판 세 장이 벌어졌다 모이는 그림은 이 섹션이 하는 일 — 분해와 조립 — 을
   그대로 줄인 것이다. 그 아래에 지금 하는 일 한 줄과 가는 막대.

   움직임은 transform 과 opacity 만 쓴다. 기계를 짓는 동안 메인 스레드가
   막혀도 합성 단계에서 계속 돈다. 막대도 scaleX 로 채운다 — 너비를 바꾸면
   막힌 동안 멈춘다.

   켜질 때 조금 늦게 켠다. 금방 끝나면 깜빡이기만 하고 사라지는 것을 막는다.
   =========================================================================== */

.anatomy__loader {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .anatomy:not(.is-static) .anatomy__loader {
    display: flex;
    position: absolute;
    left: 50%;
    top: 60%;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--nx-sp-4);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
    text-align: center;
  }

  html.js .anatomy.is-loading:not(.is-static) .anatomy__loader {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease 0.2s;
  }

  /* 판 세 장. 아이소메트릭으로 눕힌 정사각형이다. */
  .anatomy__layers {
    position: relative;
    width: 104px;
    height: 112px;
  }

  .anatomy__layers i {
    position: absolute;
    left: 16px;
    top: 20px;
    width: 72px;
    height: 72px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background: rgba(41, 151, 255, 0.05);
    will-change: transform;
    animation: 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .anatomy__layers i:nth-child(1) {
    border-color: var(--nx-accent-dark);
    background: rgba(41, 151, 255, 0.14);
    animation-name: anatomy-part-top;
  }

  .anatomy__layers i:nth-child(2) {
    animation-name: anatomy-part-mid;
  }

  .anatomy__layers i:nth-child(3) {
    border-color: rgba(255, 255, 255, 0.3);
    animation-name: anatomy-part-low;
  }

  @keyframes anatomy-part-top {
    0%, 12%, 100% { transform: translateY(-12px) rotateX(60deg) rotateZ(45deg); }
    42%, 64% { transform: translateY(-30px) rotateX(60deg) rotateZ(45deg); }
  }

  @keyframes anatomy-part-mid {
    0%, 12%, 100% { transform: translateY(0) rotateX(60deg) rotateZ(45deg); }
    42%, 64% { transform: translateY(0) rotateX(60deg) rotateZ(45deg); }
  }

  @keyframes anatomy-part-low {
    0%, 12%, 100% { transform: translateY(12px) rotateX(60deg) rotateZ(45deg); }
    42%, 64% { transform: translateY(30px) rotateX(60deg) rotateZ(45deg); }
  }

  .anatomy__loading {
    margin: 0;
    font-size: var(--nx-fs-sm);
    color: var(--nx-text-invert-2);
  }

  .anatomy__meter {
    display: block;
    width: 160px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
  }

  .anatomy__meter span {
    display: block;
    height: 100%;
    background: var(--nx-accent-dark);
    transform-origin: left center;
    transform: scaleX(var(--a-load, 0.04));
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}