/* Stili per la sezione "Upcoming App" - file: upcoming.css (VERSIONE CORRETTA) */

/* 1. Rende la sezione un punto di riferimento per il posizionamento */
.upcoming-app-section {
    position: relative;
    overflow: hidden; /* Nasconde le parti delle stelle che escono dai bordi */
}

/* 2. Posiziona il contenitore dei pattern dietro al contenuto */
.upcoming-app-section .pattern-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* 3. Assicura che il contenuto principale sia posizionato SOPRA i pattern */
.upcoming-app-section .auto-container {
    position: relative;
    z-index: 1;
}

/* 4. Regole per OGNI singola stella/pattern */
.upcoming-app-section .pattern-layer .pattern-1,
.upcoming-app-section .pattern-layer .pattern-2,
.upcoming-app-section .pattern-layer .pattern-3,
.upcoming-app-section .pattern-layer .pattern-4,
.upcoming-app-section .pattern-layer .pattern-5 {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    
    /* LA CORREZIONE CHIAVE: Assegniamo una dimensione a ciascuna stella */
    width: 120px;
    height: 120px;
}
    
/* 5. Posizionamento specifico per ogni stella (può personalizzarlo) */
.upcoming-app-section .pattern-layer .pattern-1 { top: 50px; left: 5%; }
.upcoming-app-section .pattern-layer .pattern-2 { top: 20%; right: 5%; }
.upcoming-app-section .pattern-layer .pattern-3 { bottom: 10%; left: 15%; }
.upcoming-app-section .pattern-layer .pattern-4 { bottom: 20%; right: 20%; }
.upcoming-app-section .pattern-layer .pattern-5 { top: 10%; right: 40%; }


/* 6. APPLICA L'ANIMAZIONE: Questa regola rimane invariata */
.upcoming-app-section .pattern-layer .rotate-me {
    -webkit-animation: rotate-me 50s linear infinite;
    animation: rotate-me 50s linear infinite;
}

/* 7. DEFINIZIONE DELL'ANIMAZIONE: Anche questa rimane invariata */
@-webkit-keyframes rotate-me {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate-me {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}