.spinner {
  width: 40px; height: 40px;
  background-color: var(--text-color);
  border-radius: 50%;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0.5; }
}

.webgl-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.perspectives-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.perspective {
  position: absolute;
  width: 100%;
  text-align: center;
  opacity: 0; /* Managed by GSAP */
}

.perspective h2 {
  font-size: 5rem;
  font-weight: 300;
  line-height: 0.8;
  margin: 0;
}

.perspective p {
  font-size: 1.5rem;
  font-weight: 300;
  opacity: 0.5;
  margin-top: 0.5rem;
  font-family: system-ui, sans-serif;
}

/* Exact positioning from the original code */
.p-top { top: 20vh; left: 50%; transform: translateX(-50%); }
.p-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.p-bottom { bottom: 20vh; left: 50%; transform: translateX(-50%); }

.scroll-container {
  height: 500vh; /* Provides plenty of scrolling space */
}

@media (max-width: 768px) {
  .perspective h2 { font-size: 3rem; }
  .perspective p { font-size: 1rem; }
  .p-top { top: 25vh; }
}