body:has(.transition-bg) {
    --question-number: "1";
    --_transition-time: 1.5s;
}

.transition-bg {
    content: "";
    background-image: url(/res/imgs/media/background.png);
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    opacity: 0.1;
}

.transition-header {
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: end;

    opacity: 0;
    visibility: hidden;
}

.transition-header.transition {
    animation: th calc(var(--_transition-time) / 2) ease-in-out forwards;
    animation-delay: var(--_transition-time);
}

@keyframes th {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

.transition-header>h3 {
    margin: 0;
    font-size: 2em;
    font-family: var(--light-font);
    color: var(--company-color4);
}

.transition-header>h3>span {
    font-family: var(--bold-font);
}

.transition-header>h3::before {
    content: var(--question-number);
}

.question-title {
    width: fit-content;
    margin: auto;
    font-size: 5em;
    padding: 10px 100px;
    /* background-color: var(--company-color2); */
    color: white;
    font-family: var(--bold-font);

    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%);
}

.question-title::before {
    content: "";
    background-color: var(--company-color2);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.question-title::after {
    content: var(--question-number);
}

.question-title.transition {
    animation: qtt var(--_transition-time) ease-in-out forwards;
}

@keyframes qtt {
    50% {
        color: var(--company-color4);
        font-size: 5em;
        padding-bottom: 0;
    }

    100% {
        font-size: 3em;
        color: var(--company-color4);
        padding-bottom: 10%;
    }
}

.question-title.transition::before {
    animation: qttbg var(--_transition-time) ease-in-out forwards;
}

@keyframes qttbg {
    0% {
        top: 0%;
    }

    50% {
        top: 90%;
        left: 0%;
        right: 0%;
    }

    100% {
        top: 90%;
        left: 90%;
        right: 90%;
    }
}

.question-wrapper {
    background: linear-gradient(90deg,
            var(--company-color1),
            var(--company-color2));
    position: absolute;
    bottom: 35%;
    left: 50%;
    transform: translate(-50%);

    padding: 75px 150px;
    font-size: 2em;
    text-wrap: nowrap;
    opacity: 0;
    visibility: hidden;
}

.question-wrapper::after {
    --_icon-size: 450px;
    content: "";
    background-image: url(/res/imgs/media/charc-brain-2.svg);
    background-repeat: no-repeat;
    width: var(--_icon-size);
    aspect-ratio: 1 / 1;

    position: absolute;
    bottom: calc(var(--_icon-size) / 1.5 * -1);
    /* left: calc(var(--_icon-size) / 2 * -1); */
    left: -100%;
}

.question-wrapper.transition {
    animation: qw calc(var(--_transition-time) / 2) ease-in-out forwards;
    animation-delay: var(--_transition-time);
}

.question-wrapper.transition::after {
    animation: qwbrain calc(var(--_transition-time) / 2) ease-in-out forwards;
    animation-delay: var(--_transition-time);
}

@keyframes qw {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes qwbrain {
    0% {
        left: -100%;
    }

    100% {
        left: calc(var(--_icon-size) / 2 * -1);
    }
}

#question {
    color: white;
    font-family: var(--bold-font);
}

.question-time {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translate(-50%);

    font-size: 3em;
    color: var(--company-color4);
    font-family: var(--light-font);

    opacity: 0;
    visibility: hidden;
}

.question-time::after {
    content: "5";
    color: var(--company-color2);
    font-family: var(--bold-font);
}

.question-time.transition::after {
    animation: qtimer 5s linear forwards;
    animation-delay: var(--_transition-time);
}

.question-time.transition {
    animation: qt calc(var(--_transition-time) / 2) ease-in-out forwards;
    animation-delay: var(--_transition-time);
}

@keyframes qt {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes qtimer {
    20% {
        content: "4";
    }

    40% {
        content: "3";
    }

    60% {
        content: "2";
    }

    80% {
        content: "1";
    }

    100% {
        content: "0";
    }
}

/* footer */

.transition-footer {
    height: 10%;
    max-height: 120px;
    padding: 1em;
    display: flex;
    justify-content: end;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.transition-footer::after {
    content: "";
    background-image: url(/res/imgs/icons/icon-gc.svg);
    background-repeat: no-repeat;
    height: 100%;
    aspect-ratio: 1 / 1;
}

@media (width<768px) {}

@media (width<1024px) {}

@media (width<1440px) {}