:root {
    --transition-time: 2s;
}

body {
    height: 100vh;
    background-color: #000;
    overflow: hidden;
}

main {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@property --width {
  syntax: "<length>";
  inherits: true;
  initial-value: 48px;
}

@property --height {
  syntax: "<length>";
  inherits: true;
  initial-value: 27px;
}

@property --img-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 50vw;
}

@property --img-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}

.open .scene {
    --width: 96px;
    --height: 54px;
    perspective-origin: 50% 25%;
    perspective: calc(var(--width) * 1.99);
    transform: translateY(calc(var(--width) * -1.3));
}

.scene {
    --background-image: url('img/spectrum_fractal-waves.png');
    --move-background: moveBg 160s linear infinite;
    --rotate-background: rotateBg 160s linear infinite;
    --box-shadow: 0 0 calc(var(--width) * 0.07) calc(var(--width) * 0.04) #000 inset;
    
    perspective-origin: 50% 90%;
    perspective: calc(var(--width) * 1.3);
    transform: translateY(calc(var(--width) * -0.6));
    position: relative;
    height: var(--height);
    width: var(--width);
    transform-style: preserve-3d;
    /* perspective: unset; */
    /* transform: rotate3d(1,1,1,-45deg); */
    transition: 
        --width var(--transition-time) ease-out,
        --height var(--transition-time) ease-out,
        perspective var(--transition-time) ease-out,
        perspective-origin var(--transition-time) ease-out,
        transform var(--transition-time) ease-out
    ;
    /* filter: blur(2px); */
}

.square {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--width);
    height: var(--height);
    overflow: hidden;
    transform-style: preserve-3d;
}

.top, 
.bottom {
    top: calc((var(--height) - var(--width)) * 0.5);
    height: var(--width);
}

.top {
    transform: translateZ(calc(var(--width) * 1.5)) translateY(calc(var(--height) * -0.5 + 1px)) rotateX(90deg);
}

.bottom {
    transform: translateZ(calc(var(--width) * 1.5)) translateY(calc(var(--height) * 0.5 - 1px)) rotateX(-90deg);
}

/* .front {
    transform: translateZ(calc(var(--width) * 0.5));
    box-shadow: unset;
} */

.back {
    transform: translateZ(calc(var(--width) * 1)) rotateY(180deg);
}

.right {
    transform: translateZ(calc(var(--width) * 1.5)) translateX(calc(var(--width) * 0.5 - 1px)) rotateY(90deg);
}

.left {
    transform: translateZ(calc(var(--width) * 1.5)) translateX(calc(var(--width) * -0.5 + 1px)) rotateY(-90deg);
}

.center {
    position: absolute;
    /* width: 100%;
    height: 100%; */
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: end;
    pointer-events: none;
}

.frog {
    --img-height: calc(var(--img-width) * 603 / 1080);
    position: relative;
    display: grid;
    width: var(--img-width);
    height: var(--img-height);
    transition: 
        all var(--transition-time) ease-out
    ;
}

.frog img {
    position: relative;
    grid-area: 1/1;
    width: 100%;
    height: 100%;
    top: 30%;
    transition: 
        transform var(--transition-time) ease-out;
}

.open .frog {
    --img-width: 40vw;
}

.frog img:nth-child(1){
    mix-blend-mode: screen;
}

.open .frog img:nth-child(1){
    transform: rotateX(50deg);
}

.inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
    /* mix-blend-mode: color; */
}

.top .inner,
.bottom .inner {
    border-radius: 30%;
}

.back .inner,
.right .inner,
.left .inner {
    background-image: var(--background-image);
    background-size: 25% 50%;
    background-position: 0%;
    background-repeat: repeat;
    width: calc(var(--width) * 4);
    height: calc(var(--width) * 2);
    right: calc(var(--width) * 3);
    animation: var(--move-background);
}

.spiral {
    position: absolute;
    background-image: url(img/spectrum_fractal-waves_center.png);
    background-size: 100% 100%;
    background-position: 0%;
    width: 172%;
    height: 172%;
    top: -36%;
    left: -36%;
    animation: var(--rotate-background);
}

.top .spiral {
    scale: -1 1;
}


/* .leaves, */
.shadow,
.gradient {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
/* 
.leaves {
    background-image: radial-gradient(ellipse at center, transparent 33%, #000 66%), url(img/leaves.jpg);
    background-size: 100% 100%;
    background-position: center;
    transform:scaleY(-1);
} */

.shadow {
    border-radius: inherit;
    box-shadow: var(--box-shadow);
}

.gradient {
    --gradient-color: #1c1a42;
    /* --gradient-color: #072748; */
    --gradient-stop: 40%;
    --gradient-center: 26%;
    opacity: 1;
    transition: opacity var(--transition-time) ease-out;
}

.open .gradient {
    opacity: 0;
}

.left .gradient {
    background-image: linear-gradient(to right, var(--gradient-color), var(--gradient-center), transparent var(--gradient-stop));
}

.right .gradient {
    background-image: linear-gradient(to left, var(--gradient-color), var(--gradient-center), transparent var(--gradient-stop));
}

.back .gradient {
    background-image: linear-gradient(to left, var(--gradient-color), var(--gradient-color));
}

.top .gradient {
    background-image: linear-gradient(to bottom, var(--gradient-color), var(--gradient-center), transparent var(--gradient-stop));
}

.bottom .gradient {
    background-image: linear-gradient(to top, var(--gradient-color), var(--gradient-center), transparent var(--gradient-stop));
}

@keyframes moveBg {
    from { transform: translateX(0) translateY(0); }
    to { transform: translateX(75%) translateY(-50%); }
}

@keyframes rotateBg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* animation: liftLid 2s ease-out infinite alternate; */
/* @keyframes liftLid {
    from { transform: rotateX(45deg); }
    to { transform: rotateX(0); }

} */


/* .scene::before {
    content: "";
    height: 150%;
    width: 150%;
    position: absolute;
    top: -25%;
    left: -25%;
    background-color: #fff;
    background-image: linear-gradient(#373737 50%, #fff);
    border-radius: 100%;
} */

/* animation: rotateCube 2s infinite ease-out alternate; */
/* @keyframes rotateCube {
    from { transform: rotate3d(0, -1, 0, 20deg) }
    to { transform: rotate3d(-0.25, 0, 1, 120deg) }
} */