/* Het sterretje betekent alles */
* {
    box-sizing: border-box;
    transform-style: preserve-3d;
}

/* MARK - BRON: 
            mdn - antwoord of ik html nodig heb voor een background image - van https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images#:~:text=You%20should%20use%20CSS%20background,t%20waste%20time%20reading%20it.
            w3schools - background image - van https://www.w3schools.com/html/html_images_background.asp
            Sanne heeft me geholpen wat ik moet doen om de achtergronden over te laten lopen */
body {
    background-image: url("./media/media/silly_walk/background.png"), url("./media/media/silly_walk/background2.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-position 0.7s;

    min-height:100dvh;
    margin:0;

    display:grid;
    justify-items: center;
    container-type: style;
}


/*MARK: header had geen layout, waardoor deze niet mooi meebeweegt als het scherm smaller wordt
        hiermee blijven ze netjes naast elkaar en wrappen ze op mobiel */
header div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: center;
}


/* Titel */
h1 {
    position: fixed;
    text-align: center;
    top:1em;
    font-family: cursive, sans-serif;
    font-weight:800;
    font-size: xx-large;
}

h1 span {
    animation: colors 2s infinite;
}

h1 span:nth-of-type(1) {animation-delay: -0s;}
h1 span:nth-of-type(2) {animation-delay: -.2s;}
h1 span:nth-of-type(3) {animation-delay: -.4s;}
h1 span:nth-of-type(4) {animation-delay: -.6s;}
h1 span:nth-of-type(5) {animation-delay: -.8s;}
h1 span:nth-of-type(6) {animation-delay: -1s;}
h1 span:nth-of-type(7) {animation-delay: -1.2s;}
h1 span:nth-of-type(8) {animation-delay: -1.4s;}
h1 span:nth-of-type(9) {animation-delay: -1.6s;}
h1 span:nth-of-type(10) {animation-delay: -1.8s;}
h1 span:nth-of-type(11) {animation-delay: -2s;}
h1 span:nth-of-type(12) {animation-delay: -2.2s;}

@keyframes colors {
    0% {color: blueviolet;}
    25% {color: purple;}
    50% {color: yellow;}
    75% {color: orange;}
    100% {color: hotpink;}
}


/* Achtergrond veranderen met checkbox */
html:has(input[value="different"]:checked) {
    --different:true;
}

/*MARK: BRON workshop container query van Sanne - https://codepen.io/Eva0412/pen/JoREYQX */
@container style(--different:true) {
	body {
		--background-color: rgb(9, 83, 9);
		--accent: rgb(9, 83, 9);
        background-color: rgb(9, 83, 9);
        background-position: 
        center 100vh, 
        center center;
	}
}


/* Verschijnende voet */
.foot-img {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: -800px;
    /*MARK: BRON: clamp gebruikt voor de responsiveness. Ik heb hier chatgpt om hulp gevraagd
                  de bestaande pixels blijven achter staan. Ervoor komen andere waarde pixels en vw
                  hierdoor schaalt de hele voet automatisch mee met het scherm */
    width: clamp(200px, 80vw, 800px);
    /*MARK: met auto wordt de verhouding netjes gehouden */
    height: auto;
}

/*MARK: BRON: ease geleerd van Nils */
body:has(input[value="different"]:checked) .foot-img {
    animation: dropFoot 0.7s ease-out forwards;
}

body:has(input[value="different"]:checked) > div {
    display: none;
}

/*MARK: BRON:
            translateX() van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/translateX#:~:text=The%20translateX()%20CSS%20function,transform%2Dfunction%3E%20data%20type.
            translateY() van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/translateY
            scaleX() van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/scaleX
            scaleY() van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/translateX#:~:text=The%20translateX()%20CSS%20function,transform%2Dfunction%3E%20data%20type.*/
@keyframes dropFoot {
    0% {
        top: -800px;
        transform: translateX(-50%) scaleY(1);
    }
    100% {
        top: 15vh;
        transform: translateX(-50%) scaleY(1);
    }
}


