/* DFP Glitch-Hintergrund – VHS-Rauschen in 240p.
   Das Bild selbst rechnet dfp-glitch-bg.js in ein <canvas>. Hier liegen nur
   Position, Hochskalierung, Scanlines und Randabdunklung.

   Alles Einstellbare läuft über die CSS-Variablen unten. Überschreiben in Bricks
   unter Settings -> Custom Code -> Custom CSS (oder Theme Styles). */

:root {
	/* Hintergrundfarbe unter dem Effekt. */
	--dfp-glitch-bg: #000;

	/* Deckkraft des VHS-Bildes (0 = aus, 1 = voll). */
	--dfp-glitch-opacity: 0.2;

	/* Zeilenanzahl. 240 = 240p. Kleiner = gröber (z. B. 144), größer = feiner.
	   Wird auch vom JavaScript gelesen – Änderung wirkt nach Neuladen. */
	--dfp-glitch-lines: 240;

	/* Bildrate. 24 wirkt filmisch, 30 wie Fernsehen. Der Loop hat 96 Frames. */
	--dfp-glitch-fps: 24;

	/* Hochskalierung. auto = weich und verwaschen wie Band,
	   pixelated = harte Pixelblöcke. */
	--dfp-glitch-scaling: auto;

	/* Stärke der Scanlines (0 = aus, 1 = schwarze Lücken). */
	--dfp-glitch-scanlines: 0.45;

	/* Stapelebene. -1 = hinter dem Inhalt. */
	--dfp-glitch-z: -1;
}

/* Farbgrund liegt auf html, damit der fixierte Layer darüber sichtbar bleibt
   und beim Überscrollen (iOS-Bounce) keine helle Kante auftaucht. */
html {
	background-color: var(--dfp-glitch-bg);
}

/* body muss durchsichtig sein, sonst deckt er den Layer ab.
   Die Klasse kommt vom Plugin – dadurch gewinnt die Regel ohne !important. */
body.dfp-glitch-active {
	background-color: transparent;
}

.dfp-glitch {
	position: fixed;
	inset: 0;
	z-index: var(--dfp-glitch-z);
	pointer-events: none;
	overflow: hidden;
	background-color: var(--dfp-glitch-bg);
	contain: strict;
}

.dfp-glitch__canvas {
	display: block;
	width: 100%;
	height: 100%;
	opacity: var(--dfp-glitch-opacity);
	image-rendering: var(--dfp-glitch-scaling);
}

/* Scanlines: genau eine dunkle Lücke pro gerechneter Zeile, damit sie
   auf jeder Bildschirmgröße deckungsgleich mit dem 240p-Raster liegen. */
.dfp-glitch::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to bottom,
		transparent 50%,
		rgba(0, 0, 0, var(--dfp-glitch-scanlines)) 50%
	);
	background-size: 100% calc(100% / var(--dfp-glitch-lines));
}

/* Leichte Randabdunklung wie bei einer Röhre. */
.dfp-glitch::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}

/* ---------------------------------------------------------------
   Nur auf einzelnen Seiten anders, z. B. kräftiger:

   body.page-id-42 { --dfp-glitch-opacity: 0.35; }
   --------------------------------------------------------------- */