@font-face {
    font-family: BantonOrg;
    src: url('Bantonorg-Regular.ttf');
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    overflow: hidden;
}

/* LOGO */

.logo {
    display: flex;
    align-items: center;
    font-family: BantonOrg;
    font-size: 7vw;
    white-space: nowrap;
}

.cms {
    color: white;
    background: black;
    border-radius: 0.10em;
    padding: 0.05em 0.10em;
    line-height: 1;
    margin-right: 0.12em;
}

.o {
    position: relative;
    margin-left: 0.12em;
    margin-right: 0.20em;
}

.o-letter {
    visibility: hidden;
}

/* PROPELLER */

.prop {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4.3em;
    height: 4.3em;
    transform: translate(-50%, -50%);
}

.prop img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    left: 0;
    top: 0;
    z-index: 2;
}

.blades {
    transform: rotate(0deg);
}

.blades.crank-1,
.blades.crank-2 {
    animation: crank-fail 1.9s cubic-bezier(.25,.7,.2,1) both;
}

.blades.crank-3 {
    animation: crank-catch 2.4s cubic-bezier(.25,.7,.2,1) both;
}

.blades.running {
    animation: spin 2s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes crank-fail {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(270deg);
    }
    70% {
        transform: rotate(150deg);
    }
    100% {
        transform: rotate(210deg);
    }
}

@keyframes crank-catch {
    0% {
        transform: rotate(0deg);
    }
    46% {
        transform: rotate(270deg);
    }
    64% {
        transform: rotate(315deg);
    }
    100% {
        transform: rotate(540deg);
    }
}

/* SMOKE */

.smoke {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    z-index: 1;
    pointer-events: none;
}

.smoke span {
    position: absolute;
    width: 0.72em;
    height: 0.44em;
    opacity: 0;
    transform-origin: center;
    translate: -50% -50%;
    animation: smoke-roll 0.42s ease-out infinite;
    animation-play-state: paused;
}

.smoke span::before,
.smoke span::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(65, 65, 65, 0.42) 0%,
        rgba(90, 90, 90, 0.27) 38%,
        rgba(125, 125, 125, 0.10) 68%,
        rgba(150, 150, 150, 0) 100%
    );
    filter: blur(3px);
}

.smoke span::before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.smoke span::after {
    width: 78%;
    height: 88%;
    left: 11%;
    top: -18%;
    transform: rotate(18deg);
}

.smoke span:nth-child(1) { animation-delay: 0s; }
.smoke span:nth-child(2) { width: 0.88em; height: 0.52em; animation-delay: -0.06s; }
.smoke span:nth-child(3) { width: 0.64em; height: 0.40em; animation-delay: -0.12s; }
.smoke span:nth-child(4) { width: 0.94em; height: 0.54em; animation-delay: -0.18s; }
.smoke span:nth-child(5) { width: 0.76em; height: 0.46em; animation-delay: -0.24s; }
.smoke span:nth-child(6) { width: 1.00em; height: 0.58em; animation-delay: -0.30s; }
.smoke span:nth-child(7) { width: 0.70em; height: 0.42em; animation-delay: -0.36s; }

/* Alternate the exhaust left/right */
.smoke span:nth-child(odd) {
    --smoke-dir: -1;
}

.smoke span:nth-child(even) {
    --smoke-dir: 1;
}

@keyframes smoke-roll {
    0% {
        transform:
            translate(0, 0)
            rotate(0deg)
            scale(0.18, 0.14);
        opacity: 0.20;
    }

    4% {
        opacity: 0.66;
    }

    25% {
        transform:
            translate(calc(var(--smoke-dir) * 0.46em), 0.34em)
            rotate(calc(var(--smoke-dir) * -4deg))
            scale(1.00, 0.78);
        opacity: 0.50;
    }

    48% {
        transform:
            translate(calc(var(--smoke-dir) * 1.55em), 1.12em)
            rotate(calc(var(--smoke-dir) * 7deg))
            scale(1.75, 1.15);
        opacity: 0.34;
    }

    70% {
        transform:
            translate(calc(var(--smoke-dir) * 2.35em), 1.38em)
            rotate(calc(var(--smoke-dir) * -4deg))
            scale(2.55, 1.28);
        opacity: 0.17;
    }

    86% {
        transform:
            translate(calc(var(--smoke-dir) * 3.05em), 1.42em)
            rotate(calc(var(--smoke-dir) * 3deg))
            scale(3.20, 1.18);
        opacity: 0.07;
    }

    100% {
        transform:
            translate(calc(var(--smoke-dir) * 3.65em), 1.34em)
            rotate(calc(var(--smoke-dir) * -2deg))
            scale(3.75, 1.02);
        opacity: 0;
    }
}


.smoke.smoke-on span {
    animation-play-state: running;
}

.smoke.smoke-off span {
    animation-play-state: paused;
    opacity: 0 !important;
}

/* OFFLOADED FOOTER */

.site-credit {
    position: fixed;
    bottom: 8px;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #777;
    line-height: 1;
}

.site-credit a {
    color: inherit;
    text-decoration: none;
}

.site-credit a:hover {
    text-decoration: underline;
}