#thpace-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero {
    position: relative;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(90deg, #010c0c, #086d6d, #060606);
    background-size: 600% 600%; /* Increased size for a slower shift */
    animation: gradientAnimation 16s ease infinite; /* Slower animation */
    color: #031B1B;
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 50%, rgba(8, 109, 109, 0.2), transparent 50%);
    animation: highlightShift 16s ease infinite; /* Sync with gradient animation */
    pointer-events: none;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 50%; } /* Lingers on the brand color */
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 50%; } /* Returns to the brand color */
    100% { background-position: 0% 50%; }
}

@keyframes highlightShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 50%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 50%; }
    100% { background-position: 0% 50%; }
}