* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--index: calc(1vw + 1vh);
	--text: #e7e7e0;
	--transition: transform .75s cubic-bezier(.075, .5, 0, 1);
}
@font-face {
	font-family: raleway_f;
	src: url(../fonts/raleway-regular.woff2);
}
@font-face {
	font-family: raleway_f;
	src: url(../fonts/raleway-black.woff2);
	font-weight: 900;
}
body {
	background-color: #010101;
	font-family: raleway_f, sans-serif;
	line-height: 1.55;
}
.main-header {
	position: relative;
}
.main-header::after {
	content: '';
	position: absolute;
	z-index: 100;
	width: 100%;
	height: calc(var(--index) * 10);
	background-image: url(../img/ground.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	bottom: calc(var(--index) * -4.5);
}
.layers {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	position: relative;
}
.layer {
	height: 100%;
	width: 100%;
	position: absolute;
	background-size: cover;
	background-position: center;
	will-change: transform;
	z-index: 2;
	transition: var(--transition);
}
.layers__base {
	transform: translate3d(0, calc(var(--scrollTop) / 1.6), 0);
	z-index: 0;
}
.layers__middle {
	transform: translate3d(0, calc(var(--scrollTop) / 2.5), 0);
}
.layers__front {
	transform: translate3d(0, calc(var(--scrollTop) / 5.7), 0);
}
.layer__header {
	z-index: 1;
	transform: translate3d(0, calc(var(--scrollTop) / 2), 0);
	transition: var(--transition);
	will-change: transform;
	text-transform: uppercase;
	font-weight: 900;
	color: var(--text);
	text-shadow: 0 0 15px #9d822b;
	margin-top: -3rem;
}

.layers__title {
	font-size: calc(var(--index) * 2.65);
	letter-spacing: calc(var(--index) / 2.25);
	margin-top: -1rem;
	text-transform: none; /* Ensure text-transform doesn't override */
}

.layers__caption {
	font-size: calc(var(--index) / 1.175);
	letter-spacing: calc(var(--index) / 3.5);
	margin-top: calc(var(--index) * -.75);
}
.main-article {
	--main-article-transform: translate3d(0, calc(var(--scrollTop) / -7.5), 0);
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	color: var(--text);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	text-align: center;
	/* Update: */
	top: -1px;
	z-index: 10;
}
.main-article__header {
	text-transform: uppercase;
	font-size: calc(var(--index) * 1.8);
	letter-spacing: calc(var(--index) / 7.5);
	transform: var(--main-article-transform);
	transition: var(--transition);
	will-change: transform;
}
/*.main-article__paragraph {
	max-width: calc(var(--index) * 30);
	font-size: calc(var(--index) * .9);
	margin-top: calc(var(--index) / 1.25);
	transform: var(--main-article-transform);
	transition: var(--transition);
	will-change: transform;
}*/

.main-article__paragraph {
	max-width: calc(var(--index) * 30);
	font-size: calc(var(--index) * 1.1); /* Increased from .9 */
	margin-top: calc(var(--index) / 1.25);
	transform: var(--main-article-transform);
	transition: var(--transition);
	will-change: transform;
}
.content {
	will-change: transform;
}
.copy {
	position: absolute;
	bottom: calc(var(--index) * 2.5);
	opacity: .45;
	font-size: calc(var(--index) * .75);
	letter-spacing: calc(var(--index) / 37.5);
}
button.animated-button {
    position: relative;
    padding: 1rem 2rem; /* Use relative units */
    background: linear-gradient(45deg, #ffcc00, #ff6600);
    font-size: 1.2rem;
    font-weight: 900;
    color: #1e1b1b;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem #f7f759;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    font-weight: 600;
    overflow: hidden;
    z-index: 10;
}

button.animated-button:hover {
    transform: scale(1.1);
    box-shadow: 0 1rem 1.5rem rgba(255, 165, 0, 0.6);
}

/* Responsive star positioning */
.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.star {
    position: absolute;
    width: 1vw;
    height: 1vw;
    background: #ffcc00;
    border-radius: 50%;
    filter: drop-shadow(0 0 1vw #ffcc00);
    opacity: 0.8;
    z-index: -1;
}

/* Updated positioning using vw and vh */
.star-1 { top: 20vh; left: 30vw; }
.star-2 { top: 40vh; left: 50vw; }
.star-3 { top: 60vh; left: 20vw; }
.star-4 { top: 10vh; left: 70vw; }
.star-5 { top: 80vh; left: 40vw; }
.star-6 { top: 30vh; left: 60vw; }
.star-7 { top: 50vh; left: 10vw; }
.star-8 { top: 25vh; left: 80vw; }
.star-9 { top: 75vh; left: 55vw; }
.star-10 { top: 5vh; left: 90vw; }
.star-11 { top: 85vh; left: 20vw; }

.btn-hover-effect {
    position: relative;
    background: #ffcc00;
    color: black;
    border: none;
    padding: 12px 24px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
}

.star {
    position: absolute;
    font-size: 20px;
    opacity: 0; /* Start invisible */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.star-1 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.star-2 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.star-3 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.star-4 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.star-5 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.star-6 { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.animated-button {
    position: relative;
    background: #ffcc00;
    color: black;
    border: none;
    padding: 12px 24px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
}

.stars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.star {
    position: absolute;
    font-size: 18px;
    color: gold;
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.star-1 { top: 0; left: 50%; transform: translate(-50%, -50%); }
.star-2 { top: 20%; left: 80%; transform: translate(-50%, -50%); }
.star-3 { top: 40%; left: 10%; transform: translate(-50%, -50%); }
.star-4 { top: 60%; left: 70%; transform: translate(-50%, -50%); }
.star-5 { top: 80%; left: 30%; transform: translate(-50%, -50%); }
.star-6 { top: 0; left: 50%; transform: translate(-50%, -50%); }
.star-7 { top: 20%; left: 80%; transform: translate(-50%, -50%); }
.star-8 { top: 40%; left: 10%; transform: translate(-50%, -50%); }
.star-9 { top: 60%; left: 70%; transform: translate(-50%, -50%); }
.star-10 { top: 80%; left: 30%; transform: translate(-50%, -50%); }