/* ===========================================================================
 * HERO SNEEUW — .rom-snow
 * ---------------------------------------------------------------------------
 * ELEMENTOR, TWEE HANDELINGEN:
 *   1. Hero-container → Style → Background → Type op NONE.
 *      Het verloop komt vanaf nu uit deze CSS.
 *   2. Hero-container → Advanced → CSS Classes → rom-snow   (staat er al)
 *
 * WAAROM HET VERLOOP VERHUIST
 * Zodra een kind van de container een transform animeert, promoveert Chrome
 * dat kind naar een eigen GPU-laag. De container moet dat kind clippen
 * (overflow: hidden), dus wordt de container zélf ook opnieuw gerasterd —
 * in tegels van ongeveer 512px. Elke tegel dithert het verloop nét anders
 * en dat zie je als rechthoeken. Zonder de class gebeurt dat niet, en dat
 * klopt precies met wat je zag.
 *
 * Staat het verloop op een aparte, stilstaande pseudo-laag, dan valt het
 * buiten die hertekening. De ruis in diezelfde laag dekt de rest af.
 *
 * OPBOUW
 *   ::before   verloop + ruis   (stil, achter de inhoud)
 *   ::after    de kristallen    (animeert, vóór de inhoud)
 *
 * Sneeuw vóór de tekst is bewust: dat oogt natuurlijker dan sneeuw die
 * achter de titel verdwijnt. De laag vangt geen klikken op.
 *
 * WERKT HET NIET? Zet `rom-snow-static` erbij als tweede class. Dan valt
 * alle animatie weg, promoveert er niets, en is het raster gegarandeerd
 * verdwenen. De kristallen blijven staan.
 * ======================================================================== */

.rom-snow {
	position: relative;
	overflow: hidden;
	background: none;   /* Elementor hoeft hier niets meer te zetten */

	/* Verloop — drie stops, want CSS kent de tweekleurenlimiet van de
	   Elementor-picker niet. Drie stops betekent kortere overgangen en dus
	   ook minder banding. */
	--c1: #0d3a2a;
	--c2: #14503a;
	--c3: #1f3b83;
	--angle: 160deg;

	--tile: 640px;   /* groter = minder kristallen per scherm */
	--dx:    90px;   /* zijwaartse drift per ronde; blijf onder 140px */
}

/* ── Laag 1: verloop + ruis. Stil, dus nooit gepromoveerd. ──────────── */
.rom-snow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
		linear-gradient(var(--angle), var(--c1) 0%, var(--c2) 45%, var(--c3) 100%);
	background-size: 180px 180px, cover;
	background-repeat: repeat, no-repeat;
}

