:root {
    /* Tema Cosmo/Universo - Blu scuro profondo e colori stellari */
    --bg-color: #01040f; /* Blu scurissimo, profondo e spaziale */
    --text-color: #e6efff;
    --highlight: #cce0ff; /* Azzurro/violetto tenue per le parole */
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    background-image: linear-gradient(rgba(1, 4, 15, 0.75), rgba(1, 4, 15, 0.85)), url('bg.png'); /* Scuriamo l'immagine con un filtro per mantenere alto il contrasto */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden; /* Evitiamo lo scroll quando le parole cadono */
    font-family: 'Inter', sans-serif;
}

/* "Nebulose" luminose mobili sul lato alto (le luci di prima) */
.top-flare {
    position: absolute;
    height: 35vh; /* Più alte per entrare meglio nell'inquadratura */
    /* Colore aurora boreale azzurro e blu con intensità sufficiente a essere vista */
    background: radial-gradient(ellipse center, rgba(74, 137, 255, 0.4) 0%, transparent 70%);
    filter: blur(25px); /* Effetto sfocatura estremo per sembrare polvere di stelle o nebulosa */
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: fadeFlare linear forwards;
}

@keyframes fadeFlare {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Stili per le parole che cadono */
.drop {
    position: absolute;
    top: -10vh; /* Iniziano poco sopra lo schermo invisibili */
    color: var(--highlight);
    font-family: 'Dancing Script', cursive; /* Stile corsivo ed elegante per le frasi d'amore */
    white-space: nowrap;
    pointer-events: none; /* Le parole non devono intercettare i click del mouse */
    user-select: none;
    /* Un brillante bagliore stellare/azzurrato attorno al testo */
    text-shadow: 0 0 10px rgba(204, 224, 255, 0.6), 
                 0 0 25px rgba(204, 224, 255, 0.3);
    /* L'animazione base */
    animation: fall linear forwards;
}

/* L'animazione di discesa. TranslateY sfrutta la GPU per animazioni a 60fps fluidissime */
@keyframes fall {
    from {
        transform: translateY(-10vh);
    }
    to {
        transform: translateY(115vh);
    }
}

/* =========================================
   EFFETTO TERMINALE 
   ========================================= */

/* Classe applicata al body per sfumare le scritte in sottofondo */
body.dim-background {
    background-color: #000 !important; /* Si scurisce del tutto lo sfondo generico */
}
body.dim-background .drop {
    opacity: 0.05 !important;
    filter: blur(2px) !important;
    text-shadow: none !important;
    transition: all 1.5s ease;
}

body.dim-background .top-flare {
    opacity: 0.1 !important;
    transition: all 1.5s ease;
}

/* Finestra terminale finta */
.terminal {
    position: absolute;
    top: 30px;
    left: 30px;
    font-family: 'Consolas', 'Courier New', monospace; /* Font stile hacker/terminale */
    color: #e6f0ff; /* Azzurro chiarissimo, luce di stella */
    font-size: 1.2rem;
    z-index: 200;
    text-shadow: 0 0 8px rgba(128, 191, 255, 0.6), 0 0 15px rgba(128, 191, 255, 0.2); /* Effetto shiny cosmico moderato */
    letter-spacing: 1px;
}

/* Cursore lampeggiante finto */
.terminal-cursor {
    display: inline-block;
    animation: blinkCursor 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =========================================
   MATRIX EFFECT E CUORE
   ========================================= */

.matrix-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    z-index: 150;
    pointer-events: none;
}

.matrix-bg {
    opacity: 0.15; /* Sfondo matrix opaco e leggero */
}

/* Colonna singola, contiene i numeri concatenati 2 volte per il loop */
.matrix-col {
    color: #e6f0ff; /* Azzurro cosmico base */
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 0 8px rgba(128, 191, 255, 0.4);
    animation: matrixScroll linear infinite;
    /* Evita interruzioni di riga accidentali */
    white-space: nowrap; 
}

/* Overlay luminoso del cuore battente */
.matrix-heart {
    z-index: 151;
    
    /* Maschera formata come un cuore perfetto vettoriale */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,90 C50,90 10,60 10,30 C10,10 40,0 50,20 C60,0 90,10 90,30 C90,60 50,90 50,90 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 55vmin;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,90 C50,90 10,60 10,30 C10,10 40,0 50,20 C60,0 90,10 90,30 C90,60 50,90 50,90 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 55vmin;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    
    opacity: 0; /* Inizia invisibile */
    transition: opacity 3s ease-in-out; /* Appare piano piano */
}

.matrix-heart .matrix-col {
    /* Nel cuore i numeri sono puramente bianchi e super luminosi */
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(128, 191, 255, 1), 0 0 25px rgba(255, 255, 255, 0.8);
}

.matrix-heart.active {
    opacity: 1;
}

.matrix-heart.beating {
    animation: heartBeatMatrix 1s infinite alternate ease-in-out;
}

/* Lo scorrimento va fino a -50% per un seamless loop dato che il testo è duplicato */
@keyframes matrixScroll {
    from { transform: translateY(0%); }
    to { transform: translateY(-50%); } 
}

/* Il battito ingrandisce l'intera griglia visibile del cuore, dando un super effetto 3D */
@keyframes heartBeatMatrix {
    0% { transform: scale(1); }
    100% { transform: scale(1.06); }
}