/* Additional text layers positioned on hero-section for better visibility */

/* Fourth layer - middle */
.hero-section[data-text-layer="1"]::after {
  content: 'Uptime Tracking • Performance • Response Time • Server Health • Availability • Analytics • Uptime Tracking • Performance • Response Time • Server Health • Availability • Analytics • ';
  position: absolute;
  top: 50%;
  left: 0;
  width: max-content;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 600;
  color: rgba(200, 210, 220, 0.09);
  white-space: nowrap;
  animation: scrollLeft 70s linear infinite;
  z-index: 1;
  pointer-events: none;
  letter-spacing: 0.1em;
  transform: translateY(-50%);
}

/* Add animations if not already defined */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

/* Dark mode */
html[data-theme="dark"] .hero-section[data-text-layer="1"]::after {
  color: rgba(100, 110, 120, 0.09);
}