@import url('https://fonts.googleapis.com/css2?family=Micro+5&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Micro+5&family=Roboto&display=swap');

:root {
    --color-red: #B90000; 
    --color-orange: #FF5900;
    --color-white: #ffffff; 
    --color-yellow: #FFD500; 
    --color-blue: #0045AD; 
    --color-green: #009B48; 
    --primary: #000; 
}

body {
    display: flex; 
    justify-content: center;
    align-items: center; 
    height: 100vh;  
    width: 100vw; 
    margin: 0; 
}

/* title animation */ 
body h1 {
    font-family: 'Micro 5';
    font-size: clamp(4em, 20vw, 8em);
    margin: 0; 
    color: var(--primary); 
    display: flex; 
    gap: 0.2em;

    span {
        transform-origin: center;

        &:nth-of-type(1) {
            animation: rotate1 30s infinite;
        }

        &:nth-of-type(2) { 
            animation: rotate2 30s infinite;
        }

        &:nth-of-type(3) {
            animation: rotate3 30s infinite; 
        }

        &:nth-of-type(4) { 
            animation: rotate4 30s infinite;
        }

        &:nth-of-type(5) { 
            animation: rotate5 30s infinite;
        }
    }
}

body form {
    position: absolute; 
    top: 3em; 
    display: flex; 
    flex-direction: column; 
    gap: 0.5em;

    div {
        display: flex; 
        flex-direction: row; 
        gap: 0.5em;
    }
}

body form div label {
    font-family: 'roboto';
    border: 1px var(--primary) solid;  
    padding: 0.5em 1em; 
    color: var(--primary); 

    input {
        display: none;
    }
}

body > div {
    position: relative; 
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(25deg);
    container-type: style;
    --theme: base;
}

/* spin  */ 
body form:has(label:nth-of-type(3) input:checked) + div {
    animation: spin 10s infinite linear; 
}

@keyframes spin {
    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

/* styles */ 
body:has(label:nth-of-type(2) > input:checked) {
    background-color: black; 
    --primary: #fff; 

    form h1 span {
        color: transparent; 
        -webkit-text-stroke: 1px var(--primary);
    }
}

body form:has(label:nth-of-type(1) > input:checked) + div   {
    --theme: base;
}

body form:has(label:nth-of-type(2) > input:checked) + div  {
    --theme: hyper;
}

@property --position {
    syntax: "<length>";
    initial-value: 0px;
    inherits: false;
}

@container style(--theme: base) {
}

@container style(--theme: hyper) {
    body > div > div > div:nth-child(n) {
        background-color: transparent; 
    }

    body > div > div > div::before {
        content: ""; 
        display: block; 
        width: 0cqw;
        height: 0cqh;
        border: 5px red solid;
        position: absolute;
        --position: -45px; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%) translateZ(var(--position)); 
        animation: hyper 5s infinite linear; 
    }

    body > div > div > div:is(:nth-of-type(2), :nth-of-type(4), :nth-of-type(6))::before {
        --position: 45px; 
    }
}

@keyframes hyper {
    to {
        --position: 0px; 
        width: 100cqw; 
        height: 100cqh; 
    }
}

/* placing / offset cube 1 to 8 from center */ 
body > div > div {
    --height: 100px; 
    --width: 100px; 
    --depth: 100px; 
    --position: calc(100px + 10px);  
    --translate: translate(-50%, -50%);
    --rotateDeg: 0deg; 
    height: var(--height);
    width: var(--width);
    position: absolute; 
    transform-style: preserve-3d;
    transform-origin: center center; 

    &:nth-of-type(1) {
        --offset-x: -0.5;
        --offset-y: -0.5;
        --offset-z: 0.5; 
        animation: c1 15s infinite; 
        opacity: 1  ;
    }

    &:nth-of-type(2) {
        --offset-x: 0.5;
        --offset-y: -0.5;
        --offset-z: 0.5; 
        animation: c2 15s infinite; 
        opacity: 1  ;
    }

    &:nth-of-type(3) {
        --offset-x: 0.5;
        --offset-y: -0.5;
        --offset-z: -0.5; 
        animation: c3 15s infinite; 
        opacity: 1;
    }

    &:nth-of-type(4) {
        --offset-x: -0.5;
        --offset-y: -0.5; 
        --offset-z: -0.5; 
        animation: c4 15s infinite; 
        opacity: 1  ;
    }

    &:nth-of-type(5) {
        --offset-x: -0.5;
        --offset-y: 0.5; 
        --offset-z: 0.5; 
        animation: c5 15s infinite;
        opacity: 1  ;
    }

    &:nth-of-type(6) {
        --offset-x: 0.5;
        --offset-y: 0.5; 
        --offset-z: 0.5; 
        animation: c6 15s infinite; 
        opacity: 1  ;
    }

    &:nth-of-type(7) {
        --offset-x: 0.5;
        --offset-y: 0.5; 
        --offset-z: -0.5; 
        animation: c7 15s infinite;
        opacity: 1  ;
    }

    &:nth-of-type(8) {
        --offset-x: -0.5;
        --offset-y: 0.5; 
        --offset-z: -0.5; 
        animation: c8 15s infinite; 
        opacity: 1  ;
    }
}

/* parent div individual cubes */ 
div > div > div {
    position: absolute; 
    container-type: size; 
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

/* individual cubes placement */ 
div > div > div:nth-of-type(1), div > div > div:nth-of-type(2) {
    --place: 0.5;
    height: var(--height); 
    width: var(--width); 
    transform: translate3d(0, 0, calc(var(--depth) * var(--place)));
    background-color: var(--color-red); 
}

div > div > div:nth-of-type(2) {
    --place: -0.5;
    background-color: var(--color-orange); 
}

div > div > div:nth-of-type(3), div > div > div:nth-of-type(4) {
    --orientation: 0.5; 
    height: var(--height); 
    width: var(--depth); 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * var(--orientation)));
    background-color: var(--color-blue); 
}

div > div > div:nth-of-type(4) {
    --orientation: -0.5; 
    background-color: var(--color-green); 
}

div > div > div:nth-of-type(5), div > div > div:nth-of-type(6) {
    --ja: 0.5;
    height: var(--depth); 
    width: var(--width); 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--height) * var(--ja)));
    background-color: var(--color-white); 
}

div > div > div:nth-of-type(6) {
    --ja: -0.5;
    background-color: var(--color-yellow); 
}

/* Bronnen */ 
/* https://css-tricks.com/almanac/rules/k/keyframes/ */ 
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property */
/* https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/ */
/* https://codepen.io/h20x/pen/YQYrOa */
/* https://stackoverflow.com/questions/4359627/stopping-a-css3-animation-on-last-frame */
/* https://robertcelt95.medium.com/responsive-typography-that-actually-works-beyond-font-size-clamp-acf592b79774 */