/* ---------- Sunlight Animation ---------- */
.sunlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

    .sunlight::before,
    .sunlight::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: repeating-linear-gradient( 45deg, rgba(255, 200, 0, 0.08), rgba(255, 200, 0, 0.08) 30px, rgba(255, 255, 255, 0.03) 30px, rgba(255, 255, 255, 0.03) 60px );
        animation: sunlightMove 20s linear infinite;
    }

    .sunlight::after {
        animation-duration: 35s;
        opacity: 0.6;
    }

@keyframes sunlightMove {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(15%, 15%);
    }
}

/* Ensure hero content stays above sunlight */
.hero {
    position: relative;
    overflow: hidden;
}

    .hero > .container {
        position: relative;
        z-index: 2;
    }

@media (max-width: 768px) {
    .sunlight::before,
    .sunlight::after {
        animation-duration: 45s;
        opacity: 0.4;
    }
}