/* Pietra sospesa — Paket D1: zwei ruhige 3D-Felder.
   Seitenspezifisch, absichtlich nicht in site.css: betrifft nur diese
   Projektseite, keine globale Designänderung (Plan PLAN-GESAMT-ASTRA.md,
   Paket D1, Ausgänge). Nutzt bestehende Tokens aus site.css (--bg-2, --ease,
   --line, .fig-caption), fügt aber keine davon neu ein. */

.showcase3d {
  margin-block: clamp(56px, 8vh, 96px);
}

.showcase3d-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 4 / 3;
}

/* Ab 900 CSS-Px: die im Auftrag verlangte Feldhöhe (80 svh, höchstens 900px).
   Unterhalb bleibt es ein normales, responsives Bildformat (siehe Media Query
   weiter unten) — dort wird ohnehin nur das Standbild gezeigt. */
@media (min-width: 900px) {
  .showcase3d-frame {
    aspect-ratio: auto;
    height: 80vh;
    height: 80svh;
    max-height: 900px;
  }
}

.showcase3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}

.showcase3d-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.showcase3d-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.7s var(--ease);
}

/* Sobald das 3D-Feld einen ersten Frame gezeichnet hat, blendet die Engine
   diese Klasse ein: Canvas sichtbar, Standbild weicht. Ohne diese Klasse
   (Mobile, reduzierte Bewegung, WebGL-Fehler) bleibt das Standbild einzige
   sichtbare Ebene — es wird nie verdeckt. */
.showcase3d.is-live .showcase3d-canvas { opacity: 1; }
.showcase3d.is-live .showcase3d-poster img { opacity: 0; }

.showcase3d .fig-caption { margin-top: 14px; }