/* This page is always rendered by the portfolio site at a fixed native
   1920x1080 (see .browser-frame in assets/css/styles.css), which then crops
   a 1440x810 window (x:248-1688, y:168-978) and scales it down to fit the
   visible preview box. So layout here uses fixed pixels tied to that known
   1920x1080 canvas rather than vh/vw — percentages of an assumed-responsive
   viewport don't match how the page actually gets viewed. Keep bike+buttons
   inside x:248-1688 / y:168-978, or update the crop in assets/css/styles.css
   (and OTTO_CROP_WIDTH in assets/js/main.js) to match. */

:root {
    --button-size: 160px;
}

* {
    box-sizing: border-box;
}

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

body {
    position: relative;
}

.fietser {
    position: absolute;
    left: 0;
    top: 188px;
    width: 100%;
    height: 560px;
    overflow: hidden;
}

/* The art (Otto+bike) only occupies a ~306x314px region centered around
   (959,539) on the fixed 1920x1080 canvas the gifs are drawn on — most of
   the frame is blank. Rather than scaling the whole mostly-empty canvas
   down to fit, the image is shown at native size and zoomed via transform
   so a padded box around that region (character + ~150px of clearance for
   the fall animations) fills the available stage height. If the artwork
   ever moves within the canvas, this crop needs remeasuring too. */
#biking-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    transform: translate(960px, 280px) scale(0.912) translate(-959px, -539px);
}

.buttons-container {
    position: absolute;
    left: 0;
    top: 778px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}

.btn {
    all: unset;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .2s ease;
}

.btn:hover {
    transform: scale(1.1) rotate(var(--tilt, 0deg));
}

.bier-button {
    --tilt: -9deg;
    background-image: url(../images/bierbutton.png);
}

.bier-button:hover {
    background-image: url(../images/bierbutton.gif);
}

.duif-button {
    --tilt: 9deg;
    background-image: url(../images/duifbutton.png);
}

.duif-button:hover {
    background-image: url(../images/duifbutton.gif);
}

.paard-button {
    --tilt: -9deg;
    background-image: url(../images/paardbutton.png);
}

.paard-button:hover {
    background-image: url(../images/paardbutton.gif);
}