* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    color: var(--text-main);
    font-family: var(--font-main);
    overflow: hidden; /* Nasconde scrollbar doppia */
}

/* --- BACKGROUND FISSO GLOBALE --- */
.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Sta dietro a tutto */

    background-image: url('/static/img/background_2.png');
    background-size: cover;
    background-position: center;
}

/* Overlay scuro sul background per uniformare */
.fixed-background::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.15); /* Leggera tinta nera sull'immagine pura */
}

/* --- SCROLL SNAP CONTAINER --- */
.scroll-container {
    height: calc(100vh - var(--header-height, 60px));
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

/* --- SEZIONI --- */
section {
    min-height: calc(100vh - var(--header-height, 60px));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    position: relative;

    /* Bordo sottile tra le sezioni */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* Sfondo semitrasparente standard */
    background-color: var(--section-bg);
    backdrop-filter: blur(5px); /* Effetto sfocato stile iOS */
}

/* La Hero ha uno sfondo più trasparente per impatto visivo */
section#hero {
    background-color: var(--hero-bg-color);
    border-bottom: none;
}

/* --- TYPOGRAPHY & STYLES --- */
h1, h2 { font-size: 3rem; margin-bottom: 1rem; line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
h3 { font-size: 1.5rem; color: var(--gold-shiny); margin-bottom: 1.5rem; letter-spacing: 3px; }

p {
    font-size: 1.1rem; max-width: 700px; line-height: 1.6;
    color: #d0d0d0; /* Leggermente più chiaro per contrasto su trasparenza */
    margin-bottom: 2rem;
    text-shadow: 0 1px 5px rgba(0,0,0,0.8);
}

.gold-text {
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-weight: 800;
}

.icon-feature { font-size: 3rem; margin-bottom: 1rem; color: var(--gold-primary); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* --- ANIMAZIONI --- */
.reveal { opacity: 0; transform: translateY(30px); transition: all 1s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* The reusable bouncing arrow class */
.scroll-arrow {
    position: absolute;
    bottom: 40px; /* Distance from the bottom of the section */
    left: 0;
    width: 100%; /* Spans the whole width to allow safe centering */
    text-align: center; /* Centers the arrow horizontally */
    
    font-size: 2rem;
    color: var(--gold-primary);
    animation: bounce 2s infinite;
    z-index: 10; /* Keeps it clickable/visible above other content */
    cursor: pointer; /* Optional: Makes it look clickable */
}

.reveal-above-arrow {
    position: absolute;
    bottom: 80px; /* Distance from the bottom of the section */
    left: 0;
    width: 100%; /* Spans the whole width to allow safe centering */
    text-align: center; /* Centers the arrow horizontally */
    color: var(--text-main);
}

/* Bouncing arrow in index.html*/ 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px); /* Adjust this value to make it bounce higher or lower */
    }
    60% {
        transform: translateY(-15px);
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    h1, h2 { font-size: 2.2rem; }
    header { padding: 1rem; }
    section { padding: 1.5rem; }
    /* Modifiche per l'header su mobile */
    .header-logo-img { height: 30px; }
    .nav-link { padding: 0.4rem 1rem; font-size: 0.9rem; }
}