@import "globals.css";

/* homepage shared settings */
:root 
{
	--scale-multiplier: 1.0;
	--animation-speed: 0.3s;

	--bg-gradient-a: color-mix(in oklch, var(--color-bg), white 0%);
	--bg-gradient-b: color-mix(in oklch, var(--color-bg), rgb(134, 22, 153) 2%);
}

/* top-level 3-column grid for the homepage,
used together with .generic-body-grid */
.homepage-columns-grid
{
	display: grid;
	grid-template-columns: 1fr 6fr 1fr; /* FR = fraction of available space in grid container */
	grid-template-rows: 1fr;
	grid-template-areas: 
		"sidebar-left home sidebar-right";
}

/* middle column ("home") grid for the homepage,
these are the central vertical sections of the homepage,
used together with .generic-body-grid */
.homepage-home-grid
{
	grid-area: home;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content min-content minmax(60vh, min-content); /* force content area minimum height */
	grid-template-areas: 
		"h-logo"
		"h-buttons"
		"h-content";
}

/* shared by left and right sidebars */
.homepage-sidebar
{
	display: grid;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.homepage-sidebar--left
{
	grid-area: sidebar-left;
	justify-content: left;
}

.homepage-sidebar--right
{
	grid-area: sidebar-right;
	justify-content: right;
}

/* top-center logo */
.homepage-logo
{
	grid-area: h-logo;

	box-sizing: border-box;
	width: calc(max(150px, calc(24vh - 1vw)) * var(--scale-multiplier));
	margin-top: calc(20px * var(--scale-multiplier));
	margin-left: auto;
	margin-right: auto;
	user-select: none;
	pointer-events: none;
	transition: var(--animation-speed) ease;
}

/* container for the buttons below the logo */
.homepage-center-buttons
{
	grid-area: h-buttons;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	/* ensures buttons are centered horizontally */
	display: flex;   
	justify-content: center;
	/* even space between buttons */
	gap: calc(35px * var(--scale-multiplier));
	/* space above and below the buttons */
	padding-top: calc(12px * var(--scale-multiplier));
	padding-bottom: calc(26px * var(--scale-multiplier));
	/* text on buttons */
	font-size: calc(max(16pt, calc(4vh - 2vw)) * var(--scale-multiplier));
	font-family: var(--font-family-b);
	font-weight: var(--font-family-b-weight);
	color: white;
	text-shadow: rgba(0, 0, 0, 0.8) 2pt 3pt 3pt;
}

.homepage-center-button
{
	height: 1.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px;

	cursor: pointer;
	user-select: none;
	transition: var(--animation-speed) ease;
}

.social-button-image
{
	display: block;
	width: inherit;
	height: inherit;
	cursor: pointer;
}

.homepage-content
{
	grid-area: h-content;

	background-color: transparent;
	margin: 0px;
	box-sizing: border-box;
	padding: var(--content-padding);

	font-family: var(--font-family-a);
}

.homepage-body
{
	margin: 0;
	min-height: 100vh;
	/* syntax: radial-gradient(shape size at position, color1, color2) */
	background: radial-gradient(circle at center, var(--bg-gradient-a) 0%, var(--bg-gradient-b) 100%);
	background-attachment: fixed;
}

/* background animation */
.smoke-container 
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1; /* Keep it behind all other content */
	overflow: hidden;
	background: #000000;
}

/* jittering noise texture on top of the background effect */
.noise-layer
{
	visibility: hidden; /* DISABLE the noise layer for now, as it can be visually overwhelming */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
 	/* Massive overscale to ensure no edges show during jitter */
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	/* High z-index to sit above the smoke layers */
	z-index: 10; 
	pointer-events: none;
	/* noise transparency */
	opacity: 0.01;
	/* CSS-generated noise texture (adjust baseFrequency to control noise scale) */
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='n'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23n)'/%3e%3c/svg%3e");
	/* change jitter speed here*/
	animation: grain 0.8s steps(10) infinite;
	mix-blend-mode: hard-light;
}

@keyframes grain 
{
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-1%, -1%); }
	20% { transform: translate(1%, 1%); }
	30% { transform: translate(-2%, 1%); }
	40% { transform: translate(1%, -2%); }
	50% { transform: translate(-1%, 2%); }
	60% { transform: translate(2%, 1%); }
	70% { transform: translate(-2%, -1%); }
	80% { transform: translate(1%, 2%); }
	90% { transform: translate(-1%, -2%); }
}