/* =================================================
   AIVELLE INTRO SESSION VISIBILITY
   This block must remain at the top of intro.css.
================================================= */

/*
 * The small preflight in index.html adds this class before the browser paints.
 * Returning to the homepage in the same tab therefore never flashes or starts
 * the intro animation.
 */
html.aivelle-intro-seen .intro,
html.aivelle-intro-complete .intro {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* =================================================
   Full-screen AIVELLE intro
================================================= */

.intro {

    position:
        fixed;

    inset:
        0;

    width:
        100vw;

    height:
        100vh;

    z-index:
        2147483647;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        #000000;

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    isolation:
        isolate;

    transition:
        opacity .45s ease,
        visibility 0s linear .45s;

}


/* =================================================
   AIVELLE logo
================================================= */

.logo {

    position:
        relative;

    overflow:
        hidden;

    color:
        #222222;

    font-size:
        clamp(
            42px,
            7vw,
            90px
        );

    font-weight:
        400;

    letter-spacing:
        .4em;

    line-height:
        1;

    text-indent:
        .4em;

    white-space:
        nowrap;

    transform:
        scaleY(.55);

    transform-origin:
        center;

}


/*
 * Only the first visit in the current tab receives animation.
 * This prevents animation rules from starting during a returning-page paint.
 */
html.aivelle-intro-first .reveal2 {

    position:
        absolute;

    inset:
        0;

    overflow:
        visible;

    color:
        #ffffff;

    clip-path:
        inset(
            0 100% 0 0
        );

    animation:
        revealLogo
        4.6s
        cubic-bezier(
            .42,
            0,
            .2,
            1
        )
        .3s
        forwards;

}


html.aivelle-intro-first .reveal2::after {

    content:
        "";

    position:
        absolute;

    top:
        -120%;

    left:
        -20%;

    width:
        20%;

    height:
        340%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(
                255,
                255,
                255,
                .10
            ) 20%,
            rgba(
                255,
                255,
                255,
                .95
            ) 50%,
            rgba(
                255,
                255,
                255,
                .10
            ) 80%,
            transparent 100%
        );

    filter:
        blur(4px);

    transform:
        translateX(0)
        skewX(-22deg);

    opacity:
        .95;

    animation:
        sweepLight
        4.6s
        cubic-bezier(
            .42,
            0,
            .2,
            1
        )
        .3s
        forwards;

}


html.aivelle-intro-first .zoom {

    animation:
        zoomForward
        .8s
        ease
        5.3s
        forwards;

}


/* =================================================
   Animations
================================================= */

@keyframes revealLogo {

    0% {
        clip-path:
            inset(
                0 100% 0 0
            );
    }

    100% {
        clip-path:
            inset(
                0 0 0 0
            );
    }

}


@keyframes sweepLight {

    0% {
        transform:
            translateX(-40%)
            skewX(-22deg);
    }

    100% {
        transform:
            translateX(800%)
            skewX(-22deg);
    }

}


@keyframes zoomForward {

    0% {
        transform:
            scaleY(.55)
            scale(1);

        opacity:
            1;
    }

    100% {
        transform:
            scaleY(.55)
            scale(1.7);

        opacity:
            0;
    }

}


/* =================================================
   Mobile
================================================= */

@media (
    max-width: 600px
) {

    .logo {

        font-size:
            clamp(
                30px,
                10vw,
                50px
            );

        letter-spacing:
            .32em;

        text-indent:
            .32em;

    }

}


/* =================================================
   Reduced motion
================================================= */

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

    html.aivelle-intro-first .reveal2,
    html.aivelle-intro-first .reveal2::after,
    html.aivelle-intro-first .zoom {

        animation:
            none;

    }

    html.aivelle-intro-first .reveal2 {

        position:
            absolute;

        inset:
            0;

        color:
            #ffffff;

        clip-path:
            inset(
                0 0 0 0
            );

    }

    html.aivelle-intro-first .reveal2::after {

        display:
            none;

    }

}