/* ==========================================================================
   JBT — interactive Rubik's cube section ("Every piece has a place")
   Desktop: full-bleed dark stage, copy on the left, cube on the right.
   Phones: a dedicated touch stage for the cube, copy underneath (the rest
   of the section scrolls normally, so the cube never traps the page).
   ========================================================================== */
.rbx {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: radial-gradient(90% 80% at 70% 50%, #1d1d1d 0%, #0b0b0b 64%);
  color: #fbfaf6;
  font-family: "Instrument Sans", system-ui, sans-serif;
}

.rbx__stage { position: absolute; inset: 0; }
.rbx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.rbx.is-dragging .rbx__canvas { cursor: grabbing; }
.rbx.is-busy .rbx__canvas { cursor: progress; }

/* A soft light blooms behind the cube once every side matches */
.rbx__glow {
  position: absolute; left: 66%; top: 50%; width: 78vmin; height: 78vmin; margin: -39vmin 0 0 -39vmin;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 244, 222, .24) 0%, rgba(255, 244, 222, 0) 62%);
  opacity: 0; transform: scale(.7);
  transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1), transform 1.6s cubic-bezier(.22, 1, .36, 1);
}
.rbx.is-solved .rbx__glow { opacity: 1; transform: scale(1); }

.rbx__hint {
  position: absolute; left: 66%; bottom: 34px; transform: translateX(-50%);
  font-size: 13px; letter-spacing: .04em; color: rgba(251, 250, 246, .55); white-space: nowrap; pointer-events: none;
  transition: opacity .6s;
}
.rbx.is-solved .rbx__hint { opacity: 0; }

.rbx__copy {
  position: absolute; z-index: 2;
  left: clamp(16px, 5vw, 72px); top: 50%; transform: translateY(-50%);
  width: min(440px, 38vw);
  pointer-events: none;
}
.rbx__copy a, .rbx__copy button { pointer-events: auto; }
.rbx__eyebrow { display: flex; align-items: center; gap: 12px; font: 500 12px/1 "Instrument Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(251, 250, 246, .7); }
.rbx__eyebrow i { width: 28px; height: 1px; background: currentColor; }

/* Two headlines share one spot: "play" until solved, then "done" */
.rbx__beats { display: grid; margin-top: 26px; }
.rbx__beat { grid-area: 1 / 1; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.rbx__beat--done { opacity: 0; transform: translateY(16px); visibility: hidden; }
.rbx.is-solved .rbx__beat--play { opacity: 0; transform: translateY(-16px); visibility: hidden; }
.rbx.is-solved .rbx__beat--done { opacity: 1; transform: none; visibility: visible; }
.rbx__beat h2 { font: 400 clamp(40px, 4.6vw, 72px)/1 "Instrument Serif", Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.rbx__beat h2 em { font-style: italic; }
.rbx__beat p { margin-top: 20px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: rgba(251, 250, 246, .78); max-width: 38ch; }
.rbx__cta { display: inline-flex; margin-top: 22px; color: #fbfaf6; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(251, 250, 246, .5); padding-bottom: 4px; }

.rbx__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rbx__btn {
  font: 500 15px/1 "Instrument Sans", sans-serif; padding: 14px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(251, 250, 246, .45); background: transparent; color: #fbfaf6;
  transition: background .3s, color .3s, opacity .3s, transform .3s;
}
.rbx__btn:hover:not(:disabled) { transform: translateY(-2px); }
.rbx__btn--solid { background: #fbfaf6; color: #111; border-color: #fbfaf6; }
.rbx__btn:disabled { opacity: .35; cursor: default; }
.rbx__btn:focus-visible { outline: 2px solid #fbfaf6; outline-offset: 3px; }
.rbx__status { margin-top: 18px; min-height: 1.2em; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(251, 250, 246, .6); font-variant-numeric: tabular-nums; }

/* Phones & small tablets */
@media (max-width: 899px) {
  .rbx { height: auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: 48px; }
  .rbx__stage { position: relative; inset: auto; height: min(62svh, 118vw); }
  .rbx__glow { left: 50%; }
  .rbx__hint { left: 50%; bottom: 10px; font-size: 12px; }
  .rbx__copy { position: relative; left: auto; top: auto; transform: none; width: auto; padding: 8px 20px 0; }
  .rbx__beats { margin-top: 16px; }
  .rbx__beat h2 { font-size: clamp(34px, 9.5vw, 46px); }
  .rbx__beat p { margin-top: 12px; font-size: 16px; }
  .rbx__actions { margin-top: 22px; }
  .rbx__btn { flex: 1 1 auto; text-align: center; }
}

/* No 3D available: keep the message, hide the controls */
.rbx--no-webgl .rbx__stage, .rbx--no-webgl .rbx__actions, .rbx--no-webgl .rbx__status { display: none; }
@media (prefers-reduced-motion: reduce) { .rbx__beat, .rbx__glow, .rbx__btn { transition: none; } }