<div class="container">
	<nav>
		<div class="logo"><a href="#">VALUE</a></div>
		<div class="info">
			<p>An Anime-Drama Synthetic Film</p>
		</div>
		<div class="about">
			<p>In a poignant reflection on grief and loneliness, an immortal being mourns the loss of cherished friends, questioning why they had to succumb to time's relentless march while he remains untouched.</p>
		</div>
	</nav>
	<div class="hero-img">
		<img src="https://i.postimg.cc/GpCK0jTB/hero-img-2.jpg" alt="a male prince holding a bouquet of blue roses, a still lake can be seen in the background">
	</div>
	<div class="copy">
		<p>Amidst the serene backdrop of the lake, where the water mirrored the expansive sky, I stood in my resplendent attire. The vibrant blue roses in my hand contrasted starkly with the muted tones of my heart. Each petal seemed to whisper memories of those who had once been by my side, their laughter and warmth now echoes in the stillness of the evening.</p>
		<p>The price of immortality is a cruel joke. To live forever while the world around you ages and withers, to remain untouched by time as everything you cherish slips through your fingers—it’s a torment that I had not anticipated when I made the fateful choice. How naïve I was to think that eternal life would mean eternal happiness.</p>
		<p>I looked at the blue roses, the color of sorrow and remembrance, and sighed deeply. The faces of my friends flashed before my eyes—their smiles, their voices, their very essence now just distant memories. Each one had been a part of me, filling the endless years with moments of joy and companionship. But now, they were gone, and I was left alone, forever.</p>
	</div>
	<div class="hero-img">
		<img src="https://i.postimg.cc/cLYh5zCy/hero-img-1.jpg" alt="a male prince holding a bouquet of blue roses, a still lake can be seen in the background">
	</div>
	<div class="copy">
		<p>“Why them?” I whispered, my voice barely more than a breath against the calm air. The question had plagued me for centuries. Why did they have to suffer the ravages of time while I remained untouched? What cruel twist of fate had allowed me to endure when they could not?</p>
		<p>Their absence weighed heavily on my soul. I had watched them grow old, seen their strength fade, and felt their hands grow cold in mine. I had held them as they took their last breaths, promising to remember them always. And remember them I did, every single day, in every moment of solitude.</p>
		<p>The lake before me seemed to stretch into eternity, much like my own life. It was beautiful and endless, yet eerily empty. The birds flew freely above, their wings cutting through the air with a grace I envied. They were unburdened by the weight of memories, by the sorrow of outliving everything they loved.</p>
		<p>In the distance, the sun began to set, casting a golden glow over the landscape. I closed my eyes, feeling the warmth on my skin, and allowed myself a moment of peace. I could almost hear their voices in the gentle rustling of the trees, see their faces in the shifting clouds. For a brief second, it was as if they were with me once more.</p>
	</div>
	<div class="hero-img">
		<img src="https://i.postimg.cc/5tS3fF8s/hero-img-3.jpg" alt="a male prince holding a bouquet of blue roses, a still lake can be seen in the background">
	</div>
	<div class="copy">
		<p>But reality always returns, harsh and unyielding. I opened my eyes to the stark emptiness, the loneliness that was now my constant companion. The blue roses in my hand were a symbol of my grief, a token of the love and loss that defined my existence.</p>
		<p>“Why them?” I asked again, louder this time, as if demanding an answer from the universe. But there was only silence, the same silence that had followed me for centuries.</p>
		<p>Immortality is a gift many desire, but few understand. It is not just endless life; it is endless loss, endless grief. It is the weight of countless memories, the burden of eternal loneliness. It is the price I pay every single day.</p>
		<p>As the last rays of sunlight dipped below the horizon, I turned away from the lake, clutching the roses to my chest. I walked back into the shadowed world, carrying my memories, my grief, and my undying love for those I had lost. For in my heart, they would live forever, even as I wandered through the endless night of my existence.</p>
		<p>Text written by ChatGPT, images generated using DALL•E 3</p>
	</div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Playfair:opsz,wght@5..1200,300&family=Source+Code+Pro:wght@300&display=swap");

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

html,
body {
	width: 100%;
	height: 100%;
	font-family: "Source Code Pro", monospace;
	background: #121212;
	color: #fff;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
}

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a,
p {
	text-decoration: none;
	font-size: 14px;
	font-weight: 400;
	color: #fff;
}

.container {
	position: relative;
	width: 100%;
	min-height: 100%;
	padding: 2em;
	mix-blend-mode: exclusion;
	z-index: 2;
}

nav {
	position: sticky;
	top: 2em;
	left: 0;
	width: 100%;
	margin-bottom: 2em;
	display: flex;
	z-index: 2;
	text-transform: uppercase;
	mix-blend-mode: difference;
}

nav > div {
	flex: 1;
}

.logo a {
	font-size: 2.75em;
	font-family: "Playfair", serif;
	font-weight: 300;
	line-height: 1;
}

.header {
	position: relative;
}

.header:not(:last-child) {
	margin-bottom: 1em;
}

.hero-img {
	width: 100%;
	margin-bottom: 1em;
}

.copy p {
	margin-bottom: 1.25em;
}

/* lenis css scroll */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-smooth iframe {
	pointer-events: none;
}

// lenis js scroll
const lenis = new Lenis();

function raf(time) {
	lenis.raf(time);
	requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

// spray paint trail
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

function resizeCanvas() {
	canvas.width = window.innerWidth;
	canvas.height = Math.max(
		document.body.scrollHeight,
		document.body.offsetHeight,
		document.documentElement.clientHeight,
		document.documentElement.scrollHeight,
		document.documentElement.offsetHeight
	);
}

resizeCanvas();

let xMousePos = 0;
let yMousePos = 0;
let lastScrolledLeft = 0;
let lastScrolledTop = 0;
let lastX = null;
let lastY = null;
let hasMouseMoved = false;

ctx.lineWidth = 24;
ctx.strokeStyle = "rgba(0 0 255 / 0.6)";
ctx.lineCap = "round";
ctx.filter = "blur(12px)";

function drawLine(newX, newY) {
	if (lastX !== null && lastY !== null) {
		ctx.beginPath();
		ctx.moveTo(lastX, lastY);
		ctx.lineTo(newX, newY);
		ctx.stroke();
	}

	lastX = newX;
	lastY = newY;
}

document.addEventListener("mousemove", function (event) {
	if (!hasMouseMoved) {
		lastX = event.pageX;
		lastY = event.pageY;
		hasMouseMoved = true;
	} else {
		xMousePos = event.pageX;
		yMousePos = event.pageY;
		drawLine(xMousePos, yMousePos);
	}
});

window.addEventListener("scroll", function () {
	const xScrollDelta = window.scrollX - lastScrolledLeft;
	const yScrollDelta = window.scrollY - lastScrolledTop;

	if (xScrollDelta !== 0 || yScrollDelta !== 0) {
		xMousePos += xScrollDelta;
		yMousePos += yScrollDelta;
		drawLine(xMousePos, yMousePos);
	}

	lastScrolledLeft = window.scrollX;
	lastScrolledTop = window.scrollY;
});

window.addEventListener("resize", resizeCanvas);