/* ============================================================
   gate.css — entry interface ("Enter Orbit")
   ============================================================ */
#gate{
  position:fixed;inset:0;z-index:9990;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 130% 110% at 50% 42%, #0b1326 0%, #070c18 55%, #05080f 100%);
  opacity:0;visibility:hidden;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
#gate.show{opacity:1;visibility:visible;}
#gate.done{opacity:0;visibility:hidden;transition:opacity .9s var(--ease), visibility .9s var(--ease);}
#gate.done .gate-inner{transform:translateY(-22px) scale(.96);opacity:0;transition:all .7s var(--ease);}
#gate.done .gate-shard{transform:scale(1.5);opacity:0;}
body.gating{overflow:hidden;}
/* fully remove the page chrome while the overlays are up (no edge peek) */
body.preloading .nav, body.gating .nav{visibility:hidden;opacity:0;pointer-events:none;}

/* atmosphere */
.gate-atmo{position:absolute;inset:0;pointer-events:none;}
#gate-stars{position:absolute;inset:0;width:100%;height:100%;}
.g-neb{position:absolute;border-radius:50%;filter:blur(85px);opacity:.5;mix-blend-mode:screen;}
.g-neb.a{width:620px;height:620px;top:-180px;left:50%;margin-left:-500px;
  background:radial-gradient(circle,rgba(34,131,198,.55),transparent 68%);animation:gneb 10s ease-in-out infinite;}
.g-neb.b{width:580px;height:580px;bottom:-200px;left:50%;margin-left:80px;
  background:radial-gradient(circle,rgba(19,183,166,.4),transparent 68%);animation:gneb 13s ease-in-out infinite reverse;}
@keyframes gneb{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(24px,18px) scale(1.08);}}

/* content */
.gate-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:640px;padding:0 26px;transition:all .7s var(--ease);}

.gate-shard{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center;
  margin-bottom:30px;transition:transform .7s var(--ease), opacity .7s var(--ease);}
.gate-shard .gs-ring{position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(140,180,240,.18);
  border-top-color:rgba(34,131,198,.7);animation:gspin 4.6s linear infinite;}
.gate-shard .gs-glow{position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 48%, rgba(34,131,198,.55), rgba(19,183,166,.18) 50%, transparent 72%);
  filter:blur(16px);animation:gpulse 2.6s ease-in-out infinite;}
.gate-shard img{position:relative;z-index:2;width:54px;height:auto;
  filter:drop-shadow(0 0 12px rgba(34,131,198,.9)) drop-shadow(0 0 26px rgba(19,183,166,.55));}
@keyframes gspin{to{transform:rotate(360deg);}}
@keyframes gpulse{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.12);opacity:1;}}

.gate-title{font-family:var(--display);font-weight:600;letter-spacing:-.015em;line-height:1.04;
  font-size:clamp(38px,5.4vw,62px);margin:0;
  opacity:0;transform:translateY(14px);}
.gate-copy{font-family:var(--body);font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:var(--ink-soft);
  margin:22px 0 0;max-width:54ch;min-height:5.2em;
  opacity:0;transform:translateY(14px);}
.gate-copy .gc-type::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;
  background:var(--c3);vertical-align:-2px;animation:gcaret .9s steps(1) infinite;}
.gate-copy.typed .gc-type::after{display:none;}
@keyframes gcaret{50%{opacity:0;}}
.gate-enter{margin-top:40px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:none;background:none;padding:6px 2px;
  font-family:var(--body);font-weight:600;font-size:18px;letter-spacing:.02em;color:var(--ink);
  position:relative;opacity:0;transition:color .3s var(--ease), text-shadow .3s var(--ease);}
.gate-enter::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;border-radius:2px;
  background:var(--grad);transform:scaleX(1);transform-origin:left;
  transition:box-shadow .3s var(--ease), filter .3s var(--ease);}
.gate-enter:hover{color:#fff;text-shadow:0 0 18px rgba(46,182,255,.7);}
.gate-enter:hover::after{box-shadow:0 0 16px rgba(34,131,198,.9), 0 0 26px rgba(19,183,166,.6);filter:brightness(1.25);}
.gate-enter .ge-arrow{transition:transform .3s var(--ease);}
.gate-enter:hover .ge-arrow{transform:translateX(6px);}

/* staged reveal once .gate-on is added (on preloader handoff) */
#gate.gate-on .gate-title{animation:griseG .8s var(--ease) .15s forwards;}
#gate.gate-on .gate-copy{animation:griseG .8s var(--ease) .32s forwards;}
#gate.gate-on .gate-enter{animation:gfadeG .8s var(--ease) .52s forwards;}
@keyframes griseG{to{opacity:1;transform:translateY(0);}}
@keyframes gfadeG{to{opacity:1;}}

/* esc hint */
.gate-hint{position:absolute;right:26px;bottom:30px;z-index:2;
  font-family:var(--display);font-size:12px;letter-spacing:.06em;color:var(--ink-dim);opacity:0;}
#gate.gate-on .gate-hint{animation:gfadeG .8s var(--ease) .8s forwards;}
.gate-hint kbd{font-family:var(--display);font-size:11px;color:var(--ink-soft);
  border:1px solid var(--stroke-2);border-radius:6px;padding:2px 7px;background:rgba(255,255,255,.04);}

@media (prefers-reduced-motion:reduce){
  .gate-shard .gs-ring,.gate-shard .gs-glow,.g-neb{animation:none;}
  .gate-title,.gate-copy,.gate-enter,.gate-hint{opacity:1;transform:none;animation:none;}
}
@media (max-width:560px){
  .gate-hint{left:0;right:0;text-align:center;}
  .gate-copy{min-height:0;}
  .gate-shard{width:78px;height:78px;margin-bottom:22px;}
}