/**
 * ▼CSS：bg-hackingGate.css
 * position:fixed の子要素に影響しないよう調整
 * ༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶❀༶⊰⟡⊱༶⊰⟡⊱༶⊰⟡⊱༶༄ */
/* メッシュグラデーション用プロパティ */
@property --x-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 85%;
}

@property --y-0 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 80%;
}

@property --c-0 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(60, 20%, 100%, 0.2);
}

@property --x-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 20%;
}

@property --y-1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 30%;
}

@property --c-1 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(60, 20%, 100%, 0.2);
}

@property --x-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 70%;
}

@property --y-2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 60%;
}

@property --c-2 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(256, 50%, 100%, 0.2);
}

@property --x-3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 40%;
}

@property --y-3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 90%;
}

@property --c-3 {
	syntax: '<color>';
	inherits: false;
	initial-value: hsla(238, 16%, 100%, 0.15);
}

/* メッシュグラデーションアニメーション */
@keyframes meshFlow4ioA {
	0% {
		--x-0: 85%;
		--y-0: 80%;
		--c-0: hsla(60, 20%, 100%, 0.2);
		--x-1: 20%;
		--y-1: 30%;
		--c-1: hsla(60, 20%, 100%, 0.2);
		--x-2: 70%;
		--y-2: 60%;
		--c-2: hsla(256, 50%, 100%, 0.2);
		--x-3: 40%;
		--y-3: 90%;
		--c-3: hsla(238, 16%, 100%, 0.15);
	}

	25% {
		--x-0: 30%;
		--y-0: 20%;
		--c-0: hsla(70, 43%, 100%, 0.2);
		--x-1: 90%;
		--y-1: 70%;
		--c-1: hsla(70, 43%, 95%, 0.2);
		--x-2: 10%;
		--y-2: 50%;
		--c-2: hsla(253, 30%, 40%, 0.15);
		--x-3: 60%;
		--y-3: 10%;
		--c-3: hsla(256, 50%, 29%, 0.2);
	}

	50% {
		--x-0: 10%;
		--y-0: 90%;
		--c-0: hsla(100, 2%, 100%, 0.15);
		--x-1: 50%;
		--y-1: 50%;
		--c-1: hsla(100, 2%, 73%, 0.15);
		--x-2: 95%;
		--y-2: 20%;
		--c-2: hsla(238, 16%, 52%, 0.125);
		--x-3: 20%;
		--y-3: 70%;
		--c-3: hsla(253, 30%, 40%, 0.15);
	}

	75% {
		--x-0: 60%;
		--y-0: 40%;
		--c-0: hsla(60, 20%, 100%, 0.25);
		--x-1: 5%;
		--y-1: 85%;
		--c-1: hsla(60, 20%, 99%, 0.25);
		--x-2: 50%;
		--y-2: 95%;
		--c-2: hsla(236, 13%, 50%, 0.2);
		--x-3: 85%;
		--y-3: 30%;
		--c-3: hsla(70, 43%, 95%, 0.15);
	}

	100% {
		--x-0: 85%;
		--y-0: 80%;
		--c-0: hsla(60, 20%, 100%, 0.2);
		--x-1: 20%;
		--y-1: 30%;
		--c-1: hsla(60, 20%, 100%, 0.2);
		--x-2: 70%;
		--y-2: 60%;
		--c-2: hsla(256, 50%, 100%, 0.2);
		--x-3: 40%;
		--y-3: 90%;
		--c-3: hsla(238, 16%, 100%, 0.15);
	}
}

/* メインコンテナ - will-changeとtransformを削除 */
.bg-hackingGate {
	position: relative;
	display: flow-root;
	background-color: hsla(243, 33%, 100%, 1);
	background-image:
		radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) 5%, transparent 45%),
		radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) 8%, transparent 55%),
		radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) 10%, transparent 50%),
		radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) 12%, transparent 60%),
		linear-gradient(313deg,
			hsla(243, 33%, 100%, 0.9) 0%,
			hsla(243, 33%, 96%, 0.7) 25%,
			hsla(238, 16%, 88%, 0.6) 50%,
			hsla(243, 33%, 96%, 0.8) 75%,
			hsla(243, 33%, 100%, 0.95) 100%);
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 350% 350%;
	background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
	animation: meshFlow4ioA 30s cubic-bezier(0.4, 0.0, 0.6, 1.0) infinite;
	/* will-change と transform: translateZ(0) を削除 */
}

/* ::before用のグリッチ */
@keyframes beforeGlitch4ioA {
	0%,
	98.5%,
	100% {
		transform: translate(0) scale(1);
		filter: brightness(1) contrast(1);
	}

	98.8% {
		transform: translate(20px, -2px) scale(1.01);
		filter: brightness(1.02) contrast(1.5);
	}

	99% {
		transform: translate(-30px, 1px) scale(0.99);
		filter: brightness(0.98) contrast(1.3);
	}

	99.2% {
		transform: translate(10px, 3px) scale(1.005);
		filter: brightness(1.01) contrast(1.2);
	}

	99.4% {
		transform: translate(-10px, -2px) scale(1.002);
		filter: brightness(0.99) contrast(1.1);
	}

	99.7% {
		transform: translate(20px, 0) scale(0.998);
		filter: brightness(1.03) contrast(1.15);
	}
}

