.hero {
    background-color: #060d18;
    background-image:
        /* glow light burst */
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(57, 126, 255, 0.25) 0%, transparent 80%),
        /* vertical lines */
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        /* horizontal lines */
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: auto, 80px 80px, 80px 80px;
}

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

.animate-scroll {
  animation: scroll 20s linear infinite;
}

.word span {
    display: inline-block;
    transition: all 0.3s ease;
}

/* trigger from parent hover */
.group:hover .word span {
    color: #6366f1;
    transform: translateY(-3px);
}

/* stagger effect */
.word span:nth-child(1) {
    transition-delay: 0s;
}

.word span:nth-child(2) {
    transition-delay: 0.05s;
}

.word span:nth-child(3) {
    transition-delay: 0.1s;
}

.word span:nth-child(4) {
    transition-delay: 0.15s;
}

.word span:nth-child(5) {
    transition-delay: 0.2s;
}

.word span:nth-child(6) {
    transition-delay: 0.25s;
}

.word span:nth-child(7) {
    transition-delay: 0.3s;
}

.word span:nth-child(8) {
    transition-delay: 0.35s;
}

.word span:nth-child(9) {
    transition-delay: 0.4s;
}

.word span:nth-child(10) {
    transition-delay: 0.45s;
}

.word span:nth-child(11) {
    transition-delay: 0.5s;
}