/* ============================================================
   efacon – 3D-Bühne im Hero (assets/js/stage3d.js)
   Das Foto entsteht an seinem alten Platz aus Lichtpunkten.
   ============================================================ */
:root { --hp0: 1; --hero-t: 0; --hero-crisp: 0; --head-h: 88px; }

/* Desktop: der Hero wird 3 Bildschirme hoch, sein Inhalt klebt unter der
   Kopfzeile, der Scroll treibt die Szene. */
.hero.stage3d { padding: 0; overflow: visible; }
.has-hero-gl .hero.stage3d { height: 300vh; }
.stage3d-sticky {
  position: relative; min-height: calc(100svh - var(--head-h)); overflow: hidden;
  display: flex; align-items: center; padding: 60px 0 80px;
}
.has-hero-gl .stage3d-sticky { position: sticky; top: var(--head-h); height: calc(100svh - var(--head-h)); padding: 0; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage3d-sticky > .container { width: 100%; }
.has-hero-gl .stage3d-sticky .hero-grid { padding-top: 56px; }
/* Der Text bleibt lesbar, während die Punkte fliegen: weicher dunkler Hof dahinter */
.stage3d .hero-content { position: relative; }
.stage3d .hero-content::before {
  content: ''; position: absolute; inset: -40px -60px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 40% 50%, rgba(10,13,10,0.92), rgba(10,13,10,0.6) 55%, transparent 80%);
  opacity: calc(1 - var(--hero-crisp) * 0.5);
}

/* Anker: die Stelle des alten Fotos. Rahmen und Schatten der Fotokarte entfallen,
   die Figuren stehen frei im Raum. */
.stage3d-anchor { width: 100%; max-width: 440px; aspect-ratio: 3/4; align-self: stretch;
  background: transparent; border: 0; box-shadow: none; overflow: visible; }
.stage3d-anchor::before { display: none; }
.stage3d-glow {
  position: absolute; inset: -10% -20%; pointer-events: none; opacity: var(--hero-crisp);
  background: radial-gradient(ellipse 48% 55% at 50% 62%, rgba(157,211,30,0.22), rgba(157,211,30,0.06) 55%, transparent 76%);
  filter: none; z-index: 0;
}
.stage3d-fallback { display: none; }
.stage3d-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--bg-0) 0%, transparent 10%);
}

/* "Scroll to watch": groß, oben, verblasst beim ersten Scrollen */
.scroll-hint {
  position: absolute; left: 50%; top: 3%; translate: -50% 0; z-index: 3;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 26px 14px 18px; border-radius: 999px;
  border: 1px solid rgba(157,211,30,0.6); background: rgba(10,13,10,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--text); font-size: 15px; letter-spacing: .26em; text-transform: uppercase;
  opacity: var(--hp0); pointer-events: none; transition: opacity .3s ease;
  box-shadow: 0 0 40px rgba(157,211,30,0.18);
}
.scroll-hint i { width: 20px; height: 30px; border: 1.5px solid var(--accent); border-radius: 11px; position: relative; display: block; }
.scroll-hint i::after {
  content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px;
  border-radius: 2px; background: var(--accent); animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* Schmale Bildschirme: kein Kleben (der Text wäre abgeschnitten), die Szene
   läuft von selbst ab, sobald sie sichtbar ist. */
@media (max-width: 880px) {
  .has-hero-gl .hero.stage3d { height: auto; }
  .has-hero-gl .stage3d-sticky { position: relative; height: auto; min-height: 0; padding: 40px 0 60px; }
  .scroll-hint { display: none; }
  .stage3d-anchor { max-width: 360px; margin: 0 auto; aspect-ratio: 3/4; }
}

/* Standbild ohne WebGL2 oder bei reduzierter Bewegung */
.no-hero-gl .stage3d-fallback { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--radius-lg); }
.no-hero-gl .stage3d-anchor { background: var(--bg-2); border: 1px solid var(--line); box-shadow: var(--shadow-strong); overflow: hidden; }
.no-hero-gl .stage3d-anchor::before { display: block; }
.no-hero-gl .scroll-hint, .no-hero-gl #hero-canvas { display: none; }