/* Octachoron — the 8-cell (tesseract) as a CSS 4-polytope
   Schläfli {4,3,3}. Inner cube scale is the W-projection of a 4D rotation. */

.octa4 {
  position: absolute;
  inset: 0;
  perspective: 900px;
  background: radial-gradient(circle at 50% 48%, #0c1420, #03050a 68%);
}

.octa4__space {
  position: absolute;
  inset: 16%;
  transform-style: preserve-3d;
  transform: rotateX(calc(-18deg + (var(--py, 0.5) - 0.5) * -14deg))
    rotateY(calc(28deg + (var(--px, 0.5) - 0.5) * 18deg));
  animation: octa4-yaw 28s linear infinite;
}

@keyframes octa4-yaw {
  to {
    transform: rotateX(-18deg) rotateY(388deg);
  }
}

.octa4__cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.octa4__cube--inner {
  inset: 24%;
  animation: octa4-w 7s ease-in-out infinite;
}

@keyframes octa4-w {
  0%,
  100% {
    transform: scale3d(0.55, 0.55, 0.55) rotateZ(0deg);
  }
  50% {
    transform: scale3d(0.92, 0.92, 0.92) rotateZ(180deg);
  }
}

.octa4__face {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(130, 210, 255, 0.55);
  background: linear-gradient(
    135deg,
    rgba(90, 170, 255, 0.16),
    rgba(170, 90, 255, 0.1) 55%,
    rgba(226, 177, 90, 0.08)
  );
  box-shadow: inset 0 0 24px rgba(80, 160, 255, 0.12);
}

.octa4__cube--inner .octa4__face {
  border-color: rgba(226, 177, 90, 0.55);
  background: linear-gradient(
    135deg,
    rgba(226, 177, 90, 0.2),
    rgba(90, 170, 255, 0.1)
  );
}

.octa4__face--front {
  transform: translateZ(50%);
}
.octa4__face--back {
  transform: rotateY(180deg) translateZ(50%);
}
.octa4__face--right {
  transform: rotateY(90deg) translateZ(50%);
}
.octa4__face--left {
  transform: rotateY(-90deg) translateZ(50%);
}
.octa4__face--top {
  transform: rotateX(90deg) translateZ(50%);
}
.octa4__face--bot {
  transform: rotateX(-90deg) translateZ(50%);
}

.octa4__strut {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 28%;
  margin: -14% 0 0 -1px;
  background: linear-gradient(180deg, rgba(130, 210, 255, 0.85), rgba(226, 177, 90, 0.7));
  transform-origin: 50% 0;
  transform: rotateZ(calc(var(--a) * 1deg)) rotateX(38deg);
  box-shadow: 0 0 8px rgba(130, 210, 255, 0.45);
  opacity: 0.7;
}

.octa4__jewel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.28rem;
  border-radius: 50%;
  background: #e8f6ff;
  box-shadow: 0 0 12px rgba(130, 210, 255, 0.9);
  transform: rotateY(calc(var(--a) * 1deg)) translateZ(52%);
}

.octa4__label {
  position: absolute;
  right: 8%;
  bottom: 8%;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: rgba(130, 210, 255, 0.55);
  pointer-events: none;
}

.art-vitrine.is-paused .octa4__space,
.art-vitrine.is-paused .octa4__cube--inner {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .octa4__space,
  .octa4__cube--inner {
    animation: none !important;
  }
}