:root {

    --multiplier: 1;

    --text-scale-ratio: 1.2;
    --text-size: var(--base-font-size);
    --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));
    --vspace-btn: var(--vspace-2) calc(2 * calc(3.2rem * 1));

}

/* ===================================================================
 * # INTRO
 *
 *
 * ------------------------------------------------------------------- */
.s-intro {
    background-color: var(--color-body);
    width: 100%;
    height: 100vh;
    min-height: calc(25.5 * var(--space));

}

.s-intro a {
    border: none;
}

.theme-particles .s-intro {
    background-color: var(--color-gray-15);
}

.theme-particles .s-intro .s-intro__content {
    pointer-events: none;
}

.theme-particles .s-intro .s-intro__content-bottom,
.theme-particles .s-intro .s-intro__scroll {
    pointer-events: auto;
}


/* -------------------------------------------------------------------
 * ## intro particles
 * ------------------------------------------------------------------- */
.s-intro__particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 0;
    margin: 0;
    opacity: .20;
}

.s-intro__particles canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------
 * ## intro content
 * -------------------------------------------------------------------- */
.s-intro__content {
    z-index: 1;
    max-width: var(--width-wider);
    align-items: flex-end;
    height: 100vh;
    min-height: calc(25.5 * var(--space));
    padding-top: 20vh;
    padding-bottom: 8.8rem;
    position: relative;
}

.s-intro__content-bottom {
    max-width: 600px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--vspace-1);
}

.s-intro__content-title {
    font-size: 40px;
    font-weight: 400;
    line-height: var(--vspace-1_5);
    color: white;
    margin-top: 0;
    margin-bottom: var(--vspace-0_25);
}

/* --------------------------------------------------------------------
 * ## intro counter
 * -------------------------------------------------------------------- */
.s-intro .counter {
    display: flex;
    flex-flow: row wrap;
}

.s-intro .counter__time {
    display: flex;
    align-items: flex-start;
    font-weight: 700;
    font-size: 7rem;
    line-height: 1;
    color: white;
    margin-right: var(--vspace-0_5);
    margin-bottom: var(--vspace-0_5);
}

.s-intro .counter__time span:first-child {
    letter-spacing: -.03em;
}

.s-intro .counter__time span:last-child {
    font-weight: 400;
    font-size: .15em;
    color: rgba(255, 255, 255, 0.35);
    transform: translate(0.2em, 0.8em);
}

/* --------------------------------------------------------------------
 * ## scroll icon
 * -------------------------------------------------------------------- */
.s-intro__scroll {
    width: 18rem;
    height: 8.8rem;
    padding-right: 3rem;
    border-right: 1px dashed rgba(255, 255, 255, 0.3);
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 2%;
}


.s-intro__scroll .end-top {
    background-color: white;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    right: -4px;
}

.s-intro__scroll .mouse {
    z-index: 2;
    height: 3.8rem;
    width: 2.5rem;
    border: 3px solid white;
    border-radius: 12px;
    display: block;
    text-align: center;
    position: absolute;
    right: -1.3rem;
    top: 1.4rem;
    -webkit-animation: vertical 3s ease infinite;
    animation: vertical 3s ease infinite;
}

.s-intro__scroll .mouse::before {
    content: "";
    display: block;
    height: 5px;
    width: 3px;
    background-color: white;
    border-radius: 2px;
    margin-left: -1.5px;
    position: absolute;
    top: 6px;
    left: 50%;
}

/* fade in 
 */
@-webkit-keyframes vertical {

    0%,
    60%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    40% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

@keyframes vertical {

    0%,
    60%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

    40% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

#navScroll {
    width: 100vw;
}

@media (max-width: 768px) {
    .s-intro__scroll {
        display: none;
    }

    .s-intro__content {
        padding-top: 10vh;
    }

}