/*
	styles.css - top-level guide

	This file contains the global styles and layout rules for the site. Below
	is a short reference describing the purpose of each major selector used in
	the stylesheet so you (and future debuggers) can quickly find what to edit.

	Selector quick-reference:
	- html, body: base sizing so 100vh calculations and full-height elements work.
	- body: global font, background, and smoothing; overall page background.
	- .site-header: fixed top navigation bar (logo + primary links).
	- .site-inner: horizontal container inside the header used to align brand/nav.
	- .brand / .brand a: site name styling and hover effect.
	- .nav .btn: header buttons (Projects / Contact) visual style.
	- .main: main page container (centers content and provides global margins).
	- .hero: top section that holds the large intro heading.
	- .hero-title: the big "How's it going?" heading (font-size + spacing).
	- .about / .about h2: the About section heading and spacing rules.
	- .about-box: full-bleed, animated background box that holds about text.
	- .about-box p: typography for the about paragraph text.
	- .panel / .panel-inner: the centered panel that contains Projects + other blocks.
	- .projects, .proj-grid, .proj-container, .proj-item, .proj-label: project grid and items.
	- .contact / .contact-container: contact area and form styling.
	- #stars, #stars2, #stars3: starfield background layers (fixed, behind content).
	- media queries: responsive adjustments for small screens (e.g., project grid).

	If you want more granular inline comments for any specific block, tell me which
	selector(s) and I'll add a short explanation immediately above them.
*/

/* Base: allow full-height calculations (used by 100vh/min-height rules) */
html,
body {
	height: 100%;
}

/* Responsive root font size so page text scales smoothly */
html {
	font-size: clamp(15px, 3.556vh, 18px);
}

body {
    font-family: Nunito, system-ui, 'Segoe UI', Roboto, Arial;
	margin: 0;
    background: linear-gradient(180deg, #000000 0%, #121212 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    color: #222;
    -webkit-font-smoothing: antialiased;
}

/* Page shell: fonts, background gradient and global text colour */

.site-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 78px;
	display: flex;
	align-items: center;
	z-index: 50;
	background: transparent;
}
/* Top navigation bar: fixed to top, holds brand + nav buttons */

.site-inner {
	width: 100vw;
	padding: 10px 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	z-index: 2;

	min-width: 0; /* 🔑 allow flex container to shrink */
}

.site-inner > * {
	min-width: 0;
}

.nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Header inner container: aligns brand left and nav right */

.brand {
	margin-right: auto;
}

/* Brand container: holds site title/link */

.brand a {
	font-family: 'Archivo Black', 'Russo One', sans-serif;
	font-size: 3.556vh;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: 6px 10px;
	text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.04);
	position: relative;
	transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms;
	transform-origin: center;
}

/* Clickable site title styling and hover lift */

.nav .btn {
	background: #ffffff;
	border: 3px solid #222;
	padding: 8px 12px;
	margin-left: 10px;
	border-radius: 10px;
	text-decoration: none;
	color: #222;
	font-weight: 700;
	box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.18);
	transition: transform 180ms cubic-bezier(.2, .8, .2, 1), box-shadow 180ms;
	transform-origin: center;
	display: inline-block;
}

/* Header buttons (Projects, Contact) visual style */

/* subtle lift/scale on hover */
.brand a:hover {
	transform: translateY(-3px) scale(1.04);
}

.brand a::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%) scale(0.95);
	bottom: -10px;
	width: calc(100% + 28px);
	height: 18px;
	pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 40%, rgba(0,0,0,0) 80%);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 180ms ease, transform 180ms ease;
}

.brand a:hover::after {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

.nav .btn:hover {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.18);
}

.main {
	margin: 0 auto 80px;
	padding: 0 20px;
}

/* Main content wrapper: centers page sections and provides outer margins */

.hero {
	padding: 0 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	transform: translateY(-75px);
}

/* Top hero section: holds the large intro heading */

.hero-title {
	font-family: 'Archivo Black', 'Russo One', Nunito, system-ui, 'Segoe UI', Roboto, Arial;
	font-weight: 700;
	font-size: 7.406vh;
	color: #fff;
	margin-bottom: 6px;
}

/* The big "How's it going?" heading — responsive size with clamp() */

.about {
	margin-top: 28px;
}

/* About section container */

.about h2 {
	font-family: 'Archivo Black', 'Russo One', Nunito, system-ui, 'Segoe UI', Roboto, Arial;
	font-weight: 700;
	font-size: 4.32vh;
	color: #fff;
	text-align: left;
	margin: 0 0 10px clamp(24px, 6vw, 80px);
}

/* About heading style */

.about-box {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);

	padding: 60px 0;

	background: #171717;
	box-sizing: border-box;
	z-index: 5;

	--x: calc(var(--posX, 0) * 1px);
	--y: calc(var(--posY, 0) * 1px);

	background-image: 
		linear-gradient(115deg, rgb(211 255 215), rgb(0 0 0)),
		radial-gradient(90% 100% at calc(50% + var(--x)) calc(0% + var(--y)), rgb(200 200 200), rgb(22 0 45)),
		radial-gradient(100% 100% at calc(80% - var(--x)) calc(0% - var(--y)), rgb(250 255 0), rgb(36 0 0)),
		radial-gradient(150% 210% at calc(100% + var(--x)) calc(0% + var(--y)), rgb(20 175 125), rgb(0 10 255)),
		radial-gradient(100% 100% at calc(100% - var(--x)) calc(30% - var(--y)), rgb(255 77 0), rgb(0 200 255)),
		linear-gradient(60deg, rgb(255 0 0), rgb(120 86 255));

	background-blend-mode: overlay, overlay, difference, difference, difference, normal;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}

