#wave {
    width: 600px;
    position: relative;
    z-index: 1;
    animation: constantwave 4s infinite ease-in-out 2s;
}
#wave1,
#wave2,
#wave3 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 600px;
    transform: rotate(-60deg) translate(-50px, -400px);
    animation: wave 1.5s forwards cubic-bezier(0, 0, 0, 1);
}
#wave1 {
    animation-delay: 1.7s;
}
#wave2 {
    animation-delay: 1.5s;
}
#wave3 {
    animation-delay: 1.3s;
}
#logo {
    position: absolute;
    top: 5px;
    left: 10px;
    width: 40px;
    height: 40px;
    z-index: 2;
    transform: translateY(-50px);
    filter: brightness(0.5);
    animation: logo 1s forwards cubic-bezier(0, 0, 0, 1) 2.5s;
}
@keyframes wave {
    from {
        transform: rotate(-60deg) translate(-50px, -400px);
    }
    to {
        transform: rotate(0deg) translate(0px, 0px);
    }
}
@keyframes constantwave {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    50% {
        transform: translate(-10px, -5px) rotate(-1deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}
@keyframes logo {
    from {
        transform: translateY(-50px);
    }
    to {
        transform: translateY(0px);
    }
}
#contactme {
    position: absolute;
    top: 30px;
    right: 40px;
}
.glass-card {
    position: absolute;
    top: 100px;
    left: 80px;
    width: calc(100vw - 140px);
    height: calc(100vh - 160px);
    filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.45));
    z-index: 2;

    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);

    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1702 847' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 290V756.5C10 795.16 41.34 826.5 80 826.5H876C914.66 826.5 946 795.16 946 756.5V655C946 616.34 977.34 585 1016 585H1612C1650.66 585 1682 553.66 1682 515V80C1682 41.3401 1650.66 10 1612 10H1094.5C1055.84 10 1024.5 41.3401 1024.5 80V150C1024.5 188.66 993.16 220 954.5 220H80C41.3401 220 10 251.34 10 290Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1702 847' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 290V756.5C10 795.16 41.34 826.5 80 826.5H876C914.66 826.5 946 795.16 946 756.5V655C946 616.34 977.34 585 1016 585H1612C1650.66 585 1682 553.66 1682 515V80C1682 41.3401 1650.66 10 1612 10H1094.5C1055.84 10 1024.5 41.3401 1024.5 80V150C1024.5 188.66 993.16 220 954.5 220H80C41.3401 220 10 251.34 10 290Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    animation: glassmorphism 1.5s forwards cubic-bezier(0, 0.78, 0.18, 1) 1s;
}
.glass-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.glass-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.glass-content {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.bottom-left-box {
    position: absolute;
    top: 26%;
    left: 0;
    width: 55.5%;
    height: 71.6%;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bottom-left-box p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 15px 0;
    font-weight: 400;
    font-family: 'Raleway';
}
.bottom-left-box .citation {
    margin-top: 20px;
    font-style: italic;
    font-size: 25px;
    font-family: SUSE;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: end;
}
.bottom-left-box .citationtext {
    text-align: left;
}
.bottom-left-box .auteur {
    display: block;
    font-style: normal;
    text-align: right;
    font-size: 22px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 5px;
}
#me {
    height: calc(100vh - 110px);
    position: absolute;
    bottom: 0px;
    right: 25vw;
    transform: translate(1000px);
    z-index: 3;
    animation: me 1s forwards cubic-bezier(0, 0.78, 0.18, 1) 2.2s;
}
#right-gradient {
    position: absolute;
    width: 230px;
    height: 230px;
    right: -240px;
    bottom: 10%;

    background: #00D4FF;
    filter: blur(200px);
}
.name-zone {
    position: absolute;
    top: 100px;
    left: 80px;
    width: calc((100vw - 140px) * 0.6);
    height: calc((100vh - 160px) * 0.26);
    display: flex;
    align-items: center;
    padding-left: 4%;
    box-sizing: border-box;
    container-type: inline-size;
    transform: translateY(-100px);
    opacity: 0;
    animation: title 0.5s forwards ease-out 2.2s;
}
.user-name {
    margin: 0;
    white-space: nowrap;
    font-weight: 400;
    font-style: italic;
    font-family: 'SUSE';
    color: #ffffff;
    font-size: 12cqw;
}
@keyframes glassmorphism {
    from {
        transform: scale(4);
        filter: blur(4px);
    }
    to {
        transform: scale(1);
        filter: blur(0px);
    }
}
@keyframes me {
    from {
        transform: translateX(50%) scale(0.8) rotate(45deg) translateY(180px);
        transform-origin: center bottom;
        filter: blur(3px);
    }
    to {
        transform: translateX(50%) scale(1) rotate(0deg) translateY(0px);
        transform-origin: center bottom;
        filter: blur(0px);
    }
}
@keyframes title {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}
#copyright {
    left: 20px;
    transform: unset;
}
#skills {
    position: absolute;
    bottom: 10px;
    left: 50vw;
    transform: translateX(-50%);
}