:root { 
    --color-1:      hsla(263, 57%,  55%, 1);
    --color-2:      hsla( 44, 86%,  54%, 1);
    --color-3:      hsla( 14, 82%,  57%, 1);
    --grey-light:   hsla(  0,  0%,  92%, 1);
    --grey-dark:    hsla(  0,  0%,  83%, 1);
    --ground:       hsla(  0,  0%,  97%, 1);
    --sky:          hsla(  0,  0%, 100%, 1);
    color: rgb(85, 255, 0);
    color: hsla(55, 44%, 32.08%);
    /* --sky:          hsla(  0,  0%,  97%, 1); */

    /* --grey-light: rgba(0, 0, 0, 0.08); */
    /* --grey-dark: rgba(0, 0, 0, 0.17); */
    
    font-family: 'Heebo', sans-serif;
}

/* html, */
body {background-color: var(--ground);}
body {margin: 0; width: 100vw;}

svg #eye-shine { color: #fff; }

/* svg #ground { color: var(--ground); } */
svg #sky,
svg #ground { display: none; }
svg {color: transparent; shape-rendering:geometricPrecision; }

span {
    font-size: 1.4rem;
    transform: translateY(-10rem);
    opacity: 0;
    color: rgb(122, 144, 168);
    animation: show 1s ease 1.2s forwards ;
}
@keyframes show {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/* svg,
svg #sky { color: var(--sky); } */

div.sky {
    position: absolute;
    width: 100%;
    height: calc(min(56.7vmin, 100vw / 2.468));
    background-color: var(--sky);
    z-index: -1;
}

main {
    text-align: center;
    width: 100%;
}

div.illustration {
    margin: auto;
    /* height: clamp(100px, 100vh, 50%); */
    /* height: max(MIN, min()(VAL, MAX)) */
    /* height: calc(max(100%, min(100vw*1.496, 100vh))) */
    /* height: calc(max(100vw/1.496, 100%)); */
    /* max-height: calc(100vw / 21.496); */
    max-width: calc(100vmin * 1.4);
}

svg > g {
    transform: translateX(12vw);
}

svg #tree-trunk,
svg #tree-trunk_2,
svg #grass-left,
svg #grass-right,
svg #leaf-foreground-vein,
svg #grass-bottom,
svg #tail,
svg #mustache-back > path,
svg #mustache-front > path,
svg #nose,
svg #eye-pupil,
svg #acorn-top,
svg #acorn-stick,
svg #squirrel-ear-decoration { color: var(--color-1); }

svg #leaf-foreground,
svg #tree-crown,
svg #tree-crown_2,
svg #tail-decorations,
svg #squirrel-body,
svg #squirrel-leg,
svg #acorn-body { color: var(--color-2); }

svg #tree-crown,
svg #leaf-background,
svg #squirrel-foot,
svg #squirrel-arm,
svg #squirrel-ear { color: var(--color-3); }

svg #city-background,
svg #cloud-1, 
svg #cloud-3 { color: var(--grey-light); }
svg #tree-shadow, 
svg #tree-shadow_2, 
svg #squirrel-shadow { color: rgba(0, 0, 0, 0.08); }

svg #city-foreground,
svg #cloud-2 { color: var(--grey-dark); }

body,
svg * {
    transition: color .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

svg #squirrel-ear,
svg #squirrel-arm,
svg #leaf-foreground,
svg #leaf-background,
svg #grass-leafs > *,
svg #cloud-1, 
svg #cloud-2, 
svg #cloud-3 {
    transition: transform .9s cubic-bezier(0.075, 0.82, 0.165, 1) .15s;
}

svg #cloud-1:hover, 
svg #cloud-3:hover {
    transform: translateX(1%);
}
svg #cloud-2:hover {
    transform: translateX(-1%);
}

/* svg, svg * {
    pointer-events: none;
} */
svg g {
    pointer-events:all;

}
/* svg * { 
    transform-box: fill-box;
} */

svg #bush { --deg:0; }
svg #bush:hover { --deg:1; }

svg #leaf-foreground{   transform-origin: 19% 94%; }
svg #leaf-background{   transform-origin: 19% 94%; }
svg #grass-right{       transform-origin: 19% 94%; }
svg #grass-left{        transform-origin: 19% 94%; }

