body {
	font-family: system-ui;
	background: #000000;
	padding-top: 8rem;
	padding-bottom: 8rem;
	overflow-x: hidden;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding-left: 10vw;
	padding-right: 8vw;
	text-align: left;
	font-size: 1.5rem;
	font-weight: 100;
	border-bottom: 1px solid #dddddd2b;
	position: relative;
	z-index: 1;
}

tr {
	background: #000;
	color: #b7ab98;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

tr::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url(pic.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transform: scaleY(0);
	transition: transform 0.3s ease;
	z-index: 0;
}

/* Top-to-Bottom Hover */
tr.hover-top::before {
	transform-origin: top;
}

/* Bottom-to-Top Hover */
tr.hover-bottom::before {
	transform-origin: bottom;
}

/* Hover Animation */
tr.hovering::before {
	transform: scaleY(1);
}

/* Custom Effect for Top-to-Bottom when Leaving */
tr.hover-leaving-top::before {
	transform-origin: top;
	transform: scaleY(0);
}

/* Custom Effect for Bottom-to-Top when Leaving */
tr.hover-leaving-bottom::before {
	transform-origin: bottom;
	transform: scaleY(0);
}

tr * {
	position: relative;
	z-index: 1;
}

#n {
	position: relative;
	left: 0;
	font-size: 4rem;
	font-weight: 900;
	transition: all 0.2s ease-in-out;
}

#r {
	position: relative;
	left: 0;
	font-size: 0rem;
	font-weight: 500;
	transition: all 0.2s ease-in-out;
}

#a:hover {
	color: black;
	transition: all 0.2s ease-in-out;

	#n {
		left: 2rem
	}

	#r {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 768px) {
	#n {
		font-size: 1.5rem;
		padding-block: 1.2rem
	}
	
	#a:hover {
		#n {
			left: 0.5rem
		}

		#r {
			font-size: .5rem;
		}
	}

	th {
		font-size: 1rem;
	}
}

/* mouse dot */
.mouse-dot {
  z-index: 9999;
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: #b0ff4836;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out;
  filter: blur(50px);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
  .mouse-dot {
    display: none;
  }
}

/* Initial state for animation (hidden off-screen) */
.hidden1 {
	opacity: 0;
	transform: translateY(100px);
	transition: opacity 1s ease, transform 1s ease;
}

/* Animation when element is in view */
.visible1 {
	opacity: 1;
	transform: translateY(0);
}