/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
	/* Colors */
	--color-bg: #1a0a2e;
	--color-bg-dark: #0d0518;
	--color-text: #fff;
	--color-text-soft: #e8d4f0;
	--color-accent: #ff00ff;
	--color-cyan: #00e5ff;
	--color-magenta: #ff00ff;
	--color-purple: #6b00b3;
	--color-pink: #ff66cc;
	
	/* Typography */
	--font-primary: "area-normal-light", sans-serif;
	--font-display: "area-extended", sans-serif;
	--font-weight-light: 200;
	--font-weight-bold: 700;
	
	/* Spacing */
	--space-edge: clamp(1rem, 5dvw, 5rem);
	--space-top: clamp(2.5rem, 6dvh, 4rem);
	--space-bottom: clamp(2.5rem, 6dvh, 4rem);
	
	/* Sizing */
	--line-thickness: 3px;
}


/* ==========================================================================
   Base & Reset
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	color-scheme: dark;
}

body {
	font-family: var(--font-primary);
	font-weight: 300;
	font-style: normal;
	background: var(--color-bg-dark);
	color: var(--color-text);
	min-height: 100dvh;
	overflow: hidden;
}


/* ==========================================================================
   Hero Section
   ========================================================================== */

#hero {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-inline: var(--space-edge);
	background: url('images/background-gradient.jpg') center / cover no-repeat;
	isolation: isolate;
}


/* ==========================================================================
   Noise Overlay (VHS/Retro effect)
   ========================================================================== */

.noise-svg {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
}

.noise-overlay {
	position: absolute;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	opacity: 0.2;
	filter: url(#noise);
	background: transparent;
}

.noise-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent 0px,
		transparent 2px,
		rgba(0, 0, 0, 0.1) 2px,
		rgba(0, 0, 0, 0.1) 4px
	);
	pointer-events: none;
	opacity: 0.3;
}


/* ==========================================================================
   Background Blobs
   ========================================================================== */

.blobs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px);
	opacity: 0.85;
	will-change: transform;
}

/* Cyan blob - left side */
.blob--cyan {
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, var(--color-cyan) 0%, #00a8cc 30%, transparent 70%);
	top: 5%;
	left: -15%;
	animation: 
		floatCyan 60s ease-in-out infinite,
		pulseCyan 10s ease-in-out infinite;
}

/* Main magenta blob - bottom right */
.blob--magenta {
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, var(--color-magenta) 0%, #cc00aa 40%, transparent 70%);
	bottom: -30%;
	right: -10%;
	animation: 
		floatMagenta 55s ease-in-out infinite,
		pulseMagenta 12s ease-in-out infinite -3s;
}

/* Purple blend blob - center */
.blob--purple {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--color-purple) 0%, #4a0080 40%, transparent 70%);
	top: 20%;
	left: 30%;
	animation: 
		floatPurple 50s ease-in-out infinite -10s,
		pulsePurple 14s ease-in-out infinite -5s;
}

/* Secondary pink blob */
.blob--pink {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, var(--color-pink) 0%, #ff3399 30%, transparent 70%);
	bottom: 10%;
	left: 40%;
	animation: 
		floatPink 45s ease-in-out infinite -15s,
		pulsePink 11s ease-in-out infinite -2s;
}


/* ==========================================================================
   Blob Animations - Movement
   ========================================================================== */

@keyframes floatCyan {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg);
	}
	25% {
		transform: translate(10vw, 15vh) rotate(5deg);
	}
	50% {
		transform: translate(5vw, 25vh) rotate(-3deg);
	}
	75% {
		transform: translate(15vw, 10vh) rotate(2deg);
	}
}

@keyframes floatMagenta {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg);
	}
	25% {
		transform: translate(-15vw, -10vh) rotate(-5deg);
	}
	50% {
		transform: translate(-25vw, 5vh) rotate(3deg);
	}
	75% {
		transform: translate(-10vw, -15vh) rotate(-2deg);
	}
}

