/* =====================================================================
   Hero-Bühne in WebGPU (hero.js, hero-gpu.js)
   Eine Leinwand hinter Bühne und HUD: Kennfeld, Kraftstoffstrom, Punktmatrix-
   Boden und das als Glas gerechnete HUD-Panel. Lage und Größe setzt hero.js
   (Bühne plus 6 % Rand, mit Glas-HUD zusätzlich dessen Fläche). Ohne WebGPU
   und WebGL2 bleibt die Ersatzzeichnung (site.css, .hero-still).
   ===================================================================== */
.hero-cv{position:absolute;left:0;top:0;z-index:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.hero.is-gl .hero-cv{opacity:1}
.hero.nogl .hero-cv{display:none}
.hero-stage .hv-area{z-index:1}

/* Punktmatrix: im GPU-Modus liegt sie als perspektivischer Boden in der Szene, in 2D und Tabelle wieder flach */
.hero::before{transition:opacity .5s var(--ease)}
.hero.is-gpu:not(.is-flat)::before{opacity:0}
/* ohne Glas-HUD (Mobil) blendet die Leinwand in 2D und Tabelle ganz aus */
.hero.is-flat:not(.gpu-glass) .hero-cv{opacity:0}

/* Liquid Glass 2.0: Füllung, Brechung, Farbzerlegung und Glanzkante des HUD rechnet der Shader;
   das DOM-HUD trägt Text und Bedienung, sein Schatten bleibt */
.hero.gpu-glass .hud{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--sh-3)}
.hero.gpu-glass .hud::before{opacity:0}

@media (forced-colors:active){
  .hero.gpu-glass .hud{background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
}