/* --- Variabili e Reset --- */
:root {
    --text-color: #fff;
    --background-color: #0d1a26; /* Blu notte / Scuro invernale */
    --accent-color: #ff004c; /* Colore acceso per il testo */
}

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

body, html {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--background-color);
    overflow: hidden; /* Nasconde scroll bar per la neve */
}

/* --- Layout e Allineamento --- */
.center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10; /* Sopra la neve */
    white-space: nowrap;
}

/* --- Testo Macchina da Scrivere --- */
#typing-text {
    color: var(--text-color);
    font-size: 5vw; /* Grande e responsive */
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    display: inline-block;
    vertical-align: top;
}

#cursor {
    display: inline-block;
    color: var(--accent-color);
    font-size: 5vw;
    font-weight: 800;
    vertical-align: top;
    margin-left: 5px;
}

/* Animazione del Cursore */
.blink {
    animation: blink-animation 0.7s step-end infinite;
}

@keyframes blink-animation {
    from, to { visibility: hidden; }
    50% { visibility: visible; }
}

/* --- Footer --- */
footer {
    position: fixed;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    z-index: 10;
    font-size: 1.2rem;
}

/* --- EFFETTO NEVE (Puro CSS) --- */

#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Rende la neve invisibile ai click */
    z-index: 5;
}

/* Genera un grande numero di fiocchi di neve tramite shadow */
/* La proprietà filter blur serve a rendere la caduta più morbida e lenta */
@keyframes snow {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

.flake {
    position: absolute;
    top: -10vh; /* Inizia sopra lo schermo */
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    filter: blur(1px); /* Effetto morbido */
    animation-name: snow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Gestione delle dimensioni del testo sul mobile */
@media (max-width: 768px) {
    #typing-text, #cursor {
        font-size: 8vw;
    }
}