/* Het lichaam */
/* MARK: BRON: Sanne heeft me uitgelegd over custom properties en geholpen met de eerste twee stukjes, zodat ik de rest zelf verder kon. */
body > div {
    /*MARK: BRON: clamp gebruikt voor de responsiveness. Ik heb hier chatgpt om hulp gevraagd */
    --width-lijf: clamp(180px, 60vw, 300px);
    --height-lijf: clamp(60px, 20vw, 100px);
    /*MARK: de bestaande pixels blijven achter staan. Ervoor komen andere waarde pixels en vw
            hierdoor schaalt het hele poppetje automatisch mee met het scherm */
    --width-been: clamp(40px, 15vw, 80px);
    --height-been: clamp(80px, 30vw, 150px);

    width: var(--width-lijf);
    height: var(--height-lijf);
    background-color: black;
    border-radius: calc(var(--width-lijf) * .5);

    position: relative;

/*MARK: BRON: position - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position
              calc - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc */

    /* benen */
    & > div:nth-of-type(1) {
        width: var(--width-been);
        height: var(--height-been);
        background-color: purple;
        border-radius: calc(var(--width-been) * .5);

        position: absolute;
        top:  calc( var(--height-lijf) * .5 - var(--width-been) * .5);
        left: calc( var(--height-lijf) * .5 - var(--width-been) * .5);

        transform-origin: calc(var(--width-been) * .5) calc(var(--width-been) * .5);

        rotate: 0deg;
        translate: 0 0 .1em;

        & > div {
            width: var(--width-been);
            height: var(--height-been);
            background-color: red;
            border-radius: calc(var(--width-been) * .5);

            position: absolute;
            top: calc( var(--height-been) - var(--width-been) * .5);
            left: calc(50% - var(--width-been) * .5);
            transform-origin: calc(var(--width-been) * .5) calc(var(--width-been) * .5) ;
            rotate: -15deg;
        }
    }

    & > div:nth-of-type(2) {
        width: var(--width-been);
        height: var(--height-been);
        background-color:blueviolet;
        border-radius: calc(var(--width-been) * .5);

        position: absolute;
        top:  calc( var(--height-lijf) * .5 - var(--width-been) * .5);
        left: calc( var(--height-lijf) * .5 - var(--width-been) * .5);
        transform-origin: calc(var(--width-been) * .5) calc(var(--width-been) * .5);

        rotate: 0deg;
        translate: 0 0 -.1em;

        & > div {
            width: var(--width-been);
            height: var(--height-been);
            background-color: hotpink;
            border-radius: calc(var(--width-been) * .5);

            position: absolute;
            top: calc( var(--height-been) - var(--width-been) * .5);
            left: calc(50% - var(--width-been) * .5);
            transform-origin: calc(var(--width-been) * .5) calc(var(--width-been) * .5) ;
            rotate: -15deg;
        }
    }

    & > div:nth-of-type(3) {
        width: var(--width-been);
        height: var(--height-been);
        background-color: yellow;
        border-radius: calc(var(--width-been) * .5);

        position: absolute;
        top:  calc( var(--height-lijf) * .5 - var(--width-been) * .5);
        right: calc( var(--height-lijf) * .5 - var(--width-been) * .5);
        transform-origin: calc(var(--width-been) * .5) calc(var(--width-been) * .5);

        rotate: 0deg;
        z-index: 20;

        & > div {
            width: var(--width-been);
            height: var(--height-been);
            background-color: darkgreen;
            border-radius: calc(var(--width-been) * .5);

            position: absolute;
            top: calc( var(--height-been) - var(--width-been) * .5);
            left: calc(50% - var(--width-been) * .5);
            transform-origin: calc(var(--width-been) * .5) calc(var(--width-been) * .5) ;
            rotate: -15deg;
        }
    }
    
    & > div:nth-of-type(4) {
        width: var(--width-been);
        height: var(--height-been);
        background-color: orange;
        border-radius: calc(var(--width-been) * .5);

        position: absolute;
        top:  calc( var(--height-lijf) * .5 - var(--width-been) * .5);
        right: calc( var(--height-lijf) * .5 - var(--width-been) * .5);
        transform-origin: calc(var(--width-been) * .5) calc(var(--width-been) * .5);

        rotate: 0deg;
        translate: 0 0 -.1em;

        & > div {
            width: var(--width-been);
            height: var(--height-been);
            background-color: darkblue;
            border-radius: calc(var(--width-been) * .5);

            position: absolute;
            top: calc( var(--height-been) - var(--width-been) * .5);
            left: calc(50% - var(--width-been) * .5);
            transform-origin: calc(var(--width-been) * .5) calc(var(--width-been) * .5) ;
            rotate: -15deg;
        }
    }
}


/* Hoofd */
body > div::after {
    content: "";
    position: absolute;

    /*MARK: om ervoor te zorgen dat het hoofd ook mee verkleint
            ik gebruik de --height-lijf */
    width: calc(var(--height-lijf) * 1.7); /* was eerst 170px */
    height: calc(var(--height-lijf) * 1.2);
    background: peachpuff;

    border-radius: 50%;

    right: calc(var(--height-lijf) * -0.7);
    top: calc(var(--height-lijf) * -1.15);

/*MARK: BRON: tip van Kelly om z-index te gebruiken */
    z-index: 10;
}


