:host{display:inline-block;overflow:hidden}div{isolation:isolate;position:relative}canvas{max-width:100%;position:absolute;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-source-type:luminance;mask-mode:luminance}:host(.exploded)>div{transform:scale(.5)}:host(.exploded)>div :first-child{transform:translate(-52%,-52%)}:host(.exploded)>div :nth-child(2){transform:translate(52%,-52%)}:host(.exploded)>div :nth-child(3){transform:translate(52%,52%)}:host(.exploded)>div :nth-child(4){transform:translate(-52%,52%)}:host div{transition:transform .6s ease-in-out .1s}:host canvas{transition:transform .4s ease-in-out}:host(.exploded) div{transition:transform .4s ease-in-out}:host(.exploded) canvas{transition:transform .6s ease-in-out .1s}