/* ── Laag 2: de kristallen ──────────────────────────────────────────── */
.rom-snow::after {
	content: "";
	position: absolute;
	left: -140px;
	right: -140px;
	top: calc(var(--tile) * -1);
	height: calc(100% + var(--tile));
	z-index: 0;
	pointer-events: none;   /* klikken gaan door naar de knop eronder */

	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22640%22%20height=%22640%22%20viewBox=%220%200%20640%20640%22%3E%3Cg%20fill=%22none%22%20stroke=%22%23fff%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cg%20transform=%22translate(105%2088)%20rotate(14)%22%20stroke-width=%221.1%22%20stroke-opacity=%220.42%22%3E%3Cdefs%3E%3Cpath%20id=%22s1%22%20d=%22M0%200%20V-13.50%20M0%20-5.22%20L3.38%20-8.59%20M0%20-5.22%20L-3.38%20-8.59%20M0%20-8.90%20L2.30%20-11.35%20M0%20-8.90%20L-2.30%20-11.35%20M0%20-11.66%20L1.38%20-13.50%20M0%20-11.66%20L-1.38%20-13.50%22/%3E%3C/defs%3E%3Cuse%20href=%22%23s1%22%20transform=%22rotate(0)%22/%3E%3Cuse%20href=%22%23s1%22%20transform=%22rotate(60)%22/%3E%3Cuse%20href=%22%23s1%22%20transform=%22rotate(120)%22/%3E%3Cuse%20href=%22%23s1%22%20transform=%22rotate(180)%22/%3E%3Cuse%20href=%22%23s1%22%20transform=%22rotate(240)%22/%3E%3Cuse%20href=%22%23s1%22%20transform=%22rotate(300)%22/%3E%3Cpolygon%20points=%221.8,0.0%200.9,1.6%20-0.9,1.6%20-1.8,0.0%20-0.9,-1.6%200.9,-1.6%22/%3E%3C/g%3E%3Cg%20transform=%22translate(455%20372)%20rotate(51)%22%20stroke-width=%220.9%22%20stroke-opacity=%220.35%22%3E%3Cdefs%3E%3Cpath%20id=%22s2%22%20d=%22M0%200%20V-9.50%20M0%20-3.67%20L2.38%20-6.05%20M0%20-3.67%20L-2.38%20-6.05%20M0%20-6.26%20L1.62%20-7.99%20M0%20-6.26%20L-1.62%20-7.99%20M0%20-8.20%20L0.97%20-9.50%20M0%20-8.20%20L-0.97%20-9.50%22/%3E%3C/defs%3E%3Cuse%20href=%22%23s2%22%20transform=%22rotate(0)%22/%3E%3Cuse%20href=%22%23s2%22%20transform=%22rotate(60)%22/%3E%3Cuse%20href=%22%23s2%22%20transform=%22rotate(120)%22/%3E%3Cuse%20href=%22%23s2%22%20transform=%22rotate(180)%22/%3E%3Cuse%20href=%22%23s2%22%20transform=%22rotate(240)%22/%3E%3Cuse%20href=%22%23s2%22%20transform=%22rotate(300)%22/%3E%3Cpolygon%20points=%221.3,0.0%200.6,1.1%20-0.6,1.1%20-1.3,0.0%20-0.6,-1.1%200.6,-1.1%22/%3E%3C/g%3E%3Cg%20transform=%22translate(258%20521)%20rotate(33)%22%20stroke-width=%220.75%22%20stroke-opacity=%220.3%22%3E%3Cdefs%3E%3Cpath%20id=%22s3%22%20d=%22M0%200%20V-6.50%20M0%20-2.51%20L1.62%20-4.14%20M0%20-2.51%20L-1.62%20-4.14%20M0%20-4.28%20L1.11%20-5.47%20M0%20-4.28%20L-1.11%20-5.47%20M0%20-5.61%20L0.66%20-6.50%20M0%20-5.61%20L-0.66%20-6.50%22/%3E%3C/defs%3E%3Cuse%20href=%22%23s3%22%20transform=%22rotate(0)%22/%3E%3Cuse%20href=%22%23s3%22%20transform=%22rotate(60)%22/%3E%3Cuse%20href=%22%23s3%22%20transform=%22rotate(120)%22/%3E%3Cuse%20href=%22%23s3%22%20transform=%22rotate(180)%22/%3E%3Cuse%20href=%22%23s3%22%20transform=%22rotate(240)%22/%3E%3Cuse%20href=%22%23s3%22%20transform=%22rotate(300)%22/%3E%3Cpolygon%20points=%220.9,0.0%200.4,0.8%20-0.4,0.8%20-0.9,0.0%20-0.4,-0.8%200.4,-0.8%22/%3E%3C/g%3E%3Cg%20transform=%22translate(561%20167)%20rotate(68)%22%20stroke-width=%220.7%22%20stroke-opacity=%220.26%22%3E%3Cdefs%3E%3Cpath%20id=%22s4%22%20d=%22M0%200%20V-5.50%20M0%20-2.12%20L1.38%20-3.50%20M0%20-2.12%20L-1.38%20-3.50%20M0%20-3.62%20L0.94%20-4.62%20M0%20-3.62%20L-0.94%20-4.62%20M0%20-4.75%20L0.56%20-5.50%20M0%20-4.75%20L-0.56%20-5.50%22/%3E%3C/defs%3E%3Cuse%20href=%22%23s4%22%20transform=%22rotate(0)%22/%3E%3Cuse%20href=%22%23s4%22%20transform=%22rotate(60)%22/%3E%3Cuse%20href=%22%23s4%22%20transform=%22rotate(120)%22/%3E%3Cuse%20href=%22%23s4%22%20transform=%22rotate(180)%22/%3E%3Cuse%20href=%22%23s4%22%20transform=%22rotate(240)%22/%3E%3Cuse%20href=%22%23s4%22%20transform=%22rotate(300)%22/%3E%3Cpolygon%20points=%220.8,0.0%200.4,0.6%20-0.4,0.6%20-0.8,0.0%20-0.4,-0.6%200.4,-0.6%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: var(--tile) var(--tile);

	animation: rom-snow-fall 13s linear infinite;
}

/* Exact één tegelhoogte per ronde, dus de lus springt niet. */
@keyframes rom-snow-fall {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--dx), var(--tile), 0); }
}

@media (max-width: 767px) {
	.rom-snow { --tile: 480px; }
}

@media (prefers-reduced-motion: reduce) {
	.rom-snow::after { animation: none; }
}

/* ---------------------------------------------------------------------------
 * BIJSTELLEN — extra class naast rom-snow
 * ------------------------------------------------------------------------ */

/* Vangnet: alles stil. Niets promoveert, dus geen raster. Mogelijk. */
.rom-snow.rom-snow-static::after { animation: none; }

.rom-snow.rom-snow-light { --tile: 900px; }
.rom-snow.rom-snow-light::after { animation-duration: 36s; }

.rom-snow.rom-snow-heavy { --tile: 440px; }
.rom-snow.rom-snow-heavy::after { animation-duration: 16s; }

/* Zie je nog een spoor van banden? Grovere korrel. */
.rom-snow.rom-dither-strong::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
		linear-gradient(var(--angle), var(--c1) 0%, var(--c2) 45%, var(--c3) 100%);
}