@import url(./reset.css);

:root {
    --bg: #edf0f6;
    --surface: #ffffff;
    --ink: #101b36;
    --muted: #55607a;
    --line: #d2d8e6;
    --accent: #2b55f0;
    --accent-ink: #ffffff;
    --soft: #dde4fb;
    --ok: #12805c;

    --hero-background-width: 2172px;
    --hero-background-height: 724px;

    --hero-middleground-width: 2172px;
    --hero-middleground-height: 724px;

    --hero-foreground-width: 891px;
    --hero-foreground-height: 374px;

    --hero-planes-ratio: 30;
    --hero-frontplane-ratio: 40;

    --gyro-x: 0;
    --gyro-y: 0;

    --title-primary-size: 1.2rem;
    --title-secondary-size: 1rem;

    --text-primary-size: 1rem;
    --text-secondary-size: 0.9rem;

    --button-primary-size: 1.1rem;
    --button-secondary-size: 0.8rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0d1326;
        --surface: #141c36;
        --ink: #e9edf8;
        --muted: #98a3c0;
        --line: #26305200;
        --line: #263052;
        --accent: #7c97ff;
        --accent-ink: #0d1326;
        --soft: #1d2850;
        --ok: #4fd1a0;
    }
}

:root[data-theme="dark"] {
    --bg: #0d1326;
    --surface: #141c36;
    --ink: #e9edf8;
    --muted: #98a3c0;
    --line: #263052;
    --accent: #7c97ff;
    --accent-ink: #0d1326;
    --soft: #1d2850;
    --ok: #4fd1a0;
}

body {
    background-color: #222;
    color: white;
}

