/* ======================== */
/*           hero           */
/* ======================== */

.hero, .footer {
    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;

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

    padding: 0 var(--p-x);
}

/* =========================== */
/*           uncover           */
/* =========================== */

.hero__bg {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;

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

    pointer-events: none;

    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.2);

    transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000);
    z-index: -10;
}

.hero__bg[data-fade-in] {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.3);
}

.hero__bg--desktop {
    display: none;
    width: 100%;
    height: 100%;
    max-width: 1750rem;
}

.hero__bg--mobile {
    display: block;
    width: 100%;
}

/* ======================== */
/*           text           */
/* ======================== */

.hero__text {
    position: relative;

    width: 100%;
    height: 100%;

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

    --anim-delay: 1.5s;
}

/* ============================ */
/*           animated           */
/* ============================ */

.hero__text__anim {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;

    visibility: visible;
    transform: translate3d(-50%, -50%, 0);
    
    transition: visibility 0.2s;
    transition-delay: var(--anim-delay);
}

.hero__text[data-active] .hero__text__anim {
    visibility: hidden;
}

.hero__text__sub {
    width: 100%;
    font-size: 36rem;
    line-height: 40rem;
    text-align: center;
    text-transform: lowercase;
    
    overflow: hidden;
}

.hero__text__sub span {
    display: inline-block;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.hero__text[data-active] .hero__text__sub span {
    transform: translate3d(0, 0, 0);
}

.hero__text__sub:nth-child(1) span {transition-delay: 0.15s;}
.hero__text__sub:nth-child(2) span {transition-delay: 0.30s;}
.hero__text__sub:nth-child(3) span {transition-delay: 0.45s;}

/* ========================== */
/*           normal           */
/* ========================== */

.hero__text__main {
    width: 100%;
    font-size: 36rem;
    line-height: 40rem;
    text-align: center;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;
    /* transition-delay: var(--anim-delay); */
}

.hero__text[data-active] .hero__text__main {
    opacity: 1;
    pointer-events: all;
}

/* =========================== */
/*           desktop           */
/* =========================== */

[data-hover-cyan], [data-hover-orange], [data-hover-purple] {
    transition: color 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

[data-hover-cyan]:hover {color: var(--theme-cyan);}
[data-hover-orange]:hover {color: var(--theme-orange);}
[data-hover-purple]:hover {color: var(--theme-purple);}

/* ========================= */
/*           Footer          */
/* ========================= */

.footer {
    position: relative;
}

.footer__text {
    transform: translateY(-40rem);
}

.footer__cover--mobile {
    transform: translate(-50%, calc(-50% - 40rem)) scale(1.2);
}

.footer__foot {    
    width: 100%;
    height: 100rem;
    padding: 0 var(--p-x);

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;

    transform: translateY(calc(-1 * var(--p-y)));

    gap: 40rem;
}

.footer__foot--left, .footer__foot--right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap: 20rem;
}

.footer__foot--left__item, .footer__foot--right__item {
    color: var(--theme-black);
    font-size: 16rem;
    line-height: 20rem;
}

/* =========================== */
/*           desktop           */
/* =========================== */

@media screen and (min-width: 768px) {
    /* ================= */
    /*      uncover      */
    /* ================= */

    .hero__bg {
        transform: translate3d(-50%, -50%, 0) scale(1);
        z-index: 10;
    }

    .hero__bg[fade-in] {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(1.1);
    }
    
    .hero__bg--desktop {
        display: block;
    }
    
    .hero__bg--mobile {
        display: none;
    }

    /* ================== */
    /*      animated      */
    /* ================== */
    
    .hero__text__anim {
        max-width: 1325rem;
    }

    .hero__text__sub { 
        font-size: 80rem;
        line-height: 80rem;
    }

    /* ================ */
    /*      normal      */
    /* ================ */

    .hero__text__main { 
        max-width: 1100rem;

        font-size: 80rem;
        line-height: 80rem;
    }
    
    /* ========================= */
    /*           Footer          */
    /* ========================= */
    .footer__foot {
        width: 100%;
        height: 200rem;
        padding: 0 var(--p-x);
    
        display: flex;
        flex-direction: row;
        align-items: end;
        justify-content: space-between;

        transform: translateY(calc(-1 * var(--p-y)));
    }

    .footer__foot--left, .footer__foot--right {
        gap: 30rem;
    }
    
    .footer__foot--left__item, .footer__foot--right__item {
        text-align: left;
        font-size: 28rem;
        line-height: 30rem;
    }
    
    .footer__foot--right__item {
        text-align: right;
    }
}