/* ==============================================
   MFHU Theme — Background (void, rays, beam, grain)
   ============================================== */

.bg-void {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.bg-ray {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0;
	transition: opacity 2.5s ease, transform 2.5s ease;
}

/* Singularity rays — tiszta spektrum */
.r1 { width: 450px; height: 450px; background: var(--prism-arctic); top: -12%; left: -8%; }
.r2 { width: 400px; height: 400px; background: var(--prism-plasma); bottom: -10%; right: -6%; }
.r3 { width: 380px; height: 380px; background: var(--prism-frost); top: 40%; right: 15%; }
.r4 { width: 350px; height: 350px; background: var(--prism-amber); top: 60%; left: 10%; }
.r5 { width: 420px; height: 420px; background: var(--prism-ice); top: -8%; right: 20%; }
.r6 { width: 300px; height: 300px; background: var(--prism-mint); bottom: 15%; left: 40%; }

/* 2x intenzívebb rays */
[data-pg="0"] .r1 { opacity: 0.12; }
[data-pg="0"] .r2 { opacity: 0.10; }
[data-pg="1"] .r3 { opacity: 0.10; }
[data-pg="1"] .r4 { opacity: 0.08; }
[data-pg="2"] .r5 { opacity: 0.12; }
[data-pg="2"] .r6 { opacity: 0.08; }
[data-pg="3"] .r1 { opacity: 0.08; }
[data-pg="3"] .r5 { opacity: 0.10; }
[data-pg="4"] .r2 { opacity: 0.10; }
[data-pg="4"] .r4 { opacity: 0.08; }

/* ---- Prism Beam — 4 rétegű refrakció ---- */
.prism-beam {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	/* mix-blend-mode: screen; */  /* Additív fényhatás — opcionális */
}

/* Layer 1: Wide diffuse base (széles, enyhe blur) */
.prism-beam::before {
	content: '';
	position: absolute;
	width: 220%;
	height: 50%;
	top: 12%;
	left: -60%;
	transform: rotate(-24deg);
	filter: blur(100px);
	opacity: 0;
	transition: opacity 3s ease, transform 3s ease;
	background: linear-gradient(
		90deg,
		transparent 3%,
		rgba(0, 170, 255, 0.12) 7%,      /* kék fade-in */
		rgba(0, 170, 255, 0.18) 11%,     /* kék */
		rgba(0, 213, 170, 0.20) 16%,     /* kék-zöld átmenet */
		rgba(0, 255, 170, 0.22) 21%,     /* zöld */
		rgba(68, 128, 255, 0.22) 26%,    /* zöld-viola átmenet */
		rgba(136, 0, 255, 0.24) 31%,     /* viola */
		rgba(196, 0, 255, 0.23) 36%,     /* viola-magenta átmenet */
		rgba(255, 0, 255, 0.22) 41%,     /* magenta */
		rgba(255, 0, 128, 0.21) 46%,     /* magenta-vörös átmenet */
		rgba(255, 0, 0, 0.20) 51%,       /* vörös */
		rgba(255, 128, 0, 0.20) 56%,     /* vörös-sárga átmenet */
		rgba(255, 255, 0, 0.22) 61%,     /* sárga */
		rgba(255, 255, 128, 0.24) 66%,   /* sárga-fehér átmenet */
		rgba(255, 255, 255, 0.26) 71%,   /* fehér közép */
		rgba(255, 255, 128, 0.24) 76%,   /* fehér-sárga átmenet */
		rgba(255, 255, 0, 0.22) 80%,     /* sárga */
		rgba(255, 0, 0, 0.18) 85%,       /* vörös */
		rgba(255, 0, 255, 0.15) 89%,     /* magenta */
		rgba(136, 0, 255, 0.12) 93%,     /* viola */
		rgba(0, 170, 255, 0.10) 96%,     /* kék fade-out */
		transparent 98%
	);
	animation: beamDrift 16s ease-in-out infinite alternate;
}

/* Layer 2: Narrow intense core (keskeny, erős blur, ellentétes irány) */
.prism-beam::after {
	content: '';
	position: absolute;
	width: 180%;
	height: 28%;
	top: 48%;
	left: -40%;
	transform: rotate(-16deg);
	filter: blur(70px);
	opacity: 0;
	transition: opacity 3s ease, transform 3s ease;
	background: linear-gradient(
		90deg,
		transparent 8%,
		rgba(0, 255, 170, 0.14) 13%,     /* zöld fade-in */
		rgba(0, 255, 170, 0.20) 18%,     /* zöld */
		rgba(68, 128, 255, 0.22) 24%,    /* zöld-viola átmenet */
		rgba(136, 0, 255, 0.24) 30%,     /* viola */
		rgba(196, 0, 255, 0.25) 36%,     /* viola-magenta átmenet */
		rgba(255, 0, 255, 0.26) 42%,     /* magenta */
		rgba(255, 0, 0, 0.24) 48%,       /* vörös */
		rgba(255, 128, 0, 0.22) 54%,     /* vörös-sárga átmenet */
		rgba(255, 255, 0, 0.24) 60%,     /* sárga */
		rgba(255, 255, 255, 0.26) 66%,   /* fehér közép */
		rgba(255, 255, 0, 0.22) 72%,     /* sárga vissza */
		rgba(255, 0, 255, 0.18) 78%,     /* magenta vissza */
		rgba(0, 170, 255, 0.16) 84%,     /* kék */
		rgba(0, 170, 255, 0.12) 90%,     /* kék fade-out */
		transparent 94%
	);
	animation: beamDrift2 20s ease-in-out infinite alternate;
}

@keyframes beamDrift {
	0%   { transform: rotate(-22deg) translateX(-8%); }
	100% { transform: rotate(-19deg) translateX(8%); }
}

@keyframes beamDrift2 {
	0%   { transform: rotate(-18deg) translateX(6%); }
	100% { transform: rotate(-15deg) translateX(-6%); }
}

/* Per-section beam visibility — 2x intenzívebb */
[data-pg="0"] .prism-beam::before { opacity: 1.0; }
[data-pg="0"] .prism-beam::after  { opacity: 0.85; }
[data-pg="1"] .prism-beam::before { opacity: 0.9; transform: rotate(-25deg) translateX(-4%); }
[data-pg="1"] .prism-beam::after  { opacity: 1.0; }
[data-pg="2"] .prism-beam::before { opacity: 1.0; }
[data-pg="2"] .prism-beam::after  { opacity: 0.75; transform: rotate(-12deg) translateX(4%); }
[data-pg="3"] .prism-beam::before { opacity: 0.8; transform: rotate(-28deg) translateX(6%); }
[data-pg="3"] .prism-beam::after  { opacity: 1.0; }
[data-pg="4"] .prism-beam::before { opacity: 1.0; transform: rotate(-20deg) translateX(-6%); }
[data-pg="4"] .prism-beam::after  { opacity: 0.9; transform: rotate(-16deg) translateX(3%); }

/* ---- Grain ---- */
.grain {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.008;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 256px;
}