/* Style général */
body {
    font-family: 'Orbitron', sans-serif;
    background: radial-gradient(circle, rgba(31,81,93,1) 0%, rgba(0,0,0,1) 100%);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background 2s ease-in-out;
}

.container {
    text-align: center;
}

.layered-text {
    font-size: 6rem;
    color: #000010; /* Texte initial sans ombre */
    position: relative;
    display: inline-block;
    letter-spacing: -5px;
    text-transform: uppercase;
    font-weight: 500;
    animation: moveShadow 5s infinite cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: text-shadow 0.3s ease, cursor 0.3s ease; /* Transition pour l'ombre du texte et le curseur */
}

/* Animation des ombres du texte avec décalages dans différentes directions */
@keyframes moveShadow {
    0% {
        text-shadow: 
            6px 6px 0 rgba(51, 51, 51, 0.8),        /* Ombre gris très foncé décalée en bas à droite */
            -5px 5px 0 rgba(85, 85, 85, 0.8),       /* Ombre gris clair décalée en haut à gauche */
            9px -9px 0 rgba(68, 68, 68, 0.8),       /* Ombre gris moyen décalée en haut à droite */
            -11px -11px 0 rgba(102, 102, 102, 0.8);  /* Ombre gris clair foncé décalée en bas à gauche */
    }
    25% {
        text-shadow: 
            11px 11px 0 rgba(51, 51, 51, 0.8),      /* Ombre gris très foncé décalée en bas à droite */
            -9px 9px 0 rgba(85, 85, 85, 0.8),       /* Ombre gris clair décalée en haut à gauche */
            13px -13px 0 rgba(68, 68, 68, 0.8),     /* Ombre gris moyen décalée en haut à droite */
            -16px -16px 0 rgba(102, 102, 102, 0.8);  /* Ombre gris clair foncé décalée en bas à gauche */
    }
    50% {
        text-shadow: 
            16px 16px 0 rgba(51, 51, 51, 0.8),      /* Ombre gris très foncé décalée en bas à droite */
            -13px 13px 0 rgba(85, 85, 85, 0.8),     /* Ombre gris clair décalée en haut à gauche */
            17px -17px 0 rgba(68, 68, 68, 0.8),     /* Ombre gris moyen décalée en haut à droite */
            -21px -21px 0 rgba(102, 102, 102, 0.8);  /* Ombre gris clair foncé décalée en bas à gauche */
    }
    75% {
        text-shadow: 
            21px 21px 0 rgba(51, 51, 51, 0.8),      /* Ombre gris très foncé décalée en bas à droite */
            -17px 17px 0 rgba(85, 85, 85, 0.8),     /* Ombre gris clair décalée en haut à gauche */
            21px -21px 0 rgba(68, 68, 68, 0.8),     /* Ombre gris moyen décalée en haut à droite */
            -26px -26px 0 rgba(102, 102, 102, 0.8);  /* Ombre gris clair foncé décalée en bas à gauche */
    }
    100% {
        text-shadow: 
            6px 6px 0 rgba(51, 51, 51, 0.8),        /* Ombre gris très foncé décalée en bas à droite */
            -5px 5px 0 rgba(85, 85, 85, 0.8),       /* Ombre gris clair décalée en haut à gauche */
            9px -9px 0 rgba(68, 68, 68, 0.8),       /* Ombre gris moyen décalée en haut à droite */
            -11px -11px 0 rgba(102, 102, 102, 0.8);  /* Ombre gris clair foncé décalée en bas à gauche */
    }
}

/* Effet de hover avec un text-shadow lumineux et réinitialisation des ombres */
.layered-text:hover {
    text-shadow: 
        0px 0px 15px rgba(255, 255, 255, 1),   /* Ombre lumineuse claire avec effet de survol */
        0px 0px 30px rgba(255, 255, 255, 0.8),   /* Ombre plus grande et plus claire */
        0px 0px 45px rgba(255, 255, 255, 0.6);   /* Ombre encore plus grande pour accentuer l'effet */
    cursor: pointer;  /* Changer le curseur en main pour indiquer que l'élément est cliquable */
}