/* ==========================================================================
   /box — the teardown. box.js sets --p (0..1) from scroll position through
   #inside; everything below turns --p into motion.
   ========================================================================== */

.bx-inside { --p: 0; position: relative; height: 300vh; background: var(--s-white); }
.bx-inside__stick {
  position: sticky; top: calc(var(--nav-h) + var(--lnav-h));
  height: calc(100vh - var(--nav-h) - var(--lnav-h));
  display: flex; align-items: center; overflow: hidden;
}
.bx-inside__wrap { display: grid; gap: 8px; justify-items: center; }
.bx-inside__head { text-align: center; max-width: 46rem; }
.bx-steps { display: grid; margin-top: 12px; min-height: 2.6em; }
.bx-step {
  grid-area: 1 / 1; font-size: var(--t-bodyl); line-height: var(--l-bodyl); font-weight: 500; color: var(--fg-2);
  opacity: 0; transform: translateY(8px); transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}
.bx-step.is-on { opacity: 1; transform: none; transition: opacity 400ms var(--ease-in) 180ms, transform 400ms var(--ease-in) 180ms; }

.bx-art { width: 100%; max-width: 1000px; }
.bx-svg { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--nav-h) - var(--lnav-h) - 11rem); margin: 0 auto; overflow: visible; }

/* The side panel slides out along the box's own width axis (right and down
   in this view), then fades so the board is clear. Units are millimetres,
   converted with the drawing's isometric vector (1.2557, 0.725). */
.bx-inside {
  --slide: clamp(0, calc((var(--p) - .12) * 300), 125);
  --fade: clamp(0, calc((var(--p) - .45) * 2.6), .9);
}
.bx-panel { transform: translate(calc(var(--slide) * 1.2557px), calc(var(--slide) * .725px)); opacity: calc(1 - var(--fade)); }

.bx-co { opacity: 0; transition: opacity 350ms var(--ease); }
.bx-inside[data-co="1"] .bx-co--1,
.bx-inside[data-co="2"] .bx-co--1, .bx-inside[data-co="2"] .bx-co--2,
.bx-inside[data-co="3"] .bx-co--1, .bx-inside[data-co="3"] .bx-co--2, .bx-inside[data-co="3"] .bx-co--3,
.bx-inside[data-co="4"] .bx-co { opacity: 1; }

.bx-fan { animation: bx-spin 1.8s linear infinite; animation-play-state: paused; transform-box: view-box; }
.bx-inside[data-co] .bx-fan { animation-play-state: running; }
@keyframes bx-spin { to { transform: rotate(360deg); } }

.bx-facts { display: none; }

@media (max-width: 834px) {
  .bx-inside { height: 220vh; }
  .bx-callouts { display: none; }
  .bx-svg { max-height: 40vh; }
  .bx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .bx-facts li { background: var(--s-grey); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
  .bx-facts b { font-size: 14px; font-weight: 600; }
  .bx-facts span { font-size: 12px; line-height: 16px; color: var(--fg-2); }
}

@media (prefers-reduced-motion: reduce) {
  .bx-inside { height: auto; --p: 1; }
  .bx-inside__stick { position: static; height: auto; padding: 80px 0; }
  .bx-co { opacity: 1; }
  .bx-step { opacity: 0; } .bx-step[data-step="2"] { opacity: 1; transform: none; }
  .bx-fan { animation: none; }
}