.social-links {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
  }
  
  .icon-link {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #333;
	transition: transform 0.3s ease;
  }

  .icon-link {
  z-index: 9999;
  cursor: pointer;
}  

  .icon-link i {
	font-size: 24px;
  }
  
  .icon-link:hover {
	transform: scale(1.1);
  }  
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--index: calc(1vw + 1vh);
}
@font-face {
	font-family: kamerik-k;
	src: url(../fonts/kamerik205-heavy.woff2);
}
body {
	font-family: kamerik-k;
	color: #fff;
	overflow-x: hidden;
}
.scene {
	height: 550vh;
}
.layer {
	height: 100vh;
	width: 100vw;
	background-position: center;
	background-size: cover;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	animation-timeline: scroll();
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-range: 0 300vh;
}

.layer:nth-child(1) { animation-name: animation-1; }
@keyframes animation-1 { to { scale: 1.25; } }

.layer:nth-child(2) { animation-name: animation-2; }
@keyframes animation-2 { to { scale: 1.275; } }

.layer:nth-child(3) { animation-name: animation-3; }
@keyframes animation-3 { to { scale: 1.5; } }

.layer:nth-child(4) { animation-name: animation-4; }
@keyframes animation-4 { to { scale: 2; } }

.layer:nth-child(5) {
	opacity: 0;
	animation-range: 250vh 300vh;
	animation-name: animation-end;
}
@keyframes animation-end { to { opacity: 1; } }

.layer__content {
	padding: 4vh 4.75vw;
	backdrop-filter: blur(25px) brightness(.98);
	animation-timeline: scroll();
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-range: 0 45vh;
	animation-name: animation-head;
}
@keyframes animation-head { to { opacity: 0; filter: blur(20px); } }

.layer__content h1 {
	text-transform: uppercase;
	font-size: calc(var(--index) * 4.5);
	text-align: center;
	line-height: .9em;
	letter-spacing: -.15vw;
}
.layer__end h3 {
	font-size: 4rem;
	position: relative;
}
.layer__end::before {
	content: '';
	background-color: #010B19;
	inset: 0;
	position: absolute;
	opacity: 0;
	animation-timeline: scroll();
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-range: 300vh 450vh;
	animation-name: animation-bg;
}

footer {
	position: fixed;
	left: 50%; 
	transform: translate(-50%, 0); 
	bottom: 20px; 
	background-color: transparent; 
	pointer-events: none; 
  }
  
  footer p {
	margin: 0; 
  }
  
footer {
	display: flex;
	justify-content: center; 
	align-items: flex-end; 
	height: 100vh; 
  }
  
  footer p {
	user-select: none; 
  }
	
@keyframes animation-bg { to { opacity: 1; } }