/* Text Roll Navigation Styles */
.navigation-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px; /* Increased gap between menu items */
  padding: 0;
  list-style: none;
  margin: 0;
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px; /* Added spacing between items */
}

.text-roll-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 1.2; /* Increased from 0.75 for better alignment */
  white-space: nowrap; /* Prevents wrapping */
}

.text-roll {
  font-size: 1.2rem;

  font-weight: 300;
  text-transform: capitalize;
  line-height: 1.2; /* Match wrapper line-height */
  letter-spacing: 0.02em; /* Added slight letter spacing */
  transition: color 0.3s;
  color: 111;
  font-family: "Matter Light";
  display: inline-block; /* Important for proper spacing */
}

.text-layer {
  position: relative;
  display: inline-block; /* Better text flow */
}

.text-layer-absolute {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  display: inline-block;
}

.letter {
  display: inline-block;
  transition: transform 0.4s ease-in-out;
  transform: translateY(0);
  white-space: pre; /* Preserves spaces */
}

.letter-bottom {
  display: inline-block;
  transition: transform 0.4s ease-in-out;
  transform: translateY(100%);
  white-space: pre; /* Preserves spaces */
}

.nav-item:hover .letter {
  transform: translateY(-100%);
}

.nav-item:hover .letter-bottom {
  transform: translateY(0);
}

#tech-hover-label {
  position: fixed;
  top: 0;
  left: 0;
  padding: 8px 14px;
  background: #000;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.85);
  z-index: 9999;
  white-space: nowrap;
}
/* Preloader Styles */
.loading-page {
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #ffffff, #ffffff, #ffffff);
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 60px;
  z-index: 99999;
}

.counter {
  font-size: 180px;
  font-weight: 900;
  color: #000000;
  font-family: "Black Ops One", cursive;
  line-height: 1;
  letter-spacing: -5px;
  position: fixed;
  bottom: 60px;
  right: 60px;
  z-index: 100000;
}

/* Page reveal overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  z-index: 99998;
  pointer-events: none;
}

.bar {
  width: 10vw;
  height: 105vh;
  background: #000000;
  
}

/* Hide main content initially */
#main {
  opacity: 0;
}

@media (max-width: 768px) {
  .counter {
    font-size: 120px;
    bottom: 40px;
    right: 40px;
  }
  .loading-page {
    padding: 40px;
  }
}