/* The gate overlay. Used by the home page while SITE_MODE (in /site-mode.js) is 'gate' or 'maintenance'. */
html.sg-locked,html.sg-locked body,html.sg-revealing,html.sg-revealing body{overflow:hidden}
/* CSS-first: nothing but the gate is drawn while it is locked, so the home page never flashes */
html.sg-locked body>:not(#sg-gate){visibility:hidden}

#sg-gate{
  --bg:#08090a; --bg2:#111316; --panel:#15181c; --line:#24282e; --line2:#30353c;
  --fg:#eceef0; --dim:#6f757d; --muted:#a0a6ae;
  --teal:#2dd4bf; --teal2:#1f9e8f; --sand:#d9c29a; --stop:#c8643c;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  /* door geometry, as fractions of assets/gate-poster.jpg (1600x900) */
  --dl:.425; --dr:.672; --dt:.144; --db:.839; --sx:.5425;
  position:fixed;inset:0;z-index:2147483000;background:var(--bg);color:var(--fg);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;opacity:1;transition:opacity 1.4s ease}
#sg-gate *{box-sizing:border-box;margin:0;padding:0}
#sg-gate :focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#sg-gate .sg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* stage: the poster, scaled to cover and centred on the seam */
#sg-gate .sg-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  transform-origin:var(--ox,50%) var(--oy,50%);opacity:0;transition:transform 2.6s cubic-bezier(.4,0,.2,1),opacity .6s ease}
/* the gate fades in once its picture has loaded, so a half-loaded image is never shown */
#sg-gate.sg-ready .sg-stage{opacity:1}
#sg-gate .sg-scene{position:absolute;left:0;top:0;width:1600px;height:900px;background:url(/assets/gate-poster.jpg) 0 0/100% 100% no-repeat}
#sg-gate .sg-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 80% at 50% 48%,transparent 45%,rgba(8,9,10,.55) 100%),linear-gradient(180deg,rgba(8,9,10,.35),transparent 18%,transparent 78%,rgba(8,9,10,.7))}
#sg-gate .sg-rect{position:absolute;left:calc(var(--dl)*100%);top:calc(var(--dt)*100%);width:calc((var(--dr) - var(--dl))*100%);height:calc((var(--db) - var(--dt))*100%)}
#sg-gate .sg-doorway{background:
  radial-gradient(ellipse 30% 40% at 50% 60%,rgba(255,255,255,.98),rgba(236,255,252,.85) 40%,transparent 100%),
  linear-gradient(90deg,transparent 30%,rgba(236,255,252,.35) 50%,transparent 70%),
  radial-gradient(ellipse 70% 80% at 50% 62%,rgba(120,240,222,.85),rgba(45,212,191,.45) 45%,rgba(8,40,36,.96) 100%),#061412;
  box-shadow:inset 0 0 calc(var(--W,1600px)*.03) rgba(0,0,0,.85)}
#sg-gate .sg-spill{position:absolute;left:calc(var(--sx)*100%);top:calc(var(--db)*100%);width:calc(var(--W,1600px)*.42);height:calc(var(--H,900px)*.16);transform:translate(-50%,-50%) scaleX(.4);border-radius:50%;
  background:radial-gradient(closest-side,rgba(220,255,250,.55),rgba(45,212,191,.25) 50%,transparent);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity 1.8s ease .2s,transform 2.2s cubic-bezier(.2,.7,.2,1) .2s}
#sg-gate .sg-doors{perspective:calc(var(--W,1600px)*.9);perspective-origin:50% 50%}
#sg-gate .sg-leaf{position:absolute;top:0;height:100%;background-image:url(/assets/gate-poster.jpg);background-repeat:no-repeat;background-size:var(--W,1600px) var(--H,900px);
  backface-visibility:hidden;will-change:transform;transition:transform 1.9s cubic-bezier(.55,.05,.25,1),filter 1.9s ease,opacity .8s ease}
