#icon-banner {
	position: relative;
	width: 100%;
	height: 400px;
	margin-bottom: 40px;
	margin-top: 40px;
	overflow: hidden;
	background-color: rgba(0,0,11,0.5);
	--icon-size: 64px;
	border-radius: 18px;
	text-align: center;
	font-size: 104px;
	line-height: 400px;
	color: rgba(255,255,255,0.04);
	font-weight: bold;

	/* position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #121219; */
}
#grain-layer {
	position: absolute;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background-image: url('/static/images/blog/visuals/nnnoise.svg');
	background-size: 300px 300px;
	background-repeat: repeat;
	will-change: transform;
	width: 200%;
	height: 200%;
	mix-blend-mode: hard-light;
	opacity:0.4;
}

.icon-wrapper {
	position: absolute;
	width: var(--icon-size);
	height: var(--icon-size);
	animation: wrapperAnimation var(--visibility-duration) ease-in-out forwards;
}

@keyframes wrapperAnimation {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(calc(1 * var(--icon-size)));
	}
}

.layer-1 {
	box-shadow: 0 0 10px rgba(0,0,0,1) inset,0 0 10px rgba(0,0,0,1);
	overflow: hidden;
	position: absolute;
	height: var(--icon-size);
	width: var(--icon-size);
	filter: 
		blur(calc((var(--distance) - 0.1) * 3px)) 
		brightness(calc(1 - (var(--distance) - 0.3)));
	border-radius: 8px;
	
}
.layer-2 {
	height: var(--icon-size);
	width: var(--icon-size);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


.layer-clip.layer-1 {
	animation: slideReveal-1 var(--visibility-duration) ease-in-out forwards;
}
.layer-clip .layer-2 {
	animation: slideReveal-2 var(--visibility-duration) ease-in-out forwards;
}
@keyframes slideReveal-1 {
	0% {
		height: 0;
	}
	50% {
		height: var(--icon-size);
		transform: translateY(0);
	}
	100% {
		height: 0;
		transform: translateY(var(--icon-size));
	}
}
@keyframes slideReveal-2 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(calc(-1 * var(--icon-size)));
	}
}

.layer-laser {
	filter: blur(5px) brightness(1.5) contrast(3);
	height: 10px;
	animation: layerLaser calc(var(--visibility-duration) / 2) ease-in-out forwards;
	animation-iteration-count: 2;
}
.layer-laser .layer-2 {
	animation: layerLaser-2 calc(var(--visibility-duration) / 2) ease-in-out forwards;
	animation-iteration-count: 2;
}
@keyframes layerLaser {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateY(var(--icon-size));
		opacity: 0;
	}
}
@keyframes layerLaser-2 {
	0% {
		transform:translateY(0px);
	}
	100% {
		transform:translateY(calc(-1 * var(--icon-size)));
	}
}

/* RGB Split Layers */
.layer-r,
.layer-g,
.layer-b {
	mix-blend-mode: screen;
	opacity: 0.3;
}

.layer-r {
	transform: translate(1px, 1px);
	filter: drop-shadow(0 0 2px red);
}
.layer-g {
	transform: translate(-1px, 1px);
	filter: drop-shadow(0 0 2px green);
}
.layer-b {
	transform: translate(1px, -1px);
	filter: drop-shadow(0 0 2px blue);
}

/* Pixel Slice Layer */
.layer-slice {
	clip-path: polygon(0 30%, 100% 30%, 100% 40%, 0% 40%);
	filter: blur(3px) contrast(2);
	animation: fadeIn var(--visibility-duration) ease-in-out;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeOut {
	to { opacity: 0; transform: scale(0.95); }
}