@keyframes floatPurple {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	25% {
		transform: translate(-10vw, 10vh) scale(1.1);
	}
	50% {
		transform: translate(10vw, 15vh) scale(0.9);
	}
	75% {
		transform: translate(5vw, -10vh) scale(1.05);
	}
}

@keyframes floatPink {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg);
	}
	25% {
		transform: translate(15vw, -20vh) rotate(8deg);
	}
	50% {
		transform: translate(-10vw, -15vh) rotate(-5deg);
	}
	75% {
		transform: translate(20vw, -5vh) rotate(3deg);
	}
}


/* ==========================================================================
   Blob Animations - Pulsing
   ========================================================================== */

@keyframes pulseCyan {
	0%, 100% {
		opacity: 0.7;
		filter: blur(120px);
	}
	50% {
		opacity: 0.9;
		filter: blur(140px);
	}
}

@keyframes pulseMagenta {
	0%, 100% {
		opacity: 0.8;
		filter: blur(100px);
	}
	50% {
		opacity: 0.95;
		filter: blur(130px);
	}
}

@keyframes pulsePurple {
	0%, 100% {
		opacity: 0.6;
		filter: blur(130px);
	}
	50% {
		opacity: 0.8;
		filter: blur(150px);
	}
}

@keyframes pulsePink {
	0%, 100% {
		opacity: 0.7;
		filter: blur(110px);
	}
	50% {
		opacity: 0.85;
		filter: blur(140px);
	}
}


/* ==========================================================================
   Hero Header
   ========================================================================== */

.hero-header {
	padding-block-start: var(--space-top);
}

.name {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 6vw, 4rem);
	line-height: 1;
	text-transform: uppercase;
}

.name-first {
	font-weight: var(--font-weight-light);
	color: var(--color-text-soft);
	letter-spacing: 0;
}

.name-last {
	font-weight: var(--font-weight-bold);
	color: var(--color-magenta);
	letter-spacing: 0;
}


/* ==========================================================================
   Center Navigation
   ========================================================================== */

.center-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.nav-line {
	width: 80px;
	height: var(--line-thickness);
	background-color: var(--color-text);
}

.nav-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.nav-square {
	width: 12px;
	height: 12px;
	background-color: var(--color-text);
}

.nav-text {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	font-size: clamp(0.875rem, 1.5vw, 1.125rem);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--color-text);
}


/* ==========================================================================
   Hero Footer / Tagline
   ========================================================================== */

.hero-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block-end: var(--space-bottom);
	font-family: var(--font-display);
	font-size: clamp(0.75rem, 1.8vw, 1.25rem);
	text-transform: uppercase;
	color: var(--color-text);
}

.tagline-item {
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
	letter-spacing: 0;
    position: relative;
    top: -0.11em;
}

.tagline-center {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 3rem);
	margin-inline: clamp(1rem, 3vw, 3rem);
}

.tagline-line {
	flex: 1;
	height: var(--line-thickness);
	background-color: var(--color-text);
}

.tagline-of {
	font-family: var(--font-display);
	font-weight: var(--font-weight-light);
	font-style: italic;
	text-transform: lowercase;
	white-space: nowrap;
    position: relative;
    top: -0.18em;
}


/* ==========================================================================
   Content Animations
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	[data-animate="fade-in"] {
		animation: fadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
		animation-delay: var(--delay, 0s);
	}

	[data-animate="slide-up"] {
		animation: slideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
		animation-delay: calc(0.3s + var(--delay, 0s));
	}

	.tagline-line {
		transform-origin: center;
		animation: scaleX 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
		animation-delay: 0.5s;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes scaleX {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.blob,
	[data-animate],
	.tagline-line {
		animation: none !important;
	}
}


/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 68.75rem) {
	.blob--purple,
	.blob--pink {
		display: none;
	}

	.blob--cyan {
		width: 500px;
		height: 500px;
		top: 0;
		left: -20%;
	}

	.blob--magenta {
		width: 600px;
		height: 600px;
		bottom: -20%;
		right: -20%;
	}

	.nav-line {
		width: 60px;
	}

	.nav-square {
		width: 8px;
		height: 8px;
	}
}