/* ZeroGrav DM: the entrance. The sky with one point of light where the mark will be, and Enter beneath it. It shows only while html.gated (set by the inline script in ), so it covers the page from the first paint. gate.js places the point on the mark's optical centre, then fades it all in; after the press, it drives everything itself. */ .gate { display: none; } html.gated .gate { display: block; position: fixed; inset: 0; z-index: 30; overflow: hidden; background: linear-gradient(180deg, var(--sky-top), var(--sky-bot)); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .gate:focus { outline: none; } .gate.go { cursor: default; } /* the gate's sky: the page's own stars, a little dimmer (the ring wakes them) */ .gate-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 2s cubic-bezier(.3, 0, .2, 1); } .gate.live .gate-sky { opacity: 1; } /* Enter: the point and its word are one button. Its point sits 32px down, on --gx/--gy. */ .gate-enter { position: absolute; left: var(--gx, 50%); top: var(--gy, 47%); transform: translate(-50%, -32px); display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0 22px 14px; border: 0; background: none; color: inherit; font: 400 18px/1 "IM Fell English SC", Georgia, serif; letter-spacing: .28em; cursor: pointer; outline: none; opacity: 0; transition: opacity 1.4s cubic-bezier(.3, 0, .2, 1) .5s; } .gate.live .gate-enter { opacity: 1; } .gate-point { position: relative; width: 64px; height: 64px; } .gate-label { display: block; margin-top: 2px; padding-left: .28em; color: rgba(239, 226, 196, .8); text-shadow: 0 0 12px rgba(4, 6, 12, .9); transition: color .6s cubic-bezier(.3, 0, .2, 1); } .gate-enter:hover .gate-label, .gate-enter:focus-visible .gate-label { color: var(--cream); } /* the point: a hard, tiny core in a small soft halo, breathing very slowly */ .gate-halo, .gate-core, .gate-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; } .gate-halo { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: radial-gradient(closest-side, rgba(255, 246, 228, .5), rgba(239, 226, 196, .16) 34%, rgba(239, 226, 196, .045) 66%, rgba(239, 226, 196, 0)); animation: gate-breathe 6.4s cubic-bezier(.45, 0, .55, 1) infinite; } .gate-core { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: #fffaf0; box-shadow: 0 0 3px 1px rgba(255, 244, 222, .5); } @keyframes gate-breathe { 0%, 100% { transform: scale(.8); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } } /* focus from the keyboard: a fine brass orbit round the point */ .gate-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; box-shadow: inset 0 0 0 1.5px var(--brass-hi); opacity: 0; transform: scale(.9); transition: opacity .35s cubic-bezier(.3, 0, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); } .gate-enter:focus-visible .gate-ring { opacity: 1; transform: none; } /* after the press the canvas carries the point */ .gate.go .gate-point { visibility: hidden; } /* the page behind: the mark waits for the light, and the words wait until the ring has passed all of them (gate.js marks each one .lit as it does), so the ring never cuts a word in half */ html.gated .brand { opacity: 0; } html.gated #arania .cap, html.gated #gl .cap, html.gated #others .cap, html.gated footer.credits, html.gated #sound { opacity: 0; transition: opacity .4s cubic-bezier(.3, 0, .2, 1); } html.gated #arania .cap.lit, html.gated #gl .cap.lit, html.gated #others .cap.lit, html.gated footer.credits.lit, html.gated #sound.lit { opacity: 1; } /* the heading takes focus when the gate goes (for the next Tab and for screen readers); it isn't a control */ #brand .logo:focus { outline: none; } @media (prefers-reduced-motion: reduce) { .gate-halo { animation: none; transform: scale(.94); opacity: .85; } .gate-ring { transition: opacity .2s ease; transform: none; } html.gated #arania .cap, html.gated #gl .cap, html.gated #others .cap, html.gated footer.credits, html.gated #sound { opacity: 1; transition: none; } }