@font-face {
    font-family: "Wet Paint";
    src: url("Assets/fonts/RubikWetPaint-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --color-suit: hsl(217, 54%, 25%);
    --color-suit-limbs: hsl(217, 61%, 32%);
    --color-skin: hsl(40, 82%, 53%);
    --color-mustache: hsl(40, 86%, 61%);
    --color-shirt: hsl(210, 36%, 40%);
    --color-tie: hsl(5, 41%, 37%);

    --color-water: hsl(207, 72%, 50%);
    --color-sand: hsl(40, 100%, 72%);

    --color-text: hsl(216, 91%, 35%);
    --color-duck: hsl(60, 100%, 50%);
    --color-beak: hsl(39, 100%, 50%);

    --color-plant: hsl(120, 100%, 25%);
    --color-plant-dark: hsl(120, 86%, 20%);
    --color-plant-light: hsl(120, 74%, 41%);
    --color-plant-brown: hsl(30, 100%, 25%);
    --color-plant-brown-dark: hsl(30, 86%, 20%);
    --color-plant-brown-light: hsl(30, 74%, 41%);

    --100vw: 100vw;

    /* Voor schermformaat berekenen en aanpassen heb ik eerst de code van Nils gebruikt op https://9elements.com/blog/speed-vs-duration-a-use-case-for-mixed-unit-division/
    Dit werkte, maar zorgde er wel voor dat het water level pas 100vh heeft op een scherm van 0px breedte. Dus eigenlijk nooit. Daarom wilde ik een min en max toevoegen.
    Daar heb ik AI om hulp bij gevraagd. Prompt:
    Yeah you are messing things up. Since with that new code it didnt work. Could you try to still use the old code with atan tan formula. There just seems to be a slight 
    error in some of the calculations. I believe the water level is max at 0px wide. But the screen will never get to that point. Plus the water level is already at 0vh 
    when the screen is 900px wide. While most screens are wider than that. Think you can fix that using the following code?

    /* viewport width as number */
    --px-width: tan(atan2(var(--100vw), 1px));

    /* Range */
    --min-width: 550;
    --max-width: 1900;
    --range: calc(var(--max-width) - var(--min-width));

    /* normalized width */
    --scaled-width: calc((var(--px-width) - var(--min-width)) / var(--range));

    /* convert to water height */
    --water-level: calc((1 - var(--scaled-width)) * 100vh);

    --arm-segment-width: 2em;
    --arm-segment-height: 6em;

    --arm-floppy-delay: 0.16s;
    --arm-floppiness: 8deg;
    --arm-animation-duration: 0.6s;

    --head-width: 8em;
    --head-height: 13em;
    --mouth-max-height: 0em;
    --eye-width: 3em;
    --eye-height: 4.5em;
    --stress-transition-duration: 0.2s;

    --torso-width: 10em;
    --torso-height: 15em;

    --left-arm-rotation: 5deg;
    --right-arm-rotation: -5deg;
}

body {
    width: 100vw;
    height: 100vh;
    background: var(--color-sand);
    overflow: hidden;
    position: relative;

    >div {
        margin: auto;
        animation: bodybob 5s ease-in-out infinite;
    }

    /* Water */
    &::after {
        content: "";
        background: var(--color-water);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 4;
        height: clamp(0px, var(--water-level), 100vh);
        opacity: 0.4;
        clip-path: shape(from 0% 5%,
                curve to 20% 5% with 10% 0%,
                curve to 40% 5% with 30% 10%,
                curve to 60% 5% with 50% 0%,
                curve to 80% 5% with 70% 10%,
                curve to 100% 5% with 90% 0%,
                line to 100% 100%,
                line to 0% 100%,
                line to 0% 5%);
    }
}

@keyframes bodybob {
    0% { transform: translateY(0);}
    50% { transform: translateY(20px);}
    100% { transform: translateY(0);}
}

ul {
    position: absolute;
    bottom: -60px;
    height: clamp(0px, var(--water-level), 100vh);
    width: 100%;

    overflow: hidden;  
    z-index: 4;

    li {
        position: absolute;
        bottom: 0;
        list-style: none;

        animation: bubble 12s linear infinite;

        width: 50px;
        aspect-ratio: 1;
        background: white;
        opacity:0.5;
        border-radius: 50%;
    }

    li:nth-child(1) { left: 5%; }
    li:nth-child(2) { left: 15%; }
    li:nth-child(3) { left: 25%; }
    li:nth-child(4) { left: 35%; }
    li:nth-child(5) { left: 45%; }
    li:nth-child(6) { left: 55%; }
    li:nth-child(7) { left: 65%; }
    li:nth-child(8) { left: 75%; }
    li:nth-child(9) { left: 85%; }
    li:nth-child(10) { left: 20%; }
    li:nth-child(11) { left: 50%; }
    li:nth-child(12) { left: 95%; }

    li:nth-child(odd) {animation-duration: 5s;}
    li:nth-child(2n) {animation-duration: 8s;}
    li:nth-child(3n) {animation-delay: 2s;}
    li:nth-child(4n) {animation-delay: 4s;}
}

@keyframes bubble {
    0% { transform: translate(0, 0); opacity: 1;}
    25% { transform: translate(-15px, calc(-0.25 * var(--water-level)));}
    50% { transform: translate(15px, calc(-0.5 * var(--water-level)));}
    75% { transform: translate(-10px, calc(-0.75 * var(--water-level)));}
    100% { transform: translate(10px, calc(-1 * var(--water-level))); opacity: 0;}
}


/* Title */
article {
    display: flex;
    position: absolute;
    bottom: calc(var(--water-level) - 40px);
    gap: 1em;
    font-family: "Wet Paint";
    font-size: 3em;
    color: var(--color-text);
    z-index: 7;
    margin-left: 1em;

    p {
        text-align: center;
        width: 1em;
        height: 1em;
        position: relative;
        animation: duckbob 2s ease-in-out infinite;
        padding-top: 10px;

        &:nth-of-type(2n) {
            animation-delay: 1s;
        }

        &:nth-of-type(3n) {
            animation-delay: 0.5s;
        }

        /* Badeend Lichaam */
        &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            scale: 2;
            background: hsl(var(--hue), 100%, 50%);
            /* animation: duckhue 5s linear infinite; */

            /* Bron voor clip-path vorm: https://www.shutterstock.com/shutterstock/photos/395200873/display_1500/stock-vector-rubber-duck-ducky-bath-toy-line-art-vector-icon-for-apps-and-websites-395200873.jpg */
            clip-path: shape(from 68% 0%,
                    curve to 46% 22% with 49% 5%,
                    curve to 49% 38% with 44% 30%,
                    curve to 36% 45% with 52% 41%,
                    curve to 5% 38% with 21% 48%,
                    curve to 22% 95% with 0% 60%,
                    curve to 78% 95% with 50% 100%,
                    curve to 87% 48% with 100% 70%,
                    curve to 87% 38% with 80% 43%,
                    curve to 90% 22% with 92% 30%,
                    curve to 68% 0% with 87% 5%);
        }

        /* Badeend Snavel */
        &::after {
            content: "";
            position: absolute;
            top: -10px;
            right: -49px;
            background: var(--color-beak);
            transform: scaleX(-1);
            z-index: 90;
            width: 100%;
            height: 50%;
            clip-path: shape(
                from 10% 30%,
                curve to 75% 0% with 50% 30%,
                curve to 90% 100% with 80% 33% / 100% 66%,
                curve to 10% 30% with 25% 90%);
        }
    }

    /* Badeend Ogen */
    p span:first-of-type {
        width: 6px;
        height: 8px;
        border-radius: 50%;
        background: black;
        z-index: 10;
        position: absolute;
        top: -8px;
        right: 0px;
    }

    /* Top hat */
    p:last-of-type span:last-of-type {
        width: 30px;
        height: 40px;
        background: black;
        position: absolute;
        top: -55px;
        transform: rotate(-30deg);
        /* Gegenereert met https://www.corner-shape.com/ */
        border-radius: 10% / 85%;
        corner-shape: notch notch square square;
    }
}

