@font-face {
    font-family: Minecraft;
    src: url(assets/minecraft.ttf);
}
.adv-container {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

@property --head-opac {
    syntax: "<number>";
    initial-value: 1;
    inherits: true;
}
@property --foot-opac {
    syntax: "<number>";
    initial-value: 1;
    inherits: true;
}
/*
 0 *.6 fade in
 1.2 nothing
 0.3 fade out yellow text
 0.3 fade in white text
 3.2 nothing
 0.6 fade out

 total: 6.2
 */
@keyframes advance {
    0% {
        transform: translateX(100%);
    }
    9.677419% {
        transform: translateX(0%);
    }
    29.03225806451% {
        animation-timing-function: linear;
        --head-opac: 1;
        --foot-opac: 0;
    }
    33.870967741935483870967741935484% {
        --head-opac: 0;
        --foot-opac: 0;
    }
    38.70967741935483870% {
        --head-opac: 0;
        --foot-opac: 1;
    }
    90.3225806451% {
        animation-timing-function: cubic-bezier(.55,.09,.68,.53);
        transform: translateX(0%);
        --head-opac: 0;
        --foot-opac: 1;
    }
    100% {
        transform: translateX(100%);
        --head-opac: 0;
        --foot-opac: 1;
    }
}

.advancement {
    font-family: 'Minecraft', 'Press Start 2P', 'Courier New', monospace;

    /*
     * Gui Scale:
     * 4 = 32px
     * 3 = 24px
     * 2 = 16px
     * 1 = 8px
     */
    font-size: 24px;
    height: 4em;
    width: 20em;

    word-spacing: -0.104166667em;

    display: flex;
    gap: 0.25em;

    --head-opac: 1;
    --foot-opac: 0;
    transform: translateX(100%);
    animation: 6.2s forwards cubic-bezier(.55,.09,.68,.53); /* quadratic curve */
    pointer-events: initial;

    border: 0.5em solid white;
    border-image-source: url("assets/bg.png");
    border-image-slice: 33;
    border-image-repeat: round;
    border-image-width: 0.5em;
}
.advancement::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #212121;
    z-index: -1;
}

.adv-texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding-top: 0.291666667em;
    line-height: 1.125;
    .fat {
        position: relative;
    }
}
.adv-texts.fat div {
    position: absolute;
    &.thin {
        padding-top: 0.5em;
    }
}
.adv-texts.fat .adv-head {
    opacity: var(--head-opac);
}
.adv-texts.fat .adv-foot {
    opacity: var(--foot-opac);
}
.adv-head {
    color: #fcfc00;
}
.adv-foot {
    color: #ffffff;
}
.adv-img {
    image-rendering: pixelated;
    padding: 0.5em;
    width: 3em;
    height: 3em;
}