html,body{margin:0;height:100%;background:#000;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas{position:fixed;inset:0;width:100vw;height:100dvh;display:block;background:#000}
video{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:0;top:0}
#gate{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18vh;background:#000 url(gate.jpg) center/cover no-repeat;z-index:2;cursor:pointer;transition:opacity .9s ease}
#gate::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
#gate span{position:relative;font:300 13px/1 Georgia,"Times New Roman",serif;letter-spacing:.5em;color:#6f6247;opacity:.55;animation:b 3.2s ease-in-out infinite}
#gate.off{opacity:0;pointer-events:none}
@keyframes b{0%,100%{opacity:.2}50%{opacity:.6}}
#whisper{position:fixed;left:0;right:0;bottom:14vh;text-align:center;font:italic 300 15px/1.4 Georgia,serif;letter-spacing:.12em;color:#c9a95a;opacity:0;transition:opacity .4s;z-index:1;pointer-events:none;text-shadow:0 0 12px #000}
#whisper.on{opacity:.8}