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