svg #leaf-foreground       { transform: rotateZ(calc(var(--deg) * 1deg * -1)); }
svg #leaf-foreground:hover { transform: rotateZ(calc(var(--deg) * 1deg * -1 - 1deg)); }

svg #leaf-background       { transform: rotateZ(calc(var(--deg) * 1deg)); }
svg #leaf-background:hover { transform: rotateZ(calc(var(--deg) * 1deg + 1deg)); }

svg #grass-right       { transform: rotateZ(calc(var(--deg) * 2deg)); }
svg #grass-right:hover { transform: rotateZ(calc(var(--deg) * 2deg + 2deg)); }

svg #grass-left       { transform: rotateZ(calc(var(--deg) * 2deg * -1)); }
svg #grass-left:hover { transform: rotateZ(calc(var(--deg) * 2deg * -1 + 2deg)); }

/*  */

svg #mustache-back  { transform-origin: 40% 62%; }
svg #mustache-front { transform-origin: 38% 62%; }

svg #mustache-back, 
svg #mustache-front {
    transition: transform .9s cubic-bezier(0, 3.42, 1,-2.9) .05s;
}

svg #squirrel:hover #mustache-back  { transform: rotateZ(6deg); }
svg #squirrel:hover #mustache-front { transform: rotateZ(-6deg); }

/*  */

svg #squirrel-ear { transform-origin: 40% 62%; }
svg #squirrel:hover #squirrel-ear { transform: rotateZ(-6deg); }

/*  */

svg #squirrel-arm { transform-origin: 44% 66%; }
svg #squirrel-arm:hover  { transform: rotateZ(5deg); }

/*  */

svg #squirrel-tail { 
    transform-origin: 44% 66%; 
    transition: transform .9s cubic-bezier(0.45,-1.83, 0.37, 2.93) .05s;
}
svg #squirrel-tail:hover  { transform: rotateZ(1deg); }

/* svg #acorn:h ~ #squirrel-arm:hover   { transform: rotateZ(35deg); } */


svg #tree-crown_2,
svg #tree-crown { 
    transition: transform .49s cubic-bezier(0.4, 0, 0.71, 0.79) .85s;
    transform-origin: 70% 24%; 
}
svg #tree-crown_2 {
    transform-origin: 31% -7%; 
}
svg #trees:hover #tree-crown_2,
svg #trees:hover #tree-crown { transform: scale(1.01) rotateZ(2deg); }


@keyframes squirrel-jump {
    0% {
        transform: translateY(0%);
    }
     to {
        transform: translateY(-2%);
    }
}
@keyframes squirrel-shaddow {
    0% {
        transform: scale(1, 1) ;
    }
     to {
        transform: scale(.8, .9) ;
    }
}


/* svg #squirrel > *:not(#squirrel-shadow) { */
.run svg #squirrel {
    animation: 
        squirrel-jump 
        .5s 
        cubic-bezier(0.45, 0.05, 0.55, 0.95) 
        0s
        infinite
        both
        alternate-reverse
    ;
}
.run svg #squirrel-shadow {
    transform-box: fill-box;
    transform-origin: center;
    animation: 
        squirrel-shaddow
        .5s 
        cubic-bezier(0.45, 0.05, 0.55, 0.95) 
        0s
        infinite
        both
        alternate-reverse
    ;
}


@keyframes obj-move {
    0% {
        transform: translate( var(--from, -37%));
    }
    to {
        transform: translate( var(--to, 93%));
    }
}

.run svg #tree-right,
.run svg #tree-left {
    /* transform-box: fill-box; */
    /* transform-origin: center; */
    /* transform: translate( -10%); */
    --from: -37%;
    --to: 93%;
    --duration: 10s;
    --delay: calc(var(--duration) * -0.29);
    animation: 
        obj-move
        var(--duration)
        linear
        var(--delay)
        infinite
        both
    ;
}

.run svg #tree-right {
    /* transform: translate( -10%); */

    --from: -94%;
    --to: 45%;
    --delay: calc(var(--duration) * -0.68);

    /* animation-delay: -3.7s; */
}

/* .weather svg #cloud-1,
.weather svg #cloud-2, */
.weather svg #cloud-3 {
    --from: -37%;
    --to: 93%;
    --duration: 10s;
    --delay: calc(var(--duration) * -0.29);
    animation: 
        obj-move
        var(--duration)
        linear
        var(--delay)
        infinite
        both
    ;
}