/* =========================
   ROOT
   ========================= */

:root {
    --intro-logo-width: min(22vw, 280px);
}


/* =========================
   OVERLAY
   ========================= */

#intro-logo {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--foucher-navy);

    opacity: 1;

    transition:
        background-color 700ms cubic-bezier(.22, 1, .36, 1),
        opacity 700ms cubic-bezier(.22, 1, .36, 1);
}


/* =========================
   SVG
   ========================= */

.intro-svg-wrap {
    position: fixed;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    z-index: 2;

    transition:
        left 900ms cubic-bezier(.22, 1, .36, 1),
        top 900ms cubic-bezier(.22, 1, .36, 1),
        width 900ms cubic-bezier(.22, 1, .36, 1),
        transform 900ms cubic-bezier(.22, 1, .36, 1);
}

.intro-svg {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;
}


/* =========================
   TRANSITION VERS LA PHOTO
   ========================= */

#intro-logo.intro-handoff {
    background-color: transparent;
    pointer-events: none;
}


/* =========================
   LOGO FINAL DANS LA PHOTO
   ========================= */

.landing-picture {
    position: relative;
}

.landing-picture .intro-svg-wrap {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);

    z-index: 3;
}

.intro-svg-wrap,
.landing-picture .intro-svg-wrap {
    width: var(--intro-logo-width);
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    :root {
        --intro-logo-width: min(55vw, 300px);
    }

    .landing-picture .intro-svg-wrap {
        top: 50%;
    }

}


/* =========================
   ACCESSIBILITÉ
   ========================= */

@media (prefers-reduced-motion: reduce) {

    #intro-logo {
        display: none;
    }
}