/* Animazioni globali */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 1) Sfondo nero fisso */
.bg-color {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #000;
    /* #010101 va benissimo, ma #000 è puro nero */
}
/* 2) Sfondo immagine che parte trasparente e diventa opaco */
.bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: url('../../assets/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    /* parte invisibile */
    animation: fadeInBg 1.5s ease-out forwards;
    /* fade da 0 a 1 */
}
/* 3) Definiamo l’animazione fadeInBg */
@keyframes fadeInBg {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* 4) Il contenuto (testi, form, ecc.) appare in ritardo con la fade classica: */
.content-fade {
    animation: fadeInContent 1s ease-out 1.2s forwards;
    /* delay dopo il bg */
    opacity: 0;
}
/* 5) Animazione per il contenuto */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
        /* un leggero spostamento verso l’alto, se vuoi */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}
.email-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    font-family: 'Poppins', sans-serif;
}
.email-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.content-wrapper {
    width: 100%;
    margin-left: auto;
    padding: 1rem;
}
h1 {
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.02em;
}
.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 1rem;
    border-radius: 0.5rem;
    color: white;
    transform: translateY(150%);
    transition: transform 0.3s ease-out;
}
.notification.show {
    transform: translateY(0);
}
.notification.success {
    background-color: rgba(34, 197, 94, 0.9);
}
.notification.error {
    background-color: rgba(239, 68, 68, 0.9);
}
@media (min-width: 768px) {
    .content-wrapper {
        width: 80%;
        padding-right: 4rem;
    }
}
@media (min-width: 1024px) {
    .content-wrapper {
        width: 55%;
        padding-right: 16rem;
    }
}
@media (max-width: 768px) {
    body {
        overflow-y: auto;
    }
    .bg-wrapper {
        position: fixed;
        height: 100%;
    }
}
/* Impedisce la selezione del testo */
* {
    user-select: none;
    -webkit-user-drag: none;
}
/* Impedisce il trascinamento delle immagini */
img {
    pointer-events: none;
    -webkit-user-drag: none;
}

/* === Salto a onda per avatar === */
@keyframes jumpWave {

    0%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-6px);
    }

    20% {
        transform: translateY(0);
    }

    /* dal 20% al 100%: pausa visiva */
}

.animate-jump-wave-1 {
    animation: jumpWave 2s ease-in-out infinite;
    animation-delay: 0s;
}

.animate-jump-wave-2 {
    animation: jumpWave 2s ease-in-out infinite;
    animation-delay: 0.1s;
}

.animate-jump-wave-3 {
    animation: jumpWave 2s ease-in-out infinite;
    animation-delay: 0.2s;
}