/* テクスチャとパターン層 */
.bg-hackingGate::before {
	content: '';
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background:
		url('https://i.gyazo.com/fbd860a7417f6b2b62ba86aa68a681ea.png'),
		url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" seed="5"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.02"/></svg>'),
		repeating-linear-gradient(45deg,
			transparent,
			transparent 3px,
			hsla(253, 30%, 40%, 0.02) 3px,
			hsla(253, 30%, 40%, 0.02) 6px),
		repeating-radial-gradient(circle at 50% 50%,
			transparent 0,
			transparent 20px,
			hsla(238, 16%, 52%, 0.01) 20px,
			hsla(238, 16%, 52%, 0.01) 21px);
	background-size: 800px 600px, 300px 300px, 50px 50px, 100px 100px;
	background-repeat: repeat;
	opacity: 0.06;
	mix-blend-mode: multiply;
	animation: beforeGlitch4ioA 5s linear infinite;
	will-change: transform, opacity;
	transform: translateZ(0);
}

/* サブピクセルノイズ用のプロパティ */
@property --noise-lines {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.00008px;
}

@property --noise-shift {
	syntax: "<length>";
	inherits: false;
	initial-value: 0.00012px;
}

/* ノイズアニメーション */
@keyframes noiseDist4ioA {
	0% {
		--noise-lines: 0.00008px;
		--noise-shift: 0.00012px;
	}

	12.5% {
		--noise-lines: 0.00010px;
		--noise-shift: 0.00014px;
	}

	25% {
		--noise-lines: 0.00009px;
		--noise-shift: 0.00011px;
	}

	37.5% {
		--noise-lines: 0.00011px;
		--noise-shift: 0.00013px;
	}

	50% {
		--noise-lines: 0.00007px;
		--noise-shift: 0.00015px;
	}

	62.5% {
		--noise-lines: 0.00012px;
		--noise-shift: 0.00010px;
	}

	75% {
		--noise-lines: 0.00009px;
		--noise-shift: 0.00013px;
	}

	87.5% {
		--noise-lines: 0.00010px;
		--noise-shift: 0.00011px;
	}

	100% {
		--noise-lines: 0.00008px;
		--noise-shift: 0.00012px;
	}
}

/* ノイズの色変化 */
@keyframes noiseColor4ioA {

	0%,
	100% {
		background-position: 0 0, 0% 0%, 0 0;
	}

	25% {
		background-position: 0 0, 50% 50%, 0 -2px;
	}

	50% {
		background-position: 0 0, 100% 100%, 0 -4px;
	}

	75% {
		background-position: 0 0, 50% 50%, 0 -2px;
	}
}

/* ::after用のグリッチ */
@keyframes afterGlitch4ioA {

	0%,
	98.5%,
	100% {
		transform: translate(0) scale(1);
		filter: contrast(1.2);
	}

	98.7% {
		transform: translate(-20px, 2px) scale(1.02);
		filter: contrast(2);
	}

	98.9% {
		transform: translate(30px, -1px) scale(0.98);
		filter: contrast(0.8);
	}

	99.1% {
		transform: translate(-10px, -3px) scale(1.01);
		filter: contrast(1.5);
	}

	99.3% {
		transform: translate(20px, 1px) scale(0.99);
		filter: contrast(1.8);
	}

	99.5% {
		transform: translate(-30px, 0) scale(1.005);
		filter: contrast(1.1);
	}

	99.6% {
		transform: translate(10px, -2px) scale(1);
		filter: contrast(1.3);
	}
}

/* サブピクセルノイズ層 - STEINS;GATE風 */
.bg-hackingGate::after {
	content: '';
	position: absolute;
	top: -25%;
	left: -25%;
	width: 100%;
	height: 100%;
	pointer-events: none;

	/* サブピクセルノイズマスク */
	mask: repeating-radial-gradient(circle at center,
			#000,
			var(--noise-lines),
			#000,
			0,
			#0000,
			calc(var(--noise-lines) * 2),
			#0000 0);

	background:
		url('https://i.gyazo.com/24c670e79e2ca28a060f210caaeb93cc.jpg'),
		/* グラデーション */
		linear-gradient(135deg,
			hsla(253, 30%, 40%, 0.8) 0%,
			hsla(256, 50%, 29%, 0.6) 25%,
			hsla(238, 16%, 52%, 0.7) 50%,
			hsla(236, 13%, 50%, 0.6) 75%,
			hsla(253, 30%, 40%, 0.8) 100%),
		/* 追加のスキャンライン */
		repeating-linear-gradient(0deg,
			transparent,
			transparent 2px,
			hsla(256, 50%, 29%, 0.1) 2px,
			hsla(256, 50%, 29%, 0.1) 3px);
	background-size: 800px 600px, 200% 200%, 100% 4px;
	background-position: 0 0, 0 0, 0 0;

	/* アニメーション */
	animation:
		noiseDist4ioA 45s linear infinite,
		noiseColor4ioA 20s ease-in-out infinite,
		afterGlitch4ioA 9s linear infinite;

	mix-blend-mode: overlay;
	opacity: 0.1;
	filter: contrast(1.2);
	will-change: transform, opacity, mask;
	transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {

	.bg-hackingGate,
	.bg-hackingGate::before,
	.bg-hackingGate::after {
		animation-duration: 60s;
	}
}