/* =====================================================================
 * Light Pillar
 *
 * Der siebte der portierten Effekte. Er liegt fest im Bildfenster
 * hinter dem gesamten Inhalt und traegt die Seite durchgehend von oben
 * bis unten. Beim Scrollen wandert er nicht mit, der Inhalt zieht an
 * ihm vorbei.
 *
 * Damit er ueberhaupt zu sehen ist, geben die dunklen Baender ihren
 * Grund frei. Ihre Farbe kommt dann vom Koerper darunter, der ohnehin
 * auf --fy-ink steht. Die hellen Baender bleiben deckend, dort ist der
 * Strahl bewusst nicht zu sehen: Papier traegt selbst.
 *
 * Der Strahl mischt sich mit "screen" ein. Schwarz ist dabei neutral,
 * es aendert also nichts; nur das Licht kommt dazu. Genau deshalb faellt
 * der Effekt auf dem schwarzen Grund richtig aus.
 * ===================================================================== */

.fy-pillar-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Der Grund der Seite bleibt liegen, er wird nur durchscheinend.
 *
 * Voellig transparente Baender waeren zu viel: der Strahl ist ein
 * Raymarcher und leuchtet kraeftig. Ueber ihm liegt deshalb weiter die
 * Sektionsfarbe, nur eben nicht mehr deckend. Der Strahl steht dadurch
 * im Hintergrund, wo er hingehoert, und nimmt der Schrift nichts weg.
 *
 * Ohne die Klasse am html-Element bleibt alles wie vorher, das gilt
 * auch fuer Geraete ohne WebGL. */
html:root {
  --fy-veil: rgba(11, 11, 12, 0.72);
}

/* Im hellen Modus liegt der Schleier deutlich duenner. Der warme Stein
 * ist ohnehin hell, und der Strahl haette sonst nichts, wogegen er sich
 * absetzen koennte. */
html[data-fy-theme="light"] {
  --fy-veil: rgba(229, 223, 209, 0.6);
}

html.fy-pillar-on body .fy-hero,
html.fy-pillar-on body .fy-section-ink,
html.fy-pillar-on body .fy-footer {
  background-color: transparent;
  background-image: linear-gradient(var(--fy-veil), var(--fy-veil));
}

/* Der Hero schneidet ab, sonst laeuft nichts ueber seine Kante hinaus.
 * Fuer den festen Hintergrund darf er das nicht, sonst entsteht dort
 * ein neuer Zeichenkontext und der Strahl bricht an der Sektionskante. */
html.fy-pillar-on body .fy-hero {
  overflow: visible;
}

/* =====================================================================
 * Ersatz, wenn kein WebGL da ist
 *
 * Kein leerer schwarzer Kasten: dann traegt ein ruhiger Schein aus zwei
 * Verlaeufen, in denselben Farben. Er ist statisch und kostet nichts.
 * ===================================================================== */
html:not(.fy-pillar-on) .fy-hero,
html:not(.fy-pillar-on) .fy-section-ink,
html:not(.fy-pillar-on) .fy-footer {
  position: relative;
}

html:not(.fy-pillar-on) .fy-hero::before,
html:not(.fy-pillar-on) .fy-section-ink::before,
html:not(.fy-pillar-on) .fy-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 68% -8%, rgba(189, 9, 36, 0.22) 0%, rgba(189, 9, 36, 0.07) 38%, transparent 72%),
    radial-gradient(42% 34% at 18% -6%, rgba(192, 139, 79, 0.1) 0%, transparent 66%);
  background-size: 160% 160%, 160% 160%;
  background-position: 50% 0%, 50% 0%;
  animation: fy-pillar-drift 26s ease-in-out infinite alternate;
}

/* Auch ohne WebGL bewegt sich der Grund. Ein Standbild waere an dieser
 * Stelle ein sichtbarer Unterschied zum Rest der Seite. */
@keyframes fy-pillar-drift {
  from { background-position: 38% 0%, 62% 0%; }
  to   { background-position: 66% 0%, 30% 0%; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.fy-pillar-on) .fy-hero::before,
  html:not(.fy-pillar-on) .fy-section-ink::before,
  html:not(.fy-pillar-on) .fy-footer::before {
    animation: none;
  }
}

html:not(.fy-pillar-on) .fy-hero > *,
html:not(.fy-pillar-on) .fy-section-ink > *,
html:not(.fy-pillar-on) .fy-footer > * {
  position: relative;
  z-index: 1;
}

/* =====================================================================
 * Heller Modus
 *
 * Der Shader gibt sein Alpha aus der Helligkeit aus, dunkle Stellen
 * sind also wirklich durchsichtig. Damit braucht es hier keinen
 * Mischmodus mehr: der Strahl liegt einfach auf dem warmen Stein.
 * "screen" waere hier falsch, es wuerde auf hellem Grund nichts tun,
 * und "multiply" wuerde die Seite verdunkeln statt Licht zu setzen.
 * ===================================================================== */
html[data-fy-theme="light"] .fy-pillar-canvas {
  mix-blend-mode: normal;
  opacity: 0.5;
}