<div class="wrap">
  <div class="scene">
    <div class="cube" id="cube">
      <div class="face front">
        <span class="step-label">Step 1 / 4</span>
        <h3>Welcome</h3>
        <p>This onboarding carousel swaps steps by rotating a true 3D cube instead of sliding or fading — each step lives on its own face.</p>
      </div>
      <div class="face right">
        <span class="step-label">Step 2 / 4</span>
        <h3>Connect your data</h3>
        <p>Link your accounts to start syncing. Nothing here is a flat image — every face is real interactive content.</p>
      </div>
      <div class="face back">
        <span class="step-label">Step 3 / 4</span>
        <h3>Invite your team</h3>
        <p>Add teammates by email. They will see this exact same onboarding cube when they first sign in.</p>
      </div>
      <div class="face left">
        <span class="step-label">Step 4 / 4</span>
        <h3>You are ready</h3>
        <p>That is the whole flow. Click Finish to close, or Prev to rotate back through the earlier steps.</p>
      </div>
    </div>
  </div>

  <div class="controls">
    <button id="prevBtn">&larr; Prev</button>
    <div class="dots" id="dots"></div>
    <button id="nextBtn">Next &rarr;</button>
  </div>
</div>

* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #0f172a; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 40px 20px; }

.wrap { width: 100%; max-width: 340px; }

.scene { perspective: 1400px; width: 100%; height: 260px; margin-bottom: 22px; }
.cube {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.65,0,0.35,1);
  transform: translateZ(-150px) rotateY(0deg);
}

.face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 16px; padding: 26px;
  background: linear-gradient(160deg, #1e293b, #111827);
  border: 1px solid rgba(148,163,184,0.25);
  display: flex; flex-direction: column; justify-content: center;
  backface-visibility: hidden;
}
.front { transform: rotateY(0deg) translateZ(150px); }
.right { transform: rotateY(90deg) translateZ(150px); }
.back  { transform: rotateY(180deg) translateZ(150px); }
.left  { transform: rotateY(270deg) translateZ(150px); }

.step-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: #818cf8; text-transform: uppercase; margin-bottom: 10px; }
h3 { font-size: 18px; font-weight: 800; color: #f1f5f9; margin: 0 0 10px; }
p { font-size: 13px; line-height: 1.65; color: #94a3b8; margin: 0; }

.controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
button {
  padding: 10px 16px; border-radius: 9px; border: 1.5px solid rgba(148,163,184,0.3);
  background: transparent; color: #e2e8f0; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
button:hover { border-color: #6366f1; background: rgba(99,102,241,0.12); }
button:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.dots { display: flex; gap: 6px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(148,163,184,0.4); transition: background 0.2s, transform 0.2s; }
.dots span.active { background: #6366f1; transform: scale(1.4); }

const cube = document.getElementById('cube');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const dotsEl = document.getElementById('dots');
const STEPS = 4;
let current = 0;

for (let i = 0; i < STEPS; i++) {
  const dot = document.createElement('span');
  if (i === 0) dot.classList.add('active');
  dotsEl.appendChild(dot);
}

function render() {
  // Each face sits translateZ(150px) off the cube's own rotation center, so
  // rotating the whole .cube by -90deg per step brings the next face to the
  // front in true 3D (not a fake width/scale trick) while translateZ(-150px)
  // keeps the cube centered inside the .scene perspective box.
  cube.style.transform = "translateZ(-150px) rotateY(" + (-current * 90) + "deg)";
  [...dotsEl.children].forEach((dot, i) => dot.classList.toggle('active', i === current));
  prevBtn.disabled = current === 0;
  nextBtn.textContent = current === STEPS - 1 ? 'Finish' : 'Next \u2192';
}

prevBtn.addEventListener('click', () => {
  if (current > 0) { current--; render(); }
});
nextBtn.addEventListener('click', () => {
  if (current < STEPS - 1) { current++; render(); }
  else { current = 0; render(); }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight') nextBtn.click();
  if (e.key === 'ArrowLeft') prevBtn.click();
});

render();