.grid-animation-wrap{backface-visibility:hidden;width:600px;min-width:600px;height:600px;transform-style:preserve-3d;will-change:transform;-webkit-transform-style:preserve-3d;position:absolute;transform:translateY(75px)translate(-25px)rotateX(75deg);box-shadow:0 0 0 100vw #fff,inset 0 0 0 100vw #fff}.grid-animation-wrap *,.grid-animation-wrap :before,.grid-animation-wrap :after{transform-style:preserve-3d}.grid-animation{width:100%;height:100%;transform-style:preserve-3d;backface-visibility:hidden;-webkit-transform-style:preserve-3d;will-change:transform;background:#fff;grid-template-rows:repeat(8,10%);grid-template-columns:repeat(8,10%);display:grid;position:absolute;top:0;left:0;transform:rotate(-135deg)}.grid-animation:before{content:"";z-index:-2;backface-visibility:hidden;content:"";transform-origin:top;background:#fff;width:100vw;height:50vw;display:none;position:absolute;inset:100% 0 -200vw -200vw;transform:rotateX(90.005deg)}.grid-animation.slide .cell{background:#fff;transition-delay:0s;box-shadow:inset 0 0 0 1px #fff;transform:translateZ(0)!important}.grid-animation .cell{transform:scale(.75) translateY(calc(-100% - var(--shift))) translateX(calc(-100% + var(--shift))) translateZ(var(--height));-webkit-transform:scale(.75) translateY(calc(-100% - var(--shift))) translateX(calc(-100% + var(--shift))) translateZ(var(--height));transition:transform .6s ease-in-out;backface-visibility:hidden;grid-row-end:span var(--size);grid-column-end:span var(--size);will-change:transform;min-height:75px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;background:#f1f1f1;-webkit-transition:-webkit-transform .6s ease-in-out;box-shadow:inset 0 0 0 1px #00000026}.grid-animation .cell:first-of-type{transition-delay:16.6667ms}.grid-animation .cell:nth-of-type(2){transition-delay:33.3333ms}.grid-animation .cell:nth-of-type(3){transition-delay:50ms}.grid-animation .cell:nth-of-type(4){transition-delay:66.6667ms}.grid-animation .cell:nth-of-type(5){transition-delay:83.3333ms}.grid-animation .cell:nth-of-type(6){transition-delay:.1s}.grid-animation .cell:nth-of-type(7){transition-delay:.116667s}.grid-animation .cell:nth-of-type(8){transition-delay:.133333s}.grid-animation .cell:nth-of-type(9){transition-delay:.15s}.grid-animation .cell:nth-of-type(10){transition-delay:.166667s}.grid-animation .cell:nth-of-type(11){transition-delay:.183333s}.grid-animation .cell:nth-of-type(12){transition-delay:.2s}.grid-animation .cell:nth-of-type(13){transition-delay:.216667s}.grid-animation .cell:nth-of-type(14){transition-delay:.233333s}.grid-animation .cell:nth-of-type(15){transition-delay:.25s}.grid-animation .cell:nth-of-type(16){transition-delay:.266667s}.grid-animation .cell:nth-of-type(17){transition-delay:.283333s}.grid-animation .cell:nth-of-type(18){transition-delay:.3s}.grid-animation .cell:nth-of-type(19){transition-delay:.316667s}.grid-animation .cell:nth-of-type(20){transition-delay:.333333s}.grid-animation .cell:nth-of-type(21){transition-delay:.35s}.grid-animation .cell:nth-of-type(22){transition-delay:.366667s}.grid-animation .cell:nth-of-type(23){transition-delay:.383333s}.grid-animation .cell:nth-of-type(24){transition-delay:.4s}.grid-animation .cell:nth-of-type(25){transition-delay:.416667s}.grid-animation .cell:nth-of-type(26){transition-delay:.433333s}.grid-animation .cell:nth-of-type(27){transition-delay:.45s}.grid-animation .cell:nth-of-type(28){transition-delay:.466667s}.grid-animation .cell:nth-of-type(29){transition-delay:.483333s}.grid-animation .cell:nth-of-type(30){transition-delay:.5s}.grid-animation .cell:nth-of-type(31){transition-delay:.516667s}.grid-animation .cell:nth-of-type(32){transition-delay:.533333s}.grid-animation .cell:nth-of-type(33){transition-delay:.55s}.grid-animation .cell:nth-of-type(34){transition-delay:.566667s}.grid-animation .cell:nth-of-type(35){transition-delay:.583333s}.grid-animation .cell:nth-of-type(36){transition-delay:.6s}.grid-animation .cell:nth-of-type(37){transition-delay:.616667s}.grid-animation .cell:nth-of-type(38){transition-delay:.633333s}.grid-animation .cell:nth-of-type(39){transition-delay:.65s}.grid-animation .cell:nth-of-type(40){transition-delay:.666667s}.grid-animation .cell:nth-of-type(41){transition-delay:.683333s}.grid-animation .cell:nth-of-type(42){transition-delay:.7s}.grid-animation .cell:nth-of-type(43){transition-delay:.716667s}.grid-animation .cell:nth-of-type(44){transition-delay:.733333s}.grid-animation .cell:nth-of-type(45){transition-delay:.75s}.grid-animation .cell:nth-of-type(46){transition-delay:.766667s}.grid-animation .cell:nth-of-type(47){transition-delay:.783333s}.grid-animation .cell:nth-of-type(48){transition-delay:.8s}.grid-animation .cell:nth-of-type(49){transition-delay:.816667s}.grid-animation .cell:nth-of-type(50){transition-delay:.833333s}.grid-animation .cell:nth-of-type(51){transition-delay:.85s}.grid-animation .cell:nth-of-type(52){transition-delay:.866667s}.grid-animation .cell:nth-of-type(53){transition-delay:.883333s}.grid-animation .cell:nth-of-type(54){transition-delay:.9s}.grid-animation .cell:nth-of-type(55){transition-delay:.916667s}.grid-animation .cell:nth-of-type(56){transition-delay:.933333s}.grid-animation .cell:nth-of-type(57){transition-delay:.95s}.grid-animation .cell:nth-of-type(58){transition-delay:.966667s}.grid-animation .cell:nth-of-type(59){transition-delay:.983333s}.grid-animation .cell:nth-of-type(60){transition-delay:1s}.grid-animation .cell:nth-of-type(61){transition-delay:1.01667s}.grid-animation .cell:nth-of-type(62){transition-delay:1.03333s}.grid-animation .cell:nth-of-type(63){transition-delay:1.05s}.grid-animation .cell:nth-of-type(64){transition-delay:1.06667s}.grid-animation .cell.class11{transform:scale(.75) translateY(calc(-100% - var(--shift))) translateX(calc(-100% + var(--shift))) translateZ(calc(var(--height) * 2))}.grid-animation .cell.class11:before{height:calc(var(--height) * 2)}.grid-animation .cell.class11:after{width:calc(var(--height) * 2);left:calc(var(--height) * -2)}.grid-animation .cell.class1:before,.grid-animation .cell.class4:before,.grid-animation .cell.class8:before{background-color:#ccc;background-image:repeating-linear-gradient(#efefef,#efefef 5px,#fff0 5px 15px,#efefef 15px 20px),repeating-linear-gradient(90deg,#efefef,#efefef 5px,#fff0 5px 15px,#efefef 15px 20px),none;background-position:50% 10px;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 15px #efefef}.grid-animation .cell.class1:after,.grid-animation .cell.class4:after,.grid-animation .cell.class8:after{background-color:#cecece;background-image:repeating-linear-gradient(#fff,#fff 5px,#fff0 5px 15px,#fff 15px 20px),repeating-linear-gradient(270deg,#fff,#fff 5px,#fff0 5px 15px,#fff 15px 20px),none;background-position:20px;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 15px #fff}.grid-animation .cell.class2:before,.grid-animation .cell.class5:before,.grid-animation .cell.class7:before{background:repeating-linear-gradient(#efefef,#efefef 2px,#fff0 2px 4px,#efefef 4px 6px),#ccc;box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 15px #efefef}.grid-animation .cell.class2:after,.grid-animation .cell.class5:after,.grid-animation .cell.class7:after{background:repeating-linear-gradient(90deg,#fff,#fff 2px,#fff0 2px 4px,#fff 4px 6px),#cecece;box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 15px #fff}.grid-animation .cell.class9:before,.grid-animation .cell.class6:before{background:repeating-linear-gradient(90deg,#efefef,#efefef 2px,#fff0 2px 8px,#efefef 8px 10px),#ccc;box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 15px #efefef}.grid-animation .cell.class9:after,.grid-animation .cell.class6:after{background:repeating-linear-gradient(#fff,#fff 2px,#fff0 2px 8px,#fff 8px 10px),#cecece;box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 15px #fff}.grid-animation .cell.class10:after{background-color:#fff;background-image:radial-gradient(circle at 0,#ccc,#ccc 10px,#fff0 10px),linear-gradient(#fff calc(50% - 10px),#ccc calc(50% - 10px) calc(50% + 10px),#fff calc(50% + 10px)),none;background-position:15px,0 0,50%;background-repeat:no-repeat;background-size:100% 100%,15px 100%,100%;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;box-shadow:inset 0 0 0 1px #00000026}.grid-animation .cell.class3:before{background-color:#ccc;background-image:repeating-linear-gradient(#efefef,#efefef 5px,#fff0 5px 20px,#efefef 20px 30px),repeating-linear-gradient(90deg,#efefef,#efefef 5px,#fff0 5px 15px,#efefef 15px 20px),none;background-position:50% 10px;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 15px #efefef}.grid-animation .cell.class3:after{background-color:#cecece;background-image:repeating-linear-gradient(#fff,#fff 5px,#fff0 5px 15px,#fff 15px 20px),repeating-linear-gradient(270deg,#fff,#fff 5px,#fff0 5px 15px,#fff 15px 20px),none;background-position:20px;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 15px #fff}.grid-animation .cell:before{content:"";width:100%;height:var(--height);box-shadow:inherit;transform-origin:bottom;backface-visibility:hidden;background:#efefef;position:absolute;bottom:100%;left:0;transform:rotateX(90deg)}.grid-animation .cell:after{content:"";bottom:0%;left:calc(var(--height) * -1);height:100%;width:var(--height);box-shadow:inherit;transform-origin:100%;backface-visibility:hidden;background:#fff;position:absolute;transform:rotateY(-90deg)}