/* Typography for the about text */
.about-box p {
	font-size: 2.469vh;
	line-height: 1.55;
	letter-spacing: 0.3px;
	text-align: center;
	color: #fff;
	margin: 0 auto;
	padding: 0 clamp(12px, 4vw, 32px);
	max-width: clamp(320px,80vw, 1000px);
}

/* Projects heading styling ("My Stuff") */
.projects h2 {
	font-family: 'Russo One', Nunito, system-ui, 'Segoe UI', Roboto, Arial;
	font-weight: 700;
	font-size: 2.16vh;
	color: #fff;
	margin-bottom: 12px;
}

/* Projects list and grid */

.proj-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

/* Individual project container */

.proj-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Project thumbnail frame */

.proj-item {
	background: transparent;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	/* removed outline and drop shadow so transparent PNGs show through */
}

/* Project images fill their frames */

.proj-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Project label/link under each thumbnail */

.proj-label {
	font-family: Nunito, system-ui, 'Segoe UI', Roboto, Arial;
	font-weight: 700;
	font-size: 1.389vh;
	color: #fff;
	text-decoration: underline;
	cursor: pointer;
	transition: opacity 0.2s;
	text-align: center;
	display: block;
}

/* Contact area */

.contact {
	margin-top: 28px;
}

/* Contact container layout */


@media (max-width: 720px) {
	.site-header {
		height: auto;
	}

	.site-inner {
		padding: 10px 16px;
		align-items: flex-start;
	}

	.nav {
		flex-direction: column;
		align-items: flex-end;
		gap: 8px;
		margin-left: auto;
	}

	.nav .btn {
		margin-left: 0;
	}

	.proj-grid {
		grid-template-columns: 1fr;
	}

	.hero-title {
		font-size: 40px;
	}
}

/* Panel that holds About + Projects; gives a semi-opaque background */

/* Centered panel that holds About + Projects; semi-opaque so stars stay visible at page sides */
.panel {
	/* use flex to center content horizontally and vertically */
	width: 100vw;
	justify-content: center; /* Centers horizontally */
	align-items: center;     /* Centers vertically */
	background: #1e1e1f;
	padding: 28px;
	position: relative;
	z-index: 20;
	box-sizing: border-box;
}

/* constrain the panel's inner content while keeping full-bleed background */
.panel-inner {
    max-width: 1100px;
    margin: 0 auto;

}

/* Constrain inner content width while keeping full-bleed panel */



/* Starfield layers (positioned behind content) */
#stars,
#stars2,
#stars3 {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 1;
	transform: translateZ(0);
	will-change: transform;
	contain: paint;
	backface-visibility: hidden;
}

/* Individual star layers (small/medium/large) are defined below */

#stars {
	width: 1px;
	height: 1px;
	background: transparent;
	box-shadow: none;
	animation: animStar 80s linear infinite;
}

#stars:after {
	content: '';
	position: absolute;
	top: 2000px;
	width: 1px;
	height: 1px;
	background: transparent;
}

#stars2 {
	width: 2px;
	height: 2px;
	background: transparent;
	box-shadow: none;
	animation: animStar 160s linear infinite;
}

#stars2:after {
	content: '';
	position: absolute;
	top: 2000px;
	width: 2px;
	height: 2px;
	background: transparent;
}

#stars3 {
	width: 3px;
	height: 3px;
	background: transparent;
	box-shadow: none;
	animation: animStar 240s linear infinite;
}

#stars3:after {
	content: '';
	position: absolute;
	top: 2000px;
	width: 3px;
	height: 3px;
	background: transparent;
}

@keyframes animStar {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-2000px);
	}
}

/* Ensure header and main content render above the star layers */

/* ensure page content appears above the stars */
.main {
	position: relative;
	z-index: 10;
}

/* Contact form styles (scoped) - base provided by user but adapted for dark/starry theme */
.contact-container {
		border-radius: 8px;
		background-color: rgba(23, 24, 27, 0.72); /* translucent dark so stars remain visible */
		padding: 28px;
		max-width: 760px;
		margin: 0 auto;
		box-sizing: border-box;
		color: #fff;
		border: 1px solid rgba(255,255,255,0.04);
}

/* Style email input and textarea */
.contact-container input[type=email],
.contact-container textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #444;
	border-radius: 4px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 16px;
	background: #1c1c1c;
	color: #fff;
	font-size: 16px;
	resize: vertical; /* allow vertical resize only */
}

/* style <button> fallback used in the simplified template */
.contact-container button {
	background-color: #04AA6D;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
}

.contact-container button:hover {
	background-color: #45a049;
}

/* Labels */
.contact-container label {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
	color: #e6e6e6;
}

/* Make sure the panel keeps some vertical breathing room on contact page */
/* (removed: contact page uses no outer .panel wrapper now) */

/* Contact page overrides: smaller header and tighter spacing so the form sits just below the title */
.contact-page .main {
	margin-top: 40px; /* reduce top offset on contact page */
}
.contact-page .hero {
	padding: 10px 12px 6px; /* much smaller vertical padding */
	min-height: auto; /* allow hero to size to content */
}
.contact-page .hero-title {
	/* Slightly larger and nudged up */
	font-size: clamp(22px, 8.889vh, 42px);
	margin-top: 4px;
	margin-bottom: 12px;
	font-weight: 700;
}
/* contact-page no longer uses .panel wrapper */

.site-header::after{
	/* top-centered purple overlay: half above viewport, shorter and stronger */
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:-175px;
	height:350px;
	background:linear-gradient(180deg, rgba(139,92,246,0.72) 0%, rgba(0,0,0,0) 100%);
	filter:blur(10px);
	pointer-events:none;
	z-index:1;
}

/* Decorative overlay behind the header */

/* (cleaned) headings/font stacks are defined where needed above */