/* COLIGHT&SOUND · Hero-Effekte für Unterseiten
   Gleiche Bildsprache wie der Startseiten-Hero: Schwarz, weißes Licht, 64-px-Raster, Spot folgt der Maus.
   hero-fx.js legt die Ebenen hinter den Kopf der ersten Sektion (h1 + Einleitung). */

.fx-host { position: relative; isolation: isolate; }

.fx {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--fx-h, 640px);
  z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.fx > * { position: absolute; inset: 0; pointer-events: none; }

/* wie .hero auf der Startseite */
.fx-glow { background: radial-gradient(ellipse 60% 50% at 70% 0%, rgba(255,255,255,.055), transparent 70%); }
.fx-grid {
  background-image:
    linear-gradient(var(--line, #282828) 1px, transparent 1px),
    linear-gradient(90deg, var(--line, #282828) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(60% 70% at 72% 25%, #000, transparent 75%);
          mask-image: radial-gradient(60% 70% at 72% 25%, #000, transparent 75%);
  opacity: .32;
}
.fx-spot { background: radial-gradient(circle 300px at var(--mx, 72%) var(--my, 22%), rgba(255,255,255,.065), transparent 70%); }
.fx canvas { width: 100%; height: 100%; display: block; }

/* Standard-Motiv: der Doppel-Beam der Startseite, kleiner und nach rechts versetzt */
.fx-beam {
  top: -10% !important; left: 70% !important; right: auto !important; bottom: auto !important;
  width: 2200px; height: 2200px; transform-origin: center top;
  background: conic-gradient(from 178deg at 50% 0%, transparent 0deg, rgba(255,255,255,.12) 6deg, rgba(255,255,255,.02) 13deg, transparent 20deg, transparent 340deg, rgba(255,255,255,.02) 347deg, rgba(255,255,255,.12) 354deg, transparent 360deg);
  animation: fx-sweep 14s ease-in-out infinite;
  filter: blur(1px);
}
@keyframes fx-sweep {
  0%, 100% { transform: translateX(-50%) rotate(-9deg); }
  50% { transform: translateX(-50%) rotate(9deg); }
}

@media (max-width: 720px) {
  .fx { height: var(--fx-h-m, 520px); }
  .fx-grid { -webkit-mask-image: radial-gradient(90% 60% at 60% 10%, #000, transparent 75%); mask-image: radial-gradient(90% 60% at 60% 10%, #000, transparent 75%); opacity: .25; }
  .fx-beam { left: 62% !important; }
  .fx canvas { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) { .fx-beam { animation: none; } }
html.motion-off .fx-beam { animation: none; }