/**
 * CSS-Only Text Animation for Linux Hero Section
 * Replaces Typed.js with pure CSS keyframe animation
 */

/* Typing animation for hero heading */
@keyframes typeWords {
  0%, 22% { 
    content: "Dedicated Servers"; 
  }
  25%, 47% { 
    content: "VPS Hosting"; 
  }
  50%, 72% { 
    content: "Cloud Infrastructure"; 
  }
  75%, 97% { 
    content: "Colocation Services"; 
  }
}

/* Cursor blink animation */
@keyframes blink {
  0%, 49% { 
    opacity: 1; 
  }
  50%, 100% { 
    opacity: 0; 
  }
}

/* Hero typed text styling */
.hero-section #typed {
  display: inline-block;
  min-width: 350px; /* Prevent layout shift */
}

.hero-section #typed::before {
  content: "Dedicated Servers";
  animation: typeWords 8s infinite;
  color: #0069ff; /* Primary blue */
}

.hero-section .cursor {
  display: inline-block;
  animation: blink 1s infinite;
  font-weight: 400;
  margin-left: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-section #typed {
    min-width: 250px;
  }
  
  .hero-section #typed::before {
    font-size: inherit;
  }
}

@media (max-width: 480px) {
  .hero-section #typed {
    min-width: 200px;
  }
}