/* 3D-Glaswürfel. Größe über --cube (Kantenlänge), alle Maße skalieren mit.
   ACHTUNG CSS-3D: opacity < 1, filter oder overflow: hidden auf .cube-box oder
   ihren 3D-Kindern macht den Würfel flach. Ein-/Ausblenden und Filter daher nur
   auf .cube-stage (dem Perspektive-Container), nie darunter. */

@keyframes cube-core-spin {
  from {
    transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-20deg) rotateY(360deg);
  }
}

@keyframes cube-core-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

.cube-stage {
  --cube: 300px;
  --half: calc(var(--cube) / 2);
  --u: calc(var(--cube) / 300);
  position: relative;
  width: var(--cube);
  height: var(--cube);
  perspective: calc(1300 * var(--u));
  perspective-origin: 50% 45%;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cube-stage * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cube-stage.is-dragging {
  cursor: grabbing;
}

.cube-stage[data-static] {
  cursor: default;
  touch-action: auto;
}

.cube-box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-16deg) rotateY(-24deg);
  will-change: transform;
}

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

.cube-face {
  position: absolute;
  inset: 0;
  border-radius: calc(22 * var(--u));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--glass-fill) 0%,
    var(--glass-clear) 34%,
    var(--glass-clear) 62%,
    var(--glass-fill) 100%
  );
  box-shadow:
    inset 0 0 0 1.5px var(--glass-edge),
    inset 0 0 0 3px var(--glass-rim),
    inset 0 0 calc(46 * var(--u)) var(--glass-inner),
    inset 0 calc(-26 * var(--u)) calc(50 * var(--u)) var(--glass-depth);
}

.cube-face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0) 30%,
    var(--sheen) 44%,
    rgba(255, 255, 255, 0) 58%
  );
  pointer-events: none;
}

.cube-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      calc(120 * var(--u)) calc(70 * var(--u)) at 12% 100%,
      var(--glass-tint-a),
      transparent
    ),
    radial-gradient(
      calc(140 * var(--u)) calc(80 * var(--u)) at 100% 0%,
      var(--glass-tint-b),
      transparent
    );
  pointer-events: none;
}

.f0 {
  transform: translateZ(var(--half));
}
.f1 {
  transform: rotateY(90deg) translateZ(var(--half));
}
.f2 {
  transform: rotateY(180deg) translateZ(var(--half));
}
.f3 {
  transform: rotateY(270deg) translateZ(var(--half));
}
.ft {
  transform: rotateX(90deg) translateZ(var(--half));
}
.fb {
  transform: rotateX(-90deg) translateZ(var(--half));
}

.cube-face-in {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: calc(26 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cube-face-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: max(8px, calc(10 * var(--u)));
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;
  color: var(--face-meta);
}

.cube-face-head span:last-child {
  text-align: right;
}

.cube-face-foot {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}

.cube-face-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 90%;
  font-size: calc(34 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  hyphens: manual;
}

.cube-face .mw-chip {
  font-size: max(8px, calc(10 * var(--u)));
}

/* Lesbarkeit auf dem klareren Glas: weicher Hof in Grundfarbe hinter Titel und Kopf. */
.cube-face-title,
.cube-face-head {
  text-shadow: 0 0 calc(14 * var(--u)) var(--glass-text-halo);
}

/* Angrenzende Seiten beruhigen: Nur die gewählte Fläche (.is-front, von home.js gesetzt)
   zeigt ihre Schrift voll. Die Opazität sitzt auf dem flachen Inhalt einer Fläche, nie
   auf dem 3D-Stapel. In der Kontaktphase dreht der Würfel; dort bleibt alles sichtbar. */
.cube-face-in {
  transition: opacity 0.45s ease;
}

.cube-stage[data-front-marked] .cube-face:not(.is-front) .cube-face-in {
  opacity: var(--face-side-opacity);
}

.hero[data-phase='footer'] .cube-stage[data-front-marked] .cube-face-in {
  opacity: 1;
}

/* Voxel-Kern: gedämpft, damit er hinter dem Glas liegt statt zu leuchten */
.cube-core {
  position: absolute;
  left: calc(85 * var(--u));
  top: calc(85 * var(--u));
  width: calc(130 * var(--u));
  height: calc(130 * var(--u));
  transform-style: preserve-3d;
  animation: cube-core-spin 14s linear infinite;
}

.cube-core-face {
  position: absolute;
  inset: 0;
  border-radius: calc(10 * var(--u));
  animation: cube-core-pulse 3s ease-in-out infinite;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 calc(20 * var(--u)),
      var(--core-line) calc(20 * var(--u)) calc(22 * var(--u))
    ),
    repeating-linear-gradient(
      90deg,
      var(--core-line-soft) 0 calc(20 * var(--u)),
      var(--core-line) calc(20 * var(--u)) calc(22 * var(--u))
    );
  box-shadow:
    0 0 calc(18 * var(--u)) var(--core-glow),
    inset 0 0 calc(20 * var(--u)) var(--core-inner);
}

.c0 {
  transform: translateZ(calc(65 * var(--u)));
}
.c1 {
  transform: rotateY(90deg) translateZ(calc(65 * var(--u)));
}
.c2 {
  transform: rotateY(180deg) translateZ(calc(65 * var(--u)));
}
.c3 {
  transform: rotateY(270deg) translateZ(calc(65 * var(--u)));
}
.c4 {
  transform: rotateX(90deg) translateZ(calc(65 * var(--u)));
}
.c5 {
  transform: rotateX(-90deg) translateZ(calc(65 * var(--u)));
}

.cube-floor {
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--floor-a), var(--floor-b) 55%, var(--ground-0));
  pointer-events: none;
}