.animated-hex-background {
	position: relative;
	width: 100%;
	min-height: 1px;
	overflow: hidden;
	background: var(--animated-hex-background, transparent);
	isolation: isolate;
}

.animated-hex-background canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*
 * 背景の上にコンテンツを配置する場合
 */
.animated-hex-section {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.animated-hex-section > .animated-hex-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	z-index: 0;
}

.animated-hex-section > .animated-hex-content {
	position: relative;
	z-index: 1;
}

/*
 * 動きを減らす設定が有効な環境では、
 * JavaScript側でアニメーションを停止して静止画として表示する。
 */
@media (prefers-reduced-motion: reduce) {
	.animated-hex-background canvas {
		animation: none;
	}
}