/* Hero Starfield Animation */
.hero {
    position: relative;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(4, 8, 18, 0.7), rgba(3, 19, 53, 0.5)), url('/assets/img/sfondo.jpeg') no-repeat center center;
    background-size: cover;
    z-index: 0;
    /* Ensure it covers full area without offset */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.hero__stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(2px 2px at 80% 10%, white, transparent),
        radial-gradient(1px 1px at 30% 90%, white, transparent);
    background-size: 200px 200px;
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, 150px 50px;
    animation: twinkle 3s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

@media (max-width: 768px) {
    .hero__stars {
        animation: none;
        opacity: 0.5;
    }
}

/* Services Subtle Grid */
.section--light.services,
#servizi {
    background:
        linear-gradient(135deg, #F8F9FB 25%, transparent 25%) -10px 0,
        linear-gradient(225deg, #F8F9FB 25%, transparent 25%) -10px 0,
        linear-gradient(315deg, #F8F9FB 25%, transparent 25%),
        linear-gradient(45deg, #F8F9FB 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: #FFFFFF;
    position: relative;
}

/* Footer Dense Starfield */
.site-footer {
    position: relative;
    background: #031335;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 15% 20%, white, transparent),
        radial-gradient(1px 1px at 45% 60%, white, transparent),
        radial-gradient(1px 1px at 75% 40%, white, transparent),
        radial-gradient(1px 1px at 25% 80%, white, transparent),
        radial-gradient(1px 1px at 85% 15%, white, transparent);
    background-size: 150px 150px;
    opacity: 0.7;
    animation: twinkling-footer 4s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes twinkling-footer {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.9;
    }
}

.site-footer>.container {
    position: relative;
    z-index: 1;
}