body {
    overflow: hidden;

    --horizon: calc(50dvh - 18dvw);
    --grass-color: #187c4a;
    --mountain-color: #2b4481;
    --grass-shadow-color: color-mix(in srgb, #005 25%, var(--grass-color));
    --grass-offset: 3dvw;
    --mountain-offset: 7dvw;

    background: linear-gradient(180deg, #6bf 0%, #abf var(--horizon), var(--mountain-color) var(--horizon));
}

.mountain {
    content: "";
    position: fixed;
    height: 100dvh;
    background-size: 30dvw;
    background-repeat: repeat-x;
    image-rendering: pixelated;
    width: 100%;
    left: 0;
    z-index: -2;
    top: calc(var(--horizon) - var(--mountain-offset));

    /* at some point these are gonna have offsets so they don't repeat, but need to make better images */
    &.near {
        background-image: url("./mountains-near.png");
    }

    &.mid {
        background-image: url("./mountains-mid.png");
    }

    &.far {
        background-image: url("./mountains-far.png");
    }
}

/* this is the green background, it's actually a big circle so it has a slight curve */
.background::after {
    content: "";
    background: radial-gradient(ellipse at center, var(--grass-color) 70%, transparent 70%);
    position: fixed;
    left: 50%;
    top: calc(var(--horizon) + var(--grass-offset));
    transform: translateX(-50%);
    width: 500dvw;
    height: 200dvw;
    z-index: -1;
}

.title {
    position: absolute;
    top: 0;
    padding: 20px;
}

#field {
    width: 100%;
    height: 50dvw;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;

    #goobers {
        position: absolute;
        transform: translateY(15%);
        width: 70%;
        height: 50%;
    }
}

#fence-front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-image: url("./fence-front.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

#fence-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-image: url("./fence-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
    pointer-events: none;
}

.goober {
    position: absolute;
    top: 0;
    left: 0;
    height: 10dvw;
    width: 10dvw;
    --shadow-distance: 0.5dvw;
    --name: "Goober";
    transition: transform 5s linear;
    transition-duration: 0ms;
    cursor: pointer;

    &::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(-1 * var(--shadow-distance));
        transform: translateX(-50%);
        width: 70%;
        height: 2dvw;
        background: radial-gradient(ellipse at center, var(--grass-shadow-color) 99%, transparent 100%);
        border-radius: 50%;
        z-index: -1;
        pointer-events: none;
    }

    &::after {
        content: var(--name);
        position: absolute;
        left: 50%;
        bottom: calc(-1 * var(--shadow-distance) - 20px);
        transform: translateX(-50%);
        font-size: 24px;
        color: #fff;
        text-shadow: 0 0 2px #000;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
    }

    @media (hover: hover) {
        &:hover .goober-sprite {
            animation: wiggle-gentle 0.3s linear infinite;
        }

        &:hover::after {
            opacity: 1;
        }
    }

    &.squish .goober-sprite {
        animation: squish 0.2s linear infinite;
    }

    @media (pointer: coarse) {
        &::after {
            opacity: 1;
        }
    }

    .goober-sprite {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
    }

    .speech-bubble {
        position: absolute;
        bottom: 100%;
        left: 50%;
        display: inline-block;
        width: max-content;
        max-width: 15em;
        text-align: center;
        translate: -50% 0;
        background-color: #000a;
        color: #fff;
        padding: 5px 10px;
        border-radius: 24px;
        font-size: 24px;
        pointer-events: none;
        overflow-wrap: normal;
        opacity: 0;
        transition: opacity 0.3s linear;
        animation: shake-gentle 0.3s linear infinite;

        &.visible {
            opacity: 1;
        }
    }

    .heart {
        position: absolute;
        top: 0;
        left: 0;
        animation: fade 0.5s ease-out forwards;
        animation-delay: 0.5s;

        &::after {
            position: absolute;
            content: "";
            background-image: url("./heart.png");
            background-repeat: no-repeat;
            background-size: cover;
            width: 35px;
            height: 35px;
            animation: heartSpin 1s ease-out forwards;
        }
    }

    &.trotting .goober-sprite,
    &.bouncing .goober-sprite {
        animation: trot 0.1s infinite alternate ease-in-out;
    }
}

@keyframes trot {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10%);
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes heartSpin {
    0% {
        transform: rotate(var(--start-rotation));
    }

    100% {
        transform: rotate(calc(var(--start-rotation) + var(--spin-amount)));
    }
}

@keyframes shake-gentle {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(1px, 1px);
    }

    40% {
        transform: translate(-1px, 0);
    }

    60% {
        transform: translate(1px, -1px);
    }

    80% {
        transform: translate(-1px, 1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes wiggle-gentle {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    75% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes squish {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}