/* Animatie checkbox walk */
/*MARK: BRON: 
            chatgpt voor hulp bij de animatie (ease-in-out) van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc
            mdn - animation-timing-function van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timing-function */
body:has(input[value="walk"]:checked) > div > div:nth-of-type(1) {
    animation: walk1 1s ease-in-out infinite;
}

body:has(input[value="walk"]:checked) > div > div:nth-of-type(2) {
    animation: walk2 1s ease-in-out infinite;
}

body:has(input[value="walk"]:checked) > div > div:nth-of-type(3) {
    animation: walk2 1s ease-in-out infinite;
}

body:has(input[value="walk"]:checked) > div > div:nth-of-type(4) {
    animation: walk1 1s ease-in-out infinite;
}

@keyframes walk1 {
    0%, 100% { rotate: -20deg; }
    50% { rotate: 20deg; }
}

@keyframes walk2 {
    0%, 100% { rotate: 20deg; }
    50% { rotate: -20deg; }
}


/* Animatie checkbox run */
/*MARK: BRON: 
            chatgpt voor hulp bij de animatie (ease-in-out) van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc
            mdn - animation-timing-function van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timing-function */
body:has(input[value="run"]:checked) > div > div:nth-of-type(1) {
    animation: run1 0.5s ease-in-out infinite;
}
body:has(input[value="run"]:checked) > div > div:nth-of-type(2) {
    animation: run2 0.5s ease-in-out infinite;
}

body:has(input[value="run"]:checked) > div > div:nth-of-type(3) {
    animation: run3 0.5s ease-in-out infinite;
}
body:has(input[value="run"]:checked) > div > div:nth-of-type(4) {
    animation: run4 0.4s ease-in-out infinite;
}

@keyframes run1 {
    0% { rotate: -60deg; }
    50% { rotate: 60deg; }
    100% { rotate: -60deg; }
}

@keyframes run2 {
    0% { rotate: -50deg; }
    50% { rotate: 50deg; }
    100% { rotate: -50deg; }
}

@keyframes run3 {
    0% { rotate: 60deg; }
    50% { rotate: -60deg; }
    100% { rotate: 60deg;}
}

@keyframes run4 {
    0% { rotate: -50deg; }
    50% { rotate: 50deg; }
    100% { rotate: -50deg; }
}


/* Animatie checkox silly */
/*MARK: BRON: 
            chatgpt voor hulp bij de animatie (ease-in-out) van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc
            mdn - animation-timing-function van https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timing-function */
body:has(input[value="silly"]:checked) > div > div:nth-of-type(1) {
    animation: silly1 0.7s ease-in-out infinite;
}
body:has(input[value="silly"]:checked) > div > div:nth-of-type(2) {
    animation: silly2 0.7s ease-in-out infinite, spin1 2s linear infinite;
}
body:has(input[value="silly"]:checked) > div > div:nth-of-type(3) {
    animation: silly3 0.7s ease-in-out infinite, spin2 2s linear infinite;
}
body:has(input[value="silly"]:checked) > div > div:nth-of-type(4) {
    animation: silly4 0.7s ease-in-out infinite;
}

@keyframes silly1 {
    0%, 100% { rotate: -45deg; translateX(0); }
    25% { rotate: 45deg; translateX(10px); }
    50% { rotate: -60deg; translateX(-10px); }
    75% { rotate: 60deg; translateX(5); }
}

@keyframes spin1 {
    0% { rotate: 0deg; }
    25% { rotate: 180deg; }
    50% { rotate: 360deg; }
    75% { rotate: 180deg; }
    100% { rotate: 360deg; }
}

@keyframes silly2 {
    0%, 100% { rotate: 60deg; translateX(0); }
    25% { rotate: -45deg; translateX(-5px); }
    50% { rotate: 45deg; translateX(10px); }
    75% { rotate: -60deg; translateX(-10px); }
}

@keyframes silly3 {
    0%, 100% { rotate: -30deg; translateX(0); }
    25% { rotate: 30deg; translateX(10px); }
    50% { rotate: -45deg; translateX(-10px); }
    75% { rotate: 45deg; translateX(5px); }
}

@keyframes spin2 {
    0% { rotate: 0deg; }
    25% { rotate: 360deg; }
    50% { rotate: 180deg; }
    75% { rotate: 360deg; }
    100% { rotate: 0deg; }
}

@keyframes silly4 {
    0%, 100% { rotate: 30deg; translateX(0); }
    25% { rotate: -30deg; translateX(-5px); }
    50% { rotate: 60deg; translateX(10px); }
    75% { rotate: -60deg; translateX(-10px); }
}