/* CSS-only cube, sharing the hero's pause and visibility controls. */
.brand-core.rubik-scene {
  --cube-size: clamp(130px, 15vw, 188px);
  --cubie-size: calc(var(--cube-size) / 3);
  position: absolute; inset: 50% auto auto 50%;
  width: var(--cube-size); height: var(--cube-size);
  padding: 0; border-radius: 0; background: none; box-shadow: none;
  transform: translate(-50%, -50%); perspective: 1000px;
}
.motion-enabled .brand-core.rubik-scene { animation: none; }
.rubik-cube, .rubik-layer { position: absolute; inset: 0; transform-style: preserve-3d; }
.rubik-cube { transform: rotateX(-23deg) rotateY(-30deg) rotateZ(-7deg); animation: rubik-revolve 24s linear infinite paused; }
.rubik-layer-top { animation: rubik-top-turn 12s cubic-bezier(.65, 0, .25, 1) infinite paused; }
.rubik-layer-bottom { animation: rubik-bottom-turn 12s cubic-bezier(.65, 0, .25, 1) infinite paused; }
.rubik-cubie {
  position: absolute; width: var(--cubie-size); height: var(--cubie-size);
  left: calc((var(--x) + 1) * var(--cubie-size)); top: calc((var(--y) + 1) * var(--cubie-size));
  transform: translateZ(calc(var(--z) * var(--cubie-size))); transform-style: preserve-3d;
}
.rubik-face {
  position: absolute; inset: 1.5px; display: grid; place-items: center;
  border: 1px solid #ffffff24; border-radius: 5px; background: #151216;
  box-shadow: inset 1px 1px 2px #ffffff25, inset -2px -2px 4px #0006;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.rubik-face-front { transform: translateZ(calc(var(--cubie-size) / 2)); }
.rubik-face-back { transform: rotateY(180deg) translateZ(calc(var(--cubie-size) / 2)); }
.rubik-face-right { transform: rotateY(90deg) translateZ(calc(var(--cubie-size) / 2)); }
.rubik-face-left { transform: rotateY(-90deg) translateZ(calc(var(--cubie-size) / 2)); }
.rubik-face-top { transform: rotateX(90deg) translateZ(calc(var(--cubie-size) / 2)); }
.rubik-face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cubie-size) / 2)); }
.rubik-tile-red { background: linear-gradient(135deg, #f52c22, #b90804); }
.rubik-tile-deep-red { background: linear-gradient(135deg, #a51518, #570a10); }
.rubik-tile-charcoal { background: linear-gradient(135deg, #383039, #151116); }
.rubik-tile-ivory { background: linear-gradient(135deg, #fff, #bcbcc6); }
.rubik-tile-brand { background: #161015; }
.rubik-tile-internal { background: #110e11; border-color: #252027; }
.rubik-face img { width: 74%; height: auto; }
.rubik-wordmark { position: absolute; top: 145%; left: 50%; transform: translateX(-50%); font: 500 .62rem/1.5 ui-monospace, SFMono-Regular, monospace; letter-spacing: .24em; color: #ded8df; }
.motion-enabled .hero.is-active-scene .rubik-cube, .motion-enabled .hero.is-active-scene .rubik-layer { animation-play-state: running; }
@keyframes rubik-revolve {
  from { transform: rotateX(-23deg) rotateY(-30deg) rotateZ(-7deg); }
  to { transform: rotateX(-23deg) rotateY(330deg) rotateZ(-7deg); }
}
@keyframes rubik-top-turn {
  0%, 9% { transform: rotateY(0deg); }
  18%, 34% { transform: rotateY(90deg); }
  43%, 59% { transform: rotateY(180deg); }
  68%, 84% { transform: rotateY(270deg); }
  93%, 100% { transform: rotateY(360deg); }
}
@keyframes rubik-bottom-turn {
  0%, 22% { transform: rotateY(0deg); }
  31%, 47% { transform: rotateY(-90deg); }
  56%, 72% { transform: rotateY(-180deg); }
  81%, 89% { transform: rotateY(-270deg); }
  98%, 100% { transform: rotateY(-360deg); }
}
@media (max-width: 900px) {
  /* Flatten the copy wrapper so the cube sits between copy and actions. */
  .hero-layout { row-gap: 0; }
  .hero-copy-block { display: contents; }
  .hero-copy-block > .eyebrow { order: 0; }
  .hero-copy-block > h1 { order: 1; }
  .hero-copy-block > .hero-copy { order: 2; margin-bottom: 0; }
  .hero-layout > .innovation-visual { order: 3; margin-top: 24px; margin-bottom: 32px; }
  .hero-copy-block > .hero-actions { order: 4; width: 100%; }
  .hero-copy-block > .founder-strip { order: 5; margin-top: 28px; }
  .brand-core.rubik-scene { --cube-size: clamp(122px, 34vw, 180px); }
  .rubik-cube { animation-duration: 28s; }
  .rubik-layer-top { animation-duration: 16s; }
  .rubik-layer-bottom { animation: none; }
  .rubik-face { box-shadow: inset 1px 1px 2px #ffffff20; }
  .rubik-wordmark { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .rubik-cube, .rubik-layer { animation: none; } }