@font-face {
    font-family: 'Caveat';
    src: url('./ressources/fonts/caveat-variablefont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('./ressources/fonts/urbanist-variablefont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Urbanist';
    src: url('./ressources/fonts/urbanist-italic-variablefont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* --- Variables Globales --- */
:root {
    --font-family-main: 'Urbanist';
    --font-family-accent: 'Caveat';

    --font-size-small: 1rem;
    --font-size-medium: 1.25rem;
    --font-size-large: 1.5rem;
    --font-size-xlarge: 2rem;
    --font-size-xxlarge: 4rem;
    --font-size-xxxlarge: 6rem;

    --font-weight-light: 300;
    --font-weight-normal: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    --color-black: #0b0d0f;
    --color-grey: #e0e0e0;
    --color-grey-transparent: rgba(255, 255, 255, 0.75);

    --size-circle: 25dvw
}

/* --- Reset de base --- */
* {
    margin: 0;
    padding: 0;
}

html,
body {
    font-family: var(--font-family-main);
    color: var(--color-black);
}

/* --- Arrière-Plan avec Cercles Animés et Pointillés --- */
.background-circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    z-index: -1;
    background: radial-gradient(circle, #ffffff, #f8f9fa 80%);
    background-size: 20px 20px;
    background-image: radial-gradient(var(--color-grey) 1px, transparent 1px);
}

/* --- Cercles animés avec des mouvements amplifiés --- */
.circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.9;
    height: var(--size-circle);
    width: var(--size-circle);
    opacity: 0;
    will-change: transform;
    animation: appearFromBottom 3.5s ease-out forwards, waveMovement 12s infinite ease-in-out;
}

.circle1 {
    background: radial-gradient(50% 50% at 50% 50%, rgba(26, 188, 254, 0.70) 0%, rgba(26, 188, 254, 0.00) 100%);
    animation-delay: 0s, 3.5s;
    left: 0dvw;
}

.circle2 {
    background: radial-gradient(50% 50% at 50% 50%, rgba(162, 89, 255, 0.70) 0%, rgba(162, 89, 255, 0.00) 100%);
    animation-delay: 1s, 4.5s;
    left: 20dvw;
}

.circle3 {
    background: radial-gradient(50% 50% at 50% 50%, rgba(38, 228, 80, 0.70) 0%, rgba(38, 228, 80, 0.00) 100%);
    animation-delay: 2s, 5.5s;
    left: calc((100dvw - var(--size-circle)) / 2);
}

.circle4 {
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 0, 0, 0.70) 0%, rgba(255, 0, 0, 0.00) 100%);
    animation-delay: 3s, 6.5s;
    right: 20dvw;
}

.circle5 {
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 0, 0.70) 0%, rgba(255, 255, 0, 00) 100%);
    animation-delay: 4s, 7.5s;
    right: 0dvw;
}

@keyframes appearFromBottom {
    0% {
        transform: translateY(110dvh);
    }

    100% {
        transform: translateY(-10dvh);
        opacity: 1;
    }
}

@keyframes waveMovement {
    0% {
        transform: translateY(-10dvh);
    }

    50% {
        transform: translateY(70dvh);
    }

    /* Monte */
    100% {
        transform: translateY(-10dvh);
    }

}

/* --- Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.25rem;
    border-radius: 2rem;
    border: none;
    background: white;
    color: var(--color-black);
    box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: ease-in-out 0.2s;
}

.btn:hover {
    box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.1);
}

.link-arrow {
    height: 1rem;
    width: 1rem;
    transform: rotate(60deg);
    transition: 0.15s ease-in-out;
}

.btn:hover .link-arrow {
    transform: rotate(40deg);
}


/* --- Section Hero --- */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
}

.content {
    text-align: center;
}

.photo-pp {
    width: 300px;
    height: auto;
}

p {
    margin-top: 2rem;
    font-size: var(--font-size-xlarge);
    text-wrap: balance;
}

h1 {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xxlarge);
    text-wrap: balance;
}

h1>span {
    font-family: Caveat;
    font-size: var(--font-size-xxxlarge);
    font-weight: var(--font-weight-black);
}

.subtitle {
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-large);
    text-wrap: balance;
}

@media (max-width: 880px) {
    :root {
        --size-circle: 15dvh
    }

    .photo-pp {
        width: 200px;
    }

    p {
        font-size: var(--font-size-medium);
    }

    h1 {
        font-size: var(--font-size-large);
    }

    h1>span {
        font-size: var(--font-size-xlarge);
    }

    .subtitle {
        font-size: var(--font-size-small);
    }

    @keyframes appearFromBottom {
        0% {
            transform: translateY(110dvh);
        }
    
        100% {
            transform: translateY(10dvh);
            opacity: 1;
        }
    }
    
    @keyframes waveMovement {
        0% {
            transform: translateY(10dvh);
        }
    
        50% {
            transform: translateY(80dvh);
        }
    
        /* Monte */
        100% {
            transform: translateY(10dvh);
        }
    
    }


}