/* Section Entrance Animation */
.moving-gradient-bg {
    opacity: 0;
    /* Initially hidden */
    transform: translateY(50px);
    /* Move down slightly */
    animation: slideIn 1s forwards;
    /* Apply the slideIn animation */
}

/* Define the keyframes for the entrance animation */
@keyframes slideIn {
    to {
        opacity: 1;
        /* Fully visible */
        transform: translateY(0);
        /* Original position */
    }
}

/* Optimized static gradient - no animation for better performance */
section {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Single static gradient for better performance */
    overflow: hidden;
    /* Ensure the glossy effect stays within the bounds */
}

/* Subtle animated accent for visual interest without performance impact */
@media (prefers-reduced-motion: no-preference) {
    section {
        background: linear-gradient(
            135deg,
            #667eea 0%,
            #764ba2 50%,
            #667eea 100%
        );
        background-size: 200% 200%;
        animation: subtle-gradient 8s ease-in-out infinite;
    }
}

/* Much lighter animation for capable devices */
@keyframes subtle-gradient {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Simplified glossy effect */
section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0)
    );
    opacity: 0.5;
    pointer-events: none;
}

/* Remove the heavy second pseudo-element animation */
section::after {
    display: none;
}