body {
    font-family: sans;
    font-size: 18px;
    max-width: 34em;
    margin: auto;
    padding: 0 .5em;
}

h1 {
    text-align-last: right;
}

.conference {
    color: green;
}

:root {
    --bird-size: 8em;
    --ground-gap: max(10px, env(safe-area-inset-bottom));
    --walk-duration: 18s;
    --bob-duration: 0.1s;
}

.vibe-wrap {
    display: block;
    position: fixed;
    left: 0;
    bottom: var(--ground-gap);
    width: var(--bird-size);
    height: auto;
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
    animation: vibe-walk var(--walk-duration) linear infinite;
}

.vibe {
    visibility: visible;
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 100%;
    will-change: transform;
    animation: vibe-bob var(--bob-duration) ease-in-out infinite alternate;
}

@keyframes vibe-walk {
    0% {
        transform: translateX(calc(-1 * var(--bird-size))) scaleX(-1);
    }
    49.999% {
        transform: translateX(calc(100vw)) scaleX(-1);
    }
    50% {
        transform: translateX(calc(100vw)) scaleX(1);
    }
    100% {
        transform: translateX(calc(-1 * var(--bird-size))) scaleX(1);
    }
}

@keyframes vibe-bob {
    from {
        transform: translateY(0.6em) rotate(-1deg);
    }
    to {
        transform: translateY(0.4em) rotate(1deg);
    }
}