@keyframes slide-in-background {
    from {
        transform: translateX(-10%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-in-middleground {
    from {
        transform: translateX(-20%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-in-foreground {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.hero {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1280px;
    height: calc(var(--hero-planes-ratio) * var(--hero-background-height) / 100);
    margin: 0 auto;

    .hero-loading {
        width: 100%;
        height: 100%;
        background-color: black;
    }

    .hero-loading-text {
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: var(--title-primary-size);
        color: #555;
        text-align: center;
    }

    .hero-playing {
        display: none;
    }

    .hero-background,
    .hero-middleground,
    .hero-foreground,
    .hero-title,
    .hero-control {
        position: absolute;
    }

    .hero-background {
        left: -10px;
        top: 0;
        animation: 2s linear slide-in-background;
        width: calc(var(--hero-planes-ratio) * var(--hero-background-width) / 100);
        height: calc(var(--hero-planes-ratio) * var(--hero-background-height) / 100);
        transform:
            translate3d(calc(var(--gyro-x) * 10px),
                0,
                0);
    }

    .hero-middleground {
        left: -25px;
        top: 25px;
        animation: 2s linear slide-in-middleground;
        width: calc(var(--hero-planes-ratio) * var(--hero-middleground-width) / 100);
        height: calc(var(--hero-planes-ratio) * var(--hero-middleground-height) / 100);
        transform:
            translate3d(calc(var(--gyro-x) * 25px),
                calc(var(--gyro-y) * 25px),
                0);
    }

    .hero-foreground {
        bottom: 0;
        animation: 2s linear slide-in-foreground;
        width: calc(var(--hero-frontplane-ratio) * var(--hero-foreground-width) / 100);
        height: calc(var(--hero-frontplane-ratio) * var(--hero-foreground-height) / 100);
        transform:
            translate3d(calc(var(--gyro-x) * 50px),
                calc(var(--gyro-y) * 50px),
                0);
    }

    .hero-title {
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: fit-content;

        h2 {
            color: #555;
            font-size: var(--title-primary-size);
            text-align: center;
            text-decoration: underline;
            text-decoration-color: aqua;
            text-underline-offset: 0.5rem;
            text-shadow: 0 0 3rem black;
            text-wrap-style: balance;
        }
    }

    .hero-control {
        bottom: 0.5rem;
        right: 0.5rem;

        button {
            color: white;
            background-color: #333;
            padding: 0.5rem;
            border-radius: 0.5rem;
            cursor: pointer;
            font-size: var(--button-secondary-size);
        }

        button:hover {
            background-color: #444;
        }
    }
}

p {
    font-size: var(--text-primary-size);
    color: white;
}

a {
    font-size: 1.2rem;
    text-decoration: underline;
    color: lightsalmon;
}

.error {
    color: lightcoral;
}

.intro-container,
.duo-container,
.project-container,
.articles-container,
.contact-container,
.footer-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.intro-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 3rem;
    padding: 0 0.5rem;

    .left,
    .right {
        width: 100%;
    }

    .left {
        padding-bottom: 3rem;

        h1 {
            color: lightblue;
            font-size: var(--title-primary-size);
            text-shadow: calc(var(--gyro-x) * 0.5rem) calc(var(--gyro-y) * 0.5rem) 0.3rem gray;
        }

        p {
            font-size: var(--text-primary-size);
        }
    }
}

.duo-container {
    margin-bottom: 1rem;
}

.project-container {
    margin-bottom: 3rem;
    padding: 0 0.5rem;

    h2 {
        font-size: var(--title-primary-size);
        color: lightblue;
    }

    p {
        font-size: var(--text-primary-size);
    }
}

.articles-container {
    article:nth-child(2n) {
        background-color: #444;
    }

    article:nth-child(2n + 1) {
        background-color: #555;
    }
}

article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding: 2.5rem 0.5rem;
    width: 100%;

    .left,
    .right {
        width: 100%;
    }

    .left {
        padding-bottom: 2.5rem;

        img {
            border-radius: 0.5rem;
        }
    }

    .right {
        .description {
            .enlight {
                font-style: italic;
            }

            h3 {
                color: lightcyan;
                font-size: var(--title-primary-size);
            }

            h4 {
                color: lightcyan;
                font-size: var(--title-secondary-size);
                margin: 0.5rem 0;
            }

            ul {
                font-size: var(--text-primary-size);
                padding-left: 2rem;

                li {
                    list-style: disc;
                }
            }
        }

        .buttons {
            margin-top: 2rem;
        }
    }
}

.golive {
    display: inline-block;
    font-size: var(--button-primary-size);
    color: white;
    margin-top: 1rem;
    padding: 0.5rem 2rem;
    background-color: rgb(22, 81, 83);
    border-radius: 1rem;
    border: 3px solid rgb(40, 108, 110);
    transition: all 0.3s;
    text-decoration: none;
}

.golive:hover,
.golive:focus {
    box-shadow: 0rem 0rem 0.8rem black;
    background-color: rgb(25, 85, 87);
    color: white;
    transition: all 0.3s;
}

.gosource {
    display: inline-block;
    font-size: var(--button-secondary-size);
    color: bisque;
    text-decoration: none;
    margin-top: 0.5rem;
}

.gosource:hover {
    color: white;
    transition: all 0.3s;
    text-shadow: 0 0 0.8rem black;
}

header,
footer {
    width: 100vw;
    background-color: #222;
}

header {
    padding-bottom: 3rem;
}

.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 3rem 0;
    margin: 0 auto;
    width: 96%;

    .left,
    .right {
        width: 100%;

        h2 {
            font-size: var(--title-primary-size);
        }

        p {
            font-size: var(--text-primary-size);
        }
    }

    .left {
        padding-bottom: 2.5rem;
    }

    p:first-child {
        font-weight: 600;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    input,
    textarea {
        color: white;
        background-color: #444;
        border: none;
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        margin: 0.5rem 0;
        width: 100%;
        font-size: var(--text-primary-size);
    }

    textarea {
        resize: none;
        height: 8rem;
    }

    button {
        font-size: var(--button-primary-size);
        color: white;
        background-color: #464;
        border: none;
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        margin: 0.5rem 0;
        width: 100%;
        transition: all 0.3s;
    }

    button:hover,
    button:focus {
        color: oldlace;
        background-color: #575;
        cursor: pointer;
        transition: all 0.3s;
    }
}

.footer-container {
    padding: 3rem 0.5rem 1rem 0.5rem;

    p {
        font-size: var(--text-secondary-size);
        font-style: italic;
        color: antiquewhite;
    }

    .copyright {
        margin-top: 1rem;
        font-size: var(--text-secondary-size);
        color: lightblue;
        text-align: center;
    }
}

@media screen and (min-width: 540px) {
    :root {
        --hero-planes-ratio: 45;
        --hero-frontplane-ratio: 60;

        --title-primary-size: 1.6rem;
        --title-secondary-size: 1.4rem;

        --text-primary-size: 1.2rem;
        --text-secondary-size: 1.0rem;

        --button-primary-size: 1.2rem;
        --button-secondary-size: 1rem;
    }

    .hero {
        .hero-title {
            top: 1.5rem;

            h2 {
                text-underline-offset: 0.6rem;
            }
        }
    }
}

@media screen and (min-width: 720px) {
    :root {
        --hero-planes-ratio: 60;
        --hero-frontplane-ratio: 80;

        --title-primary-size: 1.8rem;
        --title-secondary-size: 1.6rem;

        --text-primary-size: 1.4rem;
        --text-secondary-size: 1.2rem;

        --button-primary-size: 1.1rem;
        --button-secondary-size: 1rem;
    }

    .hero {
        .hero-title {
            top: 2rem;

            h2 {
                text-underline-offset: 1rem;
            }
        }

        .hero-control {
            button {
                font-size: 1rem;
            }
        }
    }

    .intro-container {
        flex-direction: row;
        justify-content: space-between;

        .left,
        .right {
            width: 48%;
        }

        .left {
            padding-bottom: 0;
        }
    }

    article {
        flex-direction: row;
        justify-content: space-between;

        .left,
        .right {
            width: 48%;
        }

        .left {
            padding-bottom: 0;
        }
    }

    article:nth-child(2n) {
        flex-direction: row-reverse;
    }

    .contact-container {
        flex-direction: row;

        .left,
        .right {
            width: 49%;
        }

        .left {
            padding-bottom: 0;
        }

        textarea {
            resize: none;
            height: 12rem;
        }
    }
}

@media screen and (min-width: 980px) {
    :root {
        --hero-planes-ratio: 80;
        --hero-frontplane-ratio: 100;

        --title-primary-size: 2.0rem;
        --title-secondary-size: 1.8rem;

        --text-primary-size: 1.6rem;
        --text-secondary-size: 1.4rem;

        --button-primary-size: 1.6rem;
        --button-secondary-size: 1.4rem;
    }

    .hero {
        .hero-title {
            top: 3rem;
        }
    }
}

@media screen and (min-width: 1280px) {
    .intro-container {
        padding: 0 0 3rem 0;
    }

    .duo-container,
    .project-container,
    .contact-container {
        padding: 0;
    }

    .footer-container {
        padding: 3rem 0 1rem 0;
    }

    article {
        border-radius: 0.5rem;
        margin-bottom: 2.5rem;
    }
}

/* Visuel duo : navigator + phone */
.duo {
    position: relative;
    height: 340px;
    max-width: 540px;
    margin: 0 auto;
}

.browser {
    position: absolute;
    inset: 0 60px 30px 0;
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: 14px;
    overflow: hidden;
}

.browser .bar {
    height: 30px;
    border-bottom: 2px solid var(--ink);
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 0 12px;
}

.browser .bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
}

.browser .body {
    padding: 18px;
    display: grid;
    gap: 10px;
}

.ln {
    height: 10px;
    border-radius: 5px;
    background: var(--line);
}

.ln.a {
    background: var(--accent);
    width: 45%;
    height: 16px;
}

.ln.w60 {
    width: 60%;
}

.ln.w80 {
    width: 80%;
}

.blk {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.blk b {
    height: 70px;
    border-radius: 8px;
    background: var(--soft);
}

.phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 132px;
    height: 250px;
    background: var(--surface);
    border: 2px solid var(--ink);
    border-radius: 24px;
    padding: 26px 12px 12px;
    display: grid;
    gap: 9px;
    align-content: start;
    box-shadow: -8px 8px 0 var(--accent);
}

.phone::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 34px;
    height: 5px;
    margin-left: -17px;
    border-radius: 3px;
    background: var(--ink);
}

.phone b {
    height: 58px;
    border-radius: 9px;
    background: var(--soft);
}