/* Animated text layers for hero section */

/* Text layer container with progressive fade */
.hero-section {
  --text-opacity-top: 0.02;
  --text-opacity-mid: 0.08;
  --text-opacity-bottom: 0.02;
}

/* Ensure content wrapper allows absolute positioning */
.hero-content {
  position: relative;
  z-index: 10;
}

/* Create multiple text layers using generated content on hero-content */
.hero-content::before {
  content: 'Uptime • Monitoring • Alerts • Performance • SSL • Webhooks • Reliability • 24/7 • Instant • Detection • Uptime • Monitoring • Alerts • Performance • SSL • Webhooks • Reliability • 24/7 • Instant • Detection • ';
  position: absolute;
  top: -50px;
  left: 0;
  width: max-content;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: rgba(200, 210, 220, 0.15);
  white-space: nowrap;
  animation: scrollLeft 45s linear infinite;
  z-index: -1;
  pointer-events: none;
  letter-spacing: 0.12em;
}

.hero-content::after {
  content: 'Real-time • Notifications • Downtime • Status • Fast Response • Email • SMS • Webhooks • Real-time • Notifications • Downtime • Status • Fast Response • Email • SMS • Webhooks • ';
  position: absolute;
  bottom: -80px;
  right: 0;
  width: max-content;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: rgba(200, 210, 220, 0.12);
  white-space: nowrap;
  animation: scrollRight 55s linear infinite;
  z-index: -1;
  pointer-events: none;
  letter-spacing: 0.1em;
}

/* Additional text layers using data attributes */
.hero-section[data-text-layer="1"]::before {
  content: 'HTTP • HTTPS • API • Website • Service • Monitoring • Checks • SSL Certificate • HTTP • HTTPS • API • Website • Service • Monitoring • Checks • SSL Certificate • ';
  position: absolute;
  top: 30%;
  right: 0;
  width: max-content;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 600;
  color: rgba(200, 210, 220, 0.1);
  white-space: nowrap;
  animation: scrollRight 65s linear infinite;
  z-index: 0;
  pointer-events: none;
  letter-spacing: 0.1em;
}

/* Remove individual element text layers - they cause positioning issues */

/* Progressive fade overlay for text layers - very subtle */
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    var(--hero-bg-color) 0%,
    rgba(248, 249, 250, 0.7) 3%,
    rgba(248, 249, 250, 0.3) 8%,
    transparent 15%,
    transparent 85%,
    rgba(248, 249, 250, 0.3) 92%,
    rgba(248, 249, 250, 0.7) 97%,
    var(--hero-bg-color) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Ensure all hero content children are above text layers */
.hero-content > * {
  position: relative;
  z-index: 10;
}

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

html[data-theme="dark"] .hero-section::before {
  background: linear-gradient(
    to bottom,
    var(--hero-bg-color) 0%,
    rgba(24, 26, 27, 0.7) 3%,
    rgba(24, 26, 27, 0.3) 8%,
    transparent 15%,
    transparent 85%,
    rgba(24, 26, 27, 0.3) 92%,
    rgba(24, 26, 27, 0.7) 97%,
    var(--hero-bg-color) 100%
  );
}