/* --- Loader Spinner Animation --- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Hero Section Animations --- */
/* The gradient background is prepared for a scroll-driven parallax effect via GSAP. */
.animated-background {
    background: linear-gradient(-45deg, #0a74da, #053b70, #23a6d5, #23d5ab);
    background-size: 400% 400%;
}

/* --- NEW: Style for the subheading to ensure it's ready for animation --- */
.kinetic-subheading {
    margin-top: 20px; /* Add some space below the main headline */
    font-weight: 400; /* Lighter weight to contrast with the headline */
    display: inline-block; /* Ensures proper layout */
}

/* --- UPDATED: Interactive Hover Effect for ALL Kinetic Text --- */
/* This now targets any character inside the hero-content container. */
.hero-content .char:hover {
    transform: scale(1.2) rotate(5deg);
    color: var(--primary-color);
    transition: transform 0.2s ease, color 0.2s ease;
    cursor: default;
}