/* ===== Corkscrew gate: logo hidden in the dark, the O unlocks the site ===== */
html.gate-locked, html.gate-locked body { overflow: hidden; height: 100%; }
.gate { position: fixed; inset: 0; z-index: 1000; background: #050505; cursor: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  --x: 50vw; --y: 50vh; --beam: 180px; }
.gate.gone { display: none; }
/* the theme hides empty divs; these layers are meant to be empty */
.gate-dark, .gate-glow, .gate-grain { display: block !important; }
.gate-hint, .gate-secret { display: block !important; }

/* the logo, centred; pieces sized by height so they sit together exactly as the original */
.gate-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; flex-direction: column; align-items: center; }
.gate-logo { display: flex; height: min(9.4vw, 105px); }
/* tagline under the logo: thin capitals in orange; MIND is underlined */
.gate-tagline { display: block !important; margin: 1.6em 0 0; color: #e9b949; text-align: center; white-space: nowrap;
  font: 300 clamp(1.05rem, 1.45vw, 1.6rem)/1 'Figtree', var(--font-body-family, sans-serif); letter-spacing: .5em; text-transform: uppercase; padding-left: .5em; }
.gate-tagline .mind { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em; }
.gate-tagline .mind .last { letter-spacing: 0; margin-right: .5em; display: inline-block; text-decoration: inherit; } /* underline stops at the D */
.gate-tagline .mind .last { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em; }
.gate-logo img { display: block; height: 100%; width: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.gate-logo .o { transform-origin: 50% 49%; }
/* no glow: the O gives nothing away until it is clicked */
.gate.turning .gate-logo .o { transform: rotate(1080deg); transition: transform 1.1s cubic-bezier(.6, 0, .2, 1); }

/* darkness with a torch-shaped hole that follows the pointer / finger */
.gate-dark { position: absolute; inset: 0; z-index: 2; background: #050505; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--beam) at var(--x) var(--y), transparent 0%, rgba(0,0,0,.3) 60%, #000 100%);
          mask-image: radial-gradient(circle var(--beam) at var(--x) var(--y), transparent 0%, rgba(0,0,0,.3) 60%, #000 100%); }
.gate.lit .gate-dark { opacity: 0; transition: opacity .5s; }
.gate-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle var(--beam) at var(--x) var(--y), rgba(255, 228, 175, .22) 0%, rgba(255, 220, 160, .08) 55%, transparent 100%); }
.gate-grain { position: absolute; inset: -50%; z-index: 3; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: gate-grain 1s steps(4) infinite; }
@keyframes gate-grain { 25% { transform: translate(-3%, 2%) } 50% { transform: translate(2%, -3%) } 75% { transform: translate(-1%, 3%) } }

/* sniper crosshair at the centre of the torch: there's something here to hit */
.gate-cross { display: block !important; position: absolute; z-index: 5; left: var(--x); top: var(--y); width: clamp(48px, 5vw, 64px); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; color: rgba(233, 185, 73, .75); transition: opacity .3s; }
.gate-cross svg { display: block; width: 100%; height: 100%; }
.gate.lit .gate-cross, .gate.turning .gate-cross { opacity: 0; }

/* invisible button sitting exactly over the O */
.gate-hit { position: absolute; z-index: 4; border-radius: 50%; cursor: none; background: transparent; border: 0; padding: 0;
  -webkit-appearance: none; appearance: none; }
.gate-hit:focus-visible { outline: 2px solid #e9b949; outline-offset: 6px; }

.gate-hint { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); z-index: 1; text-align: center; color: #b9b1a3;
  pointer-events: none; margin: 0; width: max-content; max-width: 86vw;
  font: 400 1.4rem/1.5 var(--font-body-family, sans-serif); letter-spacing: .35em; text-transform: uppercase; }
/* once the torch has read the hint, a lit copy fades in above the darkness and stays */
.gate-hint-lit { z-index: 5; opacity: 0; transition: opacity 1.4s ease; color: #8f887c; }
.gate.hint-seen .gate-hint-lit { opacity: 1; }
/* the riddle: hidden in the dark, only readable under the torch */
.gate-riddle { position: absolute; z-index: 1; right: 7%; top: 70%; margin: 0; color: #cfc6b4; pointer-events: none; text-align: right;
  font: italic 400 1.45rem/1.7 var(--font-body-family, sans-serif); letter-spacing: .22em; text-transform: lowercase; display: block !important; }
@media (max-width: 749px) { .gate-riddle { right: 7%; top: 66%; font-size: 1.15rem; letter-spacing: .16em; } }
/* a second clue hidden in the darkness: only readable under the torch */
.gate-secret { position: absolute; z-index: 1; left: 9%; top: 24%; margin: 0; color: #cfc6b4; pointer-events: none; white-space: nowrap;
  font: italic 400 1.5rem/1.4 var(--font-body-family, sans-serif); letter-spacing: .25em; text-transform: lowercase; }
@media (max-width: 749px) { .gate-secret { left: 7%; top: 9%; font-size: 1.2rem; letter-spacing: .18em; } }
.gate-skip { position: absolute; left: 1.5rem; top: 1.5rem; z-index: 6; color: #fff; background: #111; padding: .8rem 1.2rem; border: 0;
  font: 500 1.3rem var(--font-body-family, sans-serif); transform: translateY(-300%); }
.gate-skip:focus { transform: none; }

@media (hover: none) { .gate { cursor: auto; } }
@media (prefers-reduced-motion: reduce) { .gate-grain { animation: none; } }
.gate.lit .gate-secret, .gate.lit .gate-riddle, .gate.lit .gate-hint { opacity: 0 !important; transition: opacity .25s; } /* clues stay secret while the O opens */