@keyframes duckbob {
    0% { transform: translateY(0) rotate(10deg);}
    50% { transform: translateY(-10px) rotate(-10deg);}
    100% { transform: translateY(0) rotate(10deg);}
}

@property --hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 60;
}

@keyframes duckhue {
  from { --hue: 0; }
  to { --hue: 360; }
}

/* Plant */
ol {
    --plant-width: 2em;
    --leaf-width: 6em;
    --leaf-height: 3em;
    position: absolute;
    left: 10%;
    bottom: 0;
    /* Gegenereerd op https://cssgradient.io/ */
    /* Hulp van Sanne bij het corret berekenen van de hoogte van de gradient */
    background: linear-gradient(180deg,var(--color-plant-brown) calc(-16% + 111% * var(--scaled-width)), var(--color-plant) calc(-6% + 111% * var(--scaled-width)));

    width: var(--plant-width);
    border-radius: 1em 1em 0 0;
    height: 90vh;

    li {
        list-style: none;
        width: var(--leaf-width);
        height: var(--leaf-height);
        background: var(--color-plant-light);
        transform: translateX(calc(var(--plant-width)));
        margin: 1em auto;
        transition: 0.2s;

        /* Voorbeeld voor vorm: https://thumbs.dreamstime.com/b/artboard-up-dreamstime-390810912.jpg?w=768 */
        clip-path: shape(
            from 0% 15%,
            curve to 100% 100% with 75% 0% / 85% 30%,
            curve to 0% 15% with 60% 85% / 25% 60%);

        

        &::after {
            content: "";
            position: absolute;
            background: var(--color-plant-dark);
            height: 100%;
            width: 100%;
            clip-path: shape(
                from 0% 0%,
                curve to 100% 100% with 40% 10% / 72% 40%,
                curve to 0% 8% with 70% 45% / 39% 17%,
                line to 0% 0%);
        }
    }

    /* De bladeren groen maken, ik hoorde van Sanne dat het ook met sibling-index kon, maar snapte die niet */
    li:nth-of-type(1){background: if(media(width > 720px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(2){background: if(media(width > 830px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(3){background: if(media(width > 940px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(4){background: if(media(width > 1020px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(5){background: if(media(width > 1110px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(6){background: if(media(width > 1210px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(7){background: if(media(width > 1310px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(8){background: if(media(width > 1410px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(9){background: if(media(width > 1510px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(10){background: if(media(width > 1610px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(11){background: if(media(width > 1710px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }
    li:nth-of-type(12){background: if(media(width > 1810px): var(--color-plant-brown-light); else: var(--color-plant-light));
        &::after {background: if(media(width > 720px): var(--color-plant-brown-dark); else: var(--color-plant-dark));}
    }

    /* Elk tweede blaadje spiegelen en positioneren */
    li:nth-of-type(2n) {
        scale: -1 1;
        translate: calc(var(--plant-width) - var(--leaf-width)) 0;
        
    }
}

/* Hoofd */
header {
    position: relative;

    >div:nth-of-type(1) {
        background: var(--color-skin);
        width: var(--head-width);
        height: var(--head-height);
        margin: auto;
        clip-path: shape(from 35% 5%,
                curve to 65% 5% with 50% 3%,
                curve to 90% 5% with 88% 0%,
                curve to 94% 50% with 100% 34%,
                line to 90% 60%,
                curve to 85% 85% with 90% 80%,
                line to 85% 100%,
                curve to 15% 100% with 50% 100%,
                line to 15% 85%,
                curve to 10% 60% with 10% 80%,
                line to 6% 50%,
                curve to 10% 5% with 0% 34%,
                curve to 35% 5% with 12% 0%);
        /* Gegenereerd met https://cssgenerator.org/box-shadow-css-generator.html */
        box-shadow: if(media(width > 800px): 0px 35px 139px 0px hsla(0, 80%, 51%, 0.99) inset;
                else: 0px 35px 139px 0px var(--color-skin) inset;
            );
        transition: var(--stress-transition-duration);
    }

    /* Mond */
    >div:nth-of-type(2) {
        background: #9f1414;
        height: 3em;
        /* Bron: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if */
        max-height: if(media(width > 800px): 3em;
                else: 0;
            );
        border-top: 7px solid white;
        border-bottom: 7px solid white;
        border-radius: 0 0 50% 50%;
        width: calc(var(--head-width) / 2);
        position: absolute;
        top: 68%;
        left: 50%;
        transform: translateX(-50%);
        transition: var(--stress-transition-duration);
    }

    /* Snor */
    >div:nth-of-type(3) {
        background: var(--color-mustache);
        width: calc(var(--head-width) * 1.8);
        height: calc(var(--head-height) / 3);
        position: absolute;
        top: 50%;
        left: 50%;
        clip-path: shape(from 40% 5%,
                hline to 60%,
                curve to 88% 10% with 80% 60%,
                curve to 93% 10% with 90% 0%,
                curve to 90% 90% with 100% 50%,
                curve to 60% 80% with 75% 100%,
                curve to 40% 80% with 50% 65%,
                curve to 10% 90% with 25% 100%,
                curve to 7% 10% with 0% 50%,
                curve to 12% 10% with 10% 0%,
                curve to 40% 5% with 20% 60%);
        animation: mustache-bounce 12s ease-in-out infinite;
        transition: 0.2s ease-in-out;
    }

    /* Beide ogen */
    >div:nth-of-type(4) {
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);
        width: calc(var(--head-width) + 1em);
        display: flex;
        justify-content: space-between;

        div {
            background: white;
            width: var(--eye-width);
            height: var(--eye-height);
            border-radius: 50%;
            scale: if(media(width > 800px): 1.2;
                    else: 1;
                );
            transition: var(--stress-transition-duration);
            animation: wink 5s infinite;
            transform-origin: center;

            

            /* Pupillen */
            &::before {
                content: "";
                background: black;
                position: absolute;
                border-radius: 50%;
                width: calc(var(--eye-width) / 2);
                height: calc(var(--eye-height) / 2);
            }

            /* Glans */
            &::after {
                content: "";
                background: white;
                position: absolute;
                border-radius: 50%;
                width: calc(var(--eye-width) / 4);
                height: calc(var(--eye-height) / 4);
            }
        }

        /* Linkeroog */
        div:first-of-type {
            
            /* Pupil */
            &::before {
                left: 30%;
                top: 25%;
            }

            /* Glans */
            &::after {
                left: 55%;
                top: 25%;
            }
        }

        /* Rechteroog */
        div:last-of-type {

            /* Pupil */
            &::before {
                right: 30%;
                top: 25%;
            }

            /* Glans */
            &::after {
                right: 30%;
                top: 25%;
            }
        }
    }
}

@keyframes wink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

@keyframes mustache-bounce {
    0%, 96%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    98% {
        transform: translateX(-50%) translateY(-12px);
    }
}

/* Torso */
main {
    margin: auto;
    background: var(--color-suit);
    width: var(--torso-width);
    height: var(--torso-height);
    border-radius: 1em 1em 0em 0em;
    display: grid;
    grid-template-columns: 1fr 1fr;

    /* Linker arm */
    section:first-of-type {
        >div {

            --arm-animation-duration: if(media(width > 1100px): 0.2s;
                else: 0.6s;
            );
            anchor-name: --left-shoulder-location;
            transform: rotate(var(--left-arm-rotation));
            animation: arm-wave var(--arm-animation-duration) ease-in-out infinite;
            transition: 0.2s ease-out;

            div {
                animation: arm-wave var(--arm-animation-duration) ease-in-out infinite;
            }

            >div {
                animation-delay: var(--arm-floppy-delay);   

                >div {
                    animation-delay: calc(var(--arm-floppy-delay) * 2);

                    >div {
                        animation-delay: calc(var(--arm-floppy-delay) * 3);

                        >div {
                            animation-delay: calc(var(--arm-floppy-delay) * 4);

                            >div {
                                animation-delay: calc(var(--arm-floppy-delay) * 5);
                            }
                        }
                    }
                }
            }
        }
    }

    /* Rechter arm */
    section:nth-of-type(2) {
        justify-self: end;

        >div {

            --arm-animation-duration: if(media(width > 1100px): 0.2s;
                else: 0.6s;
            );
            anchor-name: --right-shoulder-location;
            transform: rotate(var(--right-arm-rotation));
            animation: arm-wave var(--arm-animation-duration) ease-in-out infinite;
            transition: 0.2s ease-out;

            div {
                animation: arm-wave var(--arm-animation-duration) ease-in-out infinite;
            }

            >div {
                animation-delay: var(--arm-floppy-delay);   

                >div {
                    animation-delay: calc(var(--arm-floppy-delay) * 2);

                    >div {
                        animation-delay: calc(var(--arm-floppy-delay) * 3);

                        >div {
                            animation-delay: calc(var(--arm-floppy-delay) * 4);

                            >div {
                                animation-delay: calc(var(--arm-floppy-delay) * 5);
                            }
                        }
                    }
                }
            }
        }
    }

    /* Linker been */
    section:nth-of-type(3) {
        align-self: end;
    }

    /* Rechter been */
    section:nth-of-type(4) {
        justify-self: end;
        align-self: end;
    }
}

@keyframes arm-wave {
    0%   { rotate: calc(var(--arm-floppiness) * -1); }
    50%  { rotate: var(--arm-floppiness); }
    100% { rotate: calc(var(--arm-floppiness) * -1); }
}

/* Arms and legs */
section {
    position: relative;

    /* Alle segmenten */
    div {
        background: var(--color-suit-limbs);
        border-radius: 999em;
        transform-origin: calc(var(--arm-segment-width) / 2) calc(var(--arm-segment-width) / 2);
        width: var(--arm-segment-width);
        height: var(--arm-segment-height);
    }

    /* Eerste segment */
    >div {
        position: relative;

        /* Alle volgende segmenten */
        div {
            position: absolute;
            top: calc(100% - var(--arm-segment-width));
        }
    }

    /* Hand */
    div:not(:has(div)) {
        background: var(--color-skin);
        --arm-segment-height: 8em;
        --arm-segment-width: 2.5em;
        clip-path: shape(from 80% 10%,
                curve to 90% 65% with 100% 50%,
                curve to 90% 100% with 70% 80%,
                curve to 0% 55% with 15% 80%,
                curve to 20% 10% with 30% 30%,
                curve to 50% 0% with 30% 0%,
                curve to 80% 10% with 70% 0%);
    }
}

/* Alleen de armen */
main section {
    z-index: 1;
}

/* Shirt */
main>div:first-of-type {
    background: var(--color-shirt);
    width: calc(var(--torso-width) / 2);
    height: calc(var(--torso-height) / 2);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

main>div:nth-of-type(2) {
    background: var(--color-tie);
    width: calc(var(--torso-width) / 4);
    height: calc(var(--torso-height) / 2);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Hulp van https://bennettfeely.com/clippy/ voor genereren van clip-path */
    clip-path: polygon(0 0, 100% 0, 55% 20%, 100% 50%, 50% 100%, 0% 50%, 45% 20%);
}

/* Onderlichaam */
footer {
    background: var(--color-suit);
    width: var(--torso-width);
    height: calc(var(--torso-height) / 4);
    border-radius: 0em 0em 2em 2em;
    margin: auto;
    display: flex;
    justify-content: space-between;

    /* Alle benen */
    section {
        top: calc(var(--torso-height) / 3 - calc(var(--arm-segment-width) * 2));
        z-index: -1;
        --benen-animation-duration: if(media(width > 1400px): 0.2s;
                else: 4s;
            );

        div {
            animation: benen-zwaaien var(--benen-animation-duration) ease-in-out infinite alternate;
        }
    }

    section:nth-of-type(1) {
        --rotate-start: 15deg;
        --rotate-end: -5deg;

        div {
            animation-duration: calc(var(--benen-animation-duration) * 1.2);
        }
    }

    section:nth-of-type(3) {
        --rotate-start: -10deg;
        --rotate-end: 10deg;

        div {
            animation-duration: calc(var(--benen-animation-duration) * 1.4);
        }
    }

    section:nth-of-type(4) {
        --rotate-start: -15deg;
        --rotate-end: 5deg;

        div {
            animation-duration: calc(var(--benen-animation-duration) * 1.6);
        }
    }
}

@keyframes benen-zwaaien {
    from {rotate: var(--rotate-start, 10deg);}
    to {rotate: var(--rotate-end, -10deg);}
}

/* Bij rechterhelft de hand en voeten spiegelen in vorm */
:is(footer section:is(:nth-of-type(3), :nth-of-type(4)),
    main section:last-of-type) div:not(:has(div)) {
    transform: scaleX(-1);
}

/* Radio Buttons */
nav {
    position: absolute;
    inset: 0;

    form {
        margin-top: 10em;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: 100%;

        div {
            display: grid;
            grid-template: repeat(7, 1fr) / repeat(6, 1fr);
            width: 50vw;

            input {
                opacity: 0;
                z-index: 11;
            }
        }

        /* Linker helft */
        div:first-of-type input:checked {
            anchor-name: --left-hand-location;
        }

        /* Rechter helft */
        div:last-of-type input:checked {
            anchor-name: --right-hand-location;
        }
    }
}

    /* Bronnen:
    https://codepen.io/shooft/pres/QwWJbEX?editors=1100
    https://frontendmasters.com/blog/how-to-get-the-width-height-of-any-element-in-only-css/
    https://codepen.io/Melvin-Vermast/pen/wBzGgEV?editors=1100 
    https://codepen.io/shooft/pres/QwWzzXB?editors=1100 */

/* Armen */
@property --_x-left {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --_y-left {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --w-left {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

@property --h-left {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

@property --_x-right {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --_y-right {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --w-right {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

@property --h-right {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

html {
    --w-left: calc(1/(max(0.001, 1 - var(--_x-left))));
    --h-left: calc(1/(max(0.001, 1 - var(--_y-left))));
    --l-left: hypot(var(--w-left), var(--h-left));

    --w-right: calc(1/(1 - var(--_x-right)));
    --h-right: calc(1/(1 - var(--_y-right)));
    --l-right: hypot(var(--w-right), var(--h-right)); 

    timeline-scope: --cx-left, --cy-left, --cx-right, --cy-right;
    animation: 
        x-left linear, 
        y-left linear, 
        x-right linear, 
        y-right linear;
    animation-timeline: --cx-left, --cy-left, --cx-right, --cy-right;
    animation-range: entry 100% exit 100%;
}

body {
    aside {
        --from: attr(from type(<custom-ident>));
        --to: attr(to type(<custom-ident>));
        position: fixed;

        /* z-index: 50;
         background: blue;
        opacity: 0.5; */

        inset: min(anchor(var(--from) center), anchor(var(--to) center));
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            width: 1px;
            aspect-ratio: 1;
        }
    }

    aside:first-of-type::before {
        view-timeline: --cx-left inline, --cy-left block; 
    }

    aside:last-of-type::before {
        view-timeline: --cx-right inline, --cy-right block;
    }
}

/* Draaien van de armen */
/* Linkerarm */
body:has(nav div:first-of-type input:checked) {
    --left-arm-rotation: atan(var(--w-left) / var(--h-left));
}

/* Rechterarm  */
body:has(nav div:last-of-type input:checked) {
    --right-arm-rotation: calc(atan(var(--w-right) / var(--h-right)) * -1);
}

@keyframes x-left {to {--_x-left: 0.999}}
@keyframes y-left {to {--_y-left: 0.999}}
@keyframes x-right {to {--_x-right: 0.999}}
@keyframes y-right {to {--_y-right: 0.999}}