/* ============================================================
   gate.css — the production gate overlay chrome. Builds on cosmos.css's
   .cosmos/.cx-* rules (the gate mounts a full cosmos instance inside
   .gate-mount) and adds only what's specific to being a full-viewport,
   pre-content overlay: the fixed positioning, the sr-only status line,
   and the Skip control.
   ============================================================ */

html.gate-open{overflow:hidden;scroll-behavior:auto}

#hag-gate{
  position:fixed;inset:0;z-index:1000;
  background:var(--navy-900);
  /* Ship the backdrop OPAQUE — fading it in would delay LCP for zero
     benefit, since the gate's own content IS the LCP element at first
     paint (nothing under it was ever visible to compete). */
  opacity:1;
}
#hag-gate .gate-mount{position:absolute;inset:0}
#hag-gate .gate-mount .cosmos{position:absolute}

.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;
}

.gate-skip{
  position:absolute;right:24px;bottom:24px;z-index:3;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--slate);background:transparent;
  border:1px solid var(--line-soft);border-radius:2px;
  padding:9px 16px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease,opacity .2s ease;
}
.gate-skip:hover{color:var(--ivory);border-color:var(--gold)}
.gate-skip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* During the sphere's flight to the nav mark, the WebGL canvas needs to
   sit ABOVE the real nav (z-index:50) so the sphere visually passes over
   the nav bar — everything else in the gate is already gone by then. */
#hag-gate .cx-orb{z-index:1001}
#hag-gate .cx-orb,#hag-gate .cx-orb-svg{pointer-events:none}

@media(prefers-reduced-motion:reduce){
  #hag-gate{transition:none}
}

/* Docking flourish — a brief pulse ring at the real nav mark's location as
   the flying glyph/sphere lands, and the fixed-position wrapper the DOM
   flight (concept C) or WebGL flight (A/B) temporarily promotes into. */
.gate-dock-pulse{
  position:fixed;z-index:1002;border-radius:50%;pointer-events:none;
  border:1.5px solid var(--gold-bright);opacity:0;transform:scale(0.5);
}
.gate-flying{position:fixed;z-index:1001;pointer-events:none;margin:0}

/* Very short viewports (landscape phones) never get a figure — enforced
   in JS by hag-layers.js's resolveProminenceName; this just tightens the
   Skip control out of the way of the single-line lockup. */
@media(max-height:520px) and (orientation:landscape){
  .gate-skip{right:14px;bottom:14px;padding:7px 12px;font-size:10.5px}
}