#sg-gate .sg-leaf.l{left:0;width:calc((var(--sx) - var(--dl))/(var(--dr) - var(--dl))*100%);transform-origin:0 50%;
  background-position:calc(var(--W,1600px)*var(--dl)*-1) calc(var(--H,900px)*var(--dt)*-1)}
#sg-gate .sg-leaf.r{right:0;width:calc((var(--dr) - var(--sx))/(var(--dr) - var(--dl))*100%);transform-origin:100% 50%;
  background-position:calc(var(--W,1600px)*var(--sx)*-1) calc(var(--H,900px)*var(--dt)*-1)}

/* the seam: a thin line of light that grows with each correct input */
#sg-gate .sg-seam{position:absolute;left:calc(var(--sx)*100%);top:calc(var(--dt)*100%);height:calc((var(--db) - var(--dt))*100%);width:0;pointer-events:none}
#sg-gate .sg-line{position:absolute;left:-1px;top:4%;bottom:2%;width:2px;
  background:linear-gradient(180deg,transparent,rgba(220,255,250,.9) 18%,rgba(45,212,191,.75) 80%,transparent);
  opacity:calc(.25 + var(--p,0)*.125);box-shadow:0 0 calc(6px + var(--p,0)*6px) calc(1px + var(--p,0)*1px) rgba(45,212,191,.5);transition:opacity .4s,box-shadow .4s}
#sg-gate .sg-runes{position:absolute;left:0;top:13%;bottom:13%;width:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
#sg-gate .sg-rune{display:block;width:var(--rs,20px);height:var(--rs,20px);flex:none;color:var(--sand);opacity:.16;transition:opacity .35s,color .35s,filter .35s}
#sg-gate .sg-rune svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#sg-gate .sg-rune.lit{color:#e6fffb;opacity:1;filter:drop-shadow(0 0 3px rgba(45,212,191,1)) drop-shadow(0 0 10px rgba(45,212,191,.85)) drop-shadow(0 0 22px rgba(45,212,191,.5))}
#sg-gate .sg-seam.wrong .sg-rune{color:var(--stop);opacity:.7;filter:drop-shadow(0 0 6px rgba(200,100,60,.7));transition:none}
#sg-gate .sg-seam.shake .sg-runes{animation:sg-shake .38s ease}
@keyframes sg-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
#sg-gate .sg-bloom{position:absolute;left:calc(var(--sx)*100%);top:49%;width:calc(var(--W,1600px)*.7);height:calc(var(--W,1600px)*.55);transform:translate(-50%,-50%) scale(.3);border-radius:50%;
  background:radial-gradient(closest-side,rgba(200,255,246,.55),rgba(45,212,191,.22) 45%,transparent);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.2,.7,.2,1)}

/* chrome */
#sg-gate .sg-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:22px 28px;z-index:5;pointer-events:none;transition:opacity .6s}
#sg-gate .sg-top img{display:block;height:18px;width:auto}
#sg-gate .sg-state{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
#sg-gate .sg-pad{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:34px;
  padding:12px 18px;border:1px solid rgba(48,53,60,.7);border-radius:999px;background:rgba(17,19,22,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .6s,transform .6s}
#sg-gate .sg-dpad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}
#sg-gate .sg-k{appearance:none;-webkit-appearance:none;border:1px solid var(--line2);background:rgba(21,24,28,.85);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;
  font:inherit;transition:background .15s,color .15s,border-color .15s,transform .1s;touch-action:manipulation}
#sg-gate .sg-k:hover{color:var(--fg);border-color:#3c424a}
#sg-gate .sg-k:active,#sg-gate .sg-k.hit{background:#1c2a28;color:var(--teal);border-color:var(--teal2);transform:scale(.94)}
#sg-gate .sg-k svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#sg-gate .sg-k.u{grid-area:1/2;border-radius:8px 8px 3px 3px}#sg-gate .sg-k.d{grid-area:3/2;border-radius:3px 3px 8px 8px}
#sg-gate .sg-k.lft{grid-area:2/1;border-radius:8px 3px 3px 8px}#sg-gate .sg-k.rgt{grid-area:2/3;border-radius:3px 8px 8px 3px}
#sg-gate .sg-dpad i{grid-area:2/2;background:rgba(21,24,28,.85);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
#sg-gate .sg-ab{display:flex;gap:12px}
#sg-gate .sg-k.btn{width:46px;height:46px;border-radius:50%;font-family:var(--mono);font-weight:600;font-size:15px}
#sg-gate .sg-k.btn.b{margin-top:16px}
#sg-gate .sg-hint,#sg-gate .sg-msg{position:absolute;left:0;right:0;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.9);z-index:4;pointer-events:none;transition:opacity .6s}
#sg-gate .sg-hint{bottom:calc(166px + env(safe-area-inset-bottom));font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(160,166,174,.7)}
#sg-gate .sg-msg{bottom:calc(192px + env(safe-area-inset-bottom));font-size:15px;line-height:1.5;color:#cfd3d8;padding:0 24px}
#sg-gate .sg-msg:empty{display:none}

/* opening, then dissolving into the page underneath */
#sg-gate.is-open .sg-leaf.l{transform:rotateY(84deg);filter:brightness(.35)}
#sg-gate.is-open .sg-leaf.r{transform:rotateY(-84deg);filter:brightness(.35)}
#sg-gate.is-open .sg-bloom{opacity:1;transform:translate(-50%,-50%) scale(1)}
#sg-gate.is-open .sg-spill{opacity:1;transform:translate(-50%,-50%) scaleX(1)}
#sg-gate.is-open .sg-seam{opacity:0;transition:opacity .5s}
#sg-gate.is-open .sg-pad{opacity:0;transform:translate(-50%,20px);pointer-events:none}
#sg-gate.is-open .sg-hint,#sg-gate.is-open .sg-msg,#sg-gate.is-open .sg-top{opacity:0}
#sg-gate.is-open .sg-stage{transform:scale(1.12)}
#sg-gate.sg-fade{opacity:0;pointer-events:none}
#sg-gate.sg-enter{opacity:0}
#sg-gate.sg-entering{transition:opacity .7s ease}

/* "Close the gate", added to the home page footer once it is open */
.sg-relock{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.sg-relock:hover{color:var(--fg,#eceef0)}

@media (max-width:640px){
  #sg-gate .sg-top{padding:18px 20px}
  #sg-gate .sg-pad{gap:22px;padding:10px 14px}
  #sg-gate .sg-dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}
  #sg-gate .sg-k.btn{width:52px;height:52px}
  #sg-gate .sg-hint{bottom:calc(178px + env(safe-area-inset-bottom))}
  #sg-gate .sg-msg{bottom:calc(204px + env(safe-area-inset-bottom));font-size:14px}
}
@media (max-height:520px) and (orientation:landscape){
  /* phones held sideways: the pad goes to the corner so it does not cover the doors */
  #sg-gate .sg-pad{left:auto;right:calc(14px + env(safe-area-inset-right));bottom:12px;transform:none;gap:16px;padding:8px 12px}
  #sg-gate .sg-dpad{grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,32px)}
  #sg-gate .sg-k.btn{width:42px;height:42px}
  #sg-gate.is-open .sg-pad{transform:translateY(20px)}
  #sg-gate .sg-hint{display:none}
  #sg-gate .sg-msg{top:52px;bottom:auto;font-size:13px}
  #sg-gate .sg-top{padding:14px 20px}
}
@media (prefers-reduced-motion:reduce){
  /* a quick plain fade, no swinging doors, no zoom, no shake */
  #sg-gate{transition:opacity .5s ease}
  #sg-gate .sg-stage,#sg-gate.is-open .sg-stage{transition:opacity .3s ease;transform:none}
  #sg-gate .sg-leaf{transition:none}
  #sg-gate.is-open .sg-leaf.l,#sg-gate.is-open .sg-leaf.r{transform:none;filter:none}
  #sg-gate .sg-seam.shake .sg-runes{animation:none}
}