@import '../../scss/_mixins';

//global.module.scss
.section {
	border-bottom: 1px solid var(--primary-dark);
	
	max-height: 1500px;
	height: 120vh;
	justify-content: center;
	
	> .container {
		height: fit-content;
	}
	
	.preHeader {
		color: var(--secondary);
		font-family: var(--font-accent);
		font-size: 1.2rem;
		font-weight: 400;
		margin: 1rem 0;
	}
	
	.header {
		color: var(--primary-bright);
		font-family: var(--font-sans);
		font-size: 5rem;
		margin: 0;
	}
	
	.primaryDim {
		color: var(--primary-dim);
	}
	
	.primaryBright {
		color: var(--primary);
	}

	.tempBright {
		font-size: .875rem;
		width: 60%;
	}

	.gitBadges {
		position: relative;
		display: flex;
		gap: .5rem;
		flex-wrap: wrap;
		height: 1rem;
		img {
			height: 16px;
			width: fit-content;
			border-radius: .25rem;
		}
	}

	@include media($max: $mobile) {
		.preHeader {
			font-size: 1rem;
		}
		.header {
			font-size: 2.9rem;
		}
		.tempBright {
			width: 100%;
			padding-right: 1rem;
		}
		button {
			font-size: .875rem;
			padding: 0.75rem 2rem;
		}
	}
}

// Backgrounds
.colorfulV1 {
	--hero-gradient-bg-1: var(--neon-1-1);
	--hero-gradient-bg-2: var(--neon-1-2);
	--hero-gradient-bg-3: var(--neon-2-1);
	--hero-gradient-bg-4: var(--neon-2-2);
	
	position: absolute;
	pointer-events: none;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	
	.svg_background {
		position: absolute;
		z-index: -1;
		width: 200vw;
		aspect-ratio: 1/1;
		bottom: 50%;
		right: 50%;
		opacity: 15%;
		transform: translate(48.5%, 50%);
		max-inline-size: unset;
		max-block-size: unset;
	}
	
	.radialContainer {
		position: absolute;
		width: 100%;
		height: 100%;
		
		.radialGradient {
			position: absolute;
			right: -30%;
			width: 100%;
			left: unset;
			aspect-ratio: 1/1;
			height: unset;
			bottom: -60%;
			filter: blur(100px);
			transform: translateZ(0);
			opacity: 20%;
			background: var(--bar-gradient);
			--bar-gradient: radial-gradient( 
			circle, 
			var(--hero-gradient-bg-1) 0%, 
			var(--hero-gradient-bg-2) 24%, 
			var(--hero-gradient-bg-3) 44%, 
			var(--hero-gradient-bg-4) 57%, 
			transparent 70% 
			);
		}
	}
	
	.barContainer {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100px;
	}
	
	.barGradient {	
		--bar-opacity:0.15; 
		--bar-blend-mode:screen;
		--bar-gradient: linear-gradient( 
		90deg, 
		var(--hero-gradient-bg-1) 0%, 
		var(--hero-gradient-bg-2) 26.88%, 
		var(--hero-gradient-bg-3) 48.46%, 
		var(--hero-gradient-bg-4) 74.51% 
		);
		
		opacity: var(--bar-opacity);
		background-blend-mode: var(--bar-blend-mode);
		background: var(--bar-gradient);
		
		position: absolute;
		pointer-events: none;
		-webkit-user-select: none;
		user-select: none;
		z-index: 0;
		width: 100%;
		bottom: 0;
		height: 100%;
		filter: blur(100px);
		transform: translateZ(0);
	}

	@include media($max: $mobile) {
		.radialContainer {
			.radialGradient {
				right: -180%;
				width: 300%;
				bottom: -55%;
			}
		}
	}
}