*{margin:0;padding:0}html,body{overflow:hidden}.webgl{z-index:2;position:fixed;top:0;left:0;outline:none}.container{position:fixed;top:10px;left:10px;width:200px;height:100px;z-index:99}@media screen and (max-width: 450px){.lil-gui.root.allow-touch-styles.autoPlace.closed{width:120px}.container{height:100px;width:200px}.copy{display:none}.title{font-size:10px;font-weight:300;line-height:1}.btn{font-size:10px;padding:.5rem}}.card{position:relative;display:flex;align-items:flex-end;overflow:hidden;padding:1rem;width:100%;text-align:center;color:#f5f5f5;background-color:#f5f5f5;box-shadow:0 1px 1px #0000001a,0 2px 2px #0000001a,0 4px 4px #0000001a,0 8px 8px #0000001a,0 16px 16px #0000001a}.card:before{content:"";position:absolute;top:0;left:0;width:100%;height:110%;background-size:cover;background-position:0 0;transition:transform calc(.7s * 1.5) cubic-bezier(.19,1,.22,1);pointer-events:none;-webkit-transition:transform calc(.7s * 1.5) cubic-bezier(.19,1,.22,1);-moz-transition:transform calc(.7s * 1.5) cubic-bezier(.19,1,.22,1);-ms-transition:transform calc(.7s * 1.5) cubic-bezier(.19,1,.22,1);-o-transition:transform calc(.7s * 1.5) cubic-bezier(.19,1,.22,1)}.card:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:200%;pointer-events:none;background-image:linear-gradient(to bottom,hsla(0,0%,0%,0) 0%,hsla(0,0%,0%,.009) 11.7%,hsla(0,0%,0%,.034) 22.1%,hsla(0,0%,0%,.072) 31.2%,hsla(0,0%,0%,.123) 39.4%,hsla(0,0%,0%,.182) 46.6%,hsla(0,0%,0%,.249) 53.1%,hsla(0,0%,0%,.32) 58.9%,hsla(0,0%,0%,.394) 64.3%,hsla(0,0%,0%,.468) 69.3%,hsla(0,0%,0%,.54) 74.1%,hsla(0,0%,0%,.607) 78.8%,hsla(0,0%,0%,.668) 83.6%,hsla(0,0%,0%,.721) 88.7%,hsla(0,0%,0%,.762) 94.1%,hsla(0,0%,0%,.79) 100%);transform:translateY(-50%);transition:transform 1.4s cubic-bezier(.19,1,.22,1);-webkit-transition:transform 1.4s cubic-bezier(.19,1,.22,1);-moz-transition:transform 1.4s cubic-bezier(.19,1,.22,1);-ms-transition:transform 1.4s cubic-bezier(.19,1,.22,1);-o-transition:transform 1.4s cubic-bezier(.19,1,.22,1)}.card:before{background-image:url(../gojo.jpg)}.content{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:1rem;transition:transform .7s cubic-bezier(.19,1,.22,1);z-index:1;-webkit-transition:transform .7s cubic-bezier(.19,1,.22,1);-moz-transition:transform .7s cubic-bezier(.19,1,.22,1);-ms-transition:transform .7s cubic-bezier(.19,1,.22,1);-o-transition:transform .7s cubic-bezier(.19,1,.22,1);margin-top:1rem}.title{font-size:1.3rem;font-weight:700;line-height:1.2}.copy{font-size:1rem;font-style:italic;line-height:1.35}.card{height:100%;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px}.btn{cursor:pointer;border-radius:10px;margin-top:.5rem;padding:.5rem 1.25rem;font-size:.65rem;font-weight:700;letter-spacing:.025rem;text-transform:uppercase;color:#fff;background-color:#000;border:none}.btn .a{color:#fff;text-decoration:none}.btn:hover{background-color:lighten(black,5%)}.btn:focus{outline:1px dashed yellow;outline-offset:3px}@media (hover: hover){.card:after{transform:translateY(0)}.content{transform:translateY(calc(100% - 4.5rem))}.content>*:not(.title){opacity:0;transform:translateY(1rem);transition:transform .7s cubic-bezier(.19,1,.22,1),opacity .7s cubic-bezier(.19,1,.22,1)}.card:hover,.card:focus-within{align-items:center}.card:hover:before,.card:focus-within:before{transform:translateY(-4%)}.card:hover:after,.card:focus-within:after{transform:translateY(-50%)}.card:hover .content,.card:focus-within .content{transform:translateY(0)}.card:hover .content>*:not(.title),.card:focus-within .content>*:not(.title){opacity:1;transform:translateY(0);transition-delay:.0875s}.card:focus-within .content,.card:focus-within .content>*:not(.title),.card:focus-within .content,.card:focus-within .content>*:not(.title){transition-duration:0s}}