html,body{margin:0;padding:0;overflow:hidden;height:100%}canvas{display:block}#gate{position:fixed;inset:0;z-index:10;display:grid;place-items:center;perspective:900px;pointer-events:auto}.door{position:absolute;top:0;bottom:0;width:50vw;background:#0b0b0b;transform-style:preserve-3d;transition:transform .7s ease,opacity .7s ease;opacity:1}.door.left{left:0;transform-origin:left center}.door.right{right:0;transform-origin:right center}#gate.open{pointer-events:none}#gate.open .door.left{transform:rotateY(-85deg);opacity:.2}#gate.open .door.right{transform:rotateY(85deg);opacity:.2}#gate.open #enter{opacity:0;pointer-events:none;transition:opacity .3s ease}#enter{position:relative;inset:0;color:#fff;background-color:#222;border:none;margin:auto;width:200px;height:56px;font-size:18px;cursor:pointer;z-index:10}#enter:hover{background-color:#333}