html {
  height: 100vh;
}


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

body {
    height: 500vh;
    background: #000;
    font-family: 'Inter', sans-serif;
  }

canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
.loading-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #F8F8F8;
}

.loading-text {
  letter-spacing: -0.03rem;
}

.loading-scroll {
  overflow: hidden;
  white-space: nowrap;
  animation: scroll 2s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.blink {
  animation: blink 1s infinite ease-in-out;
}

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.loading-container.fade-out {
  animation: fadeOut 1s ease-in-out forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}