/* Atlas Recruiters, staff sign-in page. Vanilla CSS, no external requests.
   Navy #0B1D3A stage, brass #B8952F accents, zero radius, chamfered corners. */
:root{
  --navy:#0B1D3A; --brass:#B8952F; --brass-hi:#D9BC62;
  --serif:Didot,"Bodoni 72","Bodoni MT","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --expo:cubic-bezier(.16,1,.3,1); --silk:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.32,.72,0,1);
  --vh:1vh;     /* 1% of the viewport height: small-viewport units where supported, so browser chrome never clips the stage */
  --pw:390px;   /* layout scale ("panel width"): the phone panel; every size below is a ratio of it, so the whole page scales fluidly */
  --S:50vw;     /* globe size in the wide layout */
}
@supports (height:1svh){:root{--vh:1svh}}
@supports (width:min(1px,2px)) and (width:max(1px,2px)){
  :root{--pw:min(100vw,max(390px,calc(var(--vh) * 62)));--S:min(calc(var(--vh) * 78),50vw)}
}
*{box-sizing:border-box}
html{background:#0B1D3A;-webkit-text-size-adjust:100%;height:100%}
body{margin:0;background:#0B1D3A;min-height:100%;color:#fff;font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:4px}

.stage{position:relative;width:100%;margin:0;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;justify-items:center;align-items:center;overflow:hidden;isolation:isolate;
  background:#0B1D3A;background:radial-gradient(120% 80% at 50% 36%,#133463 0%,#0B1D3A 58%,#071328 100%),#0B1D3A}

body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:#0B1D3A;pointer-events:none}

/* ---------- sky ---------- */
.sky{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}
.aurora{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
.dust{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}
.frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:.55}

/* ---------- wordmark ---------- */
.top{grid-column:1;grid-row:1;position:relative;z-index:6;padding:22px 24px 0;text-align:center}
.brand{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.brand img{width:92px;width:calc(var(--pw) * .236);height:auto}

/* ---------- headline + button ---------- */
.copy{grid-column:1;grid-row:3;align-self:start;justify-self:center;position:relative;z-index:6;text-align:center;padding:4px 24px 0;width:100%}
.h1{font-family:var(--serif);font-weight:400;font-size:32px;font-size:calc(var(--pw) * .083);line-height:1.04;letter-spacing:-.012em;margin:0 0 20px;color:#fff;text-wrap:balance}
.w{display:inline-block;vertical-align:top;padding:.05em .03em .18em;margin:-.05em -.03em -.18em}
.w>span{display:inline-block}
.actions{display:flex;align-items:center;justify-content:center}

/* ---------- globe ---------- */
.globe-wrap{grid-column:1;grid-row:2;position:relative;z-index:3;justify-self:center;align-self:center;width:88vw;width:calc(var(--pw) * .9);width:min(calc(var(--pw) * .94),calc(var(--vh) * 48));margin:6px 0 0}
.globe{position:relative;width:100%;height:0;padding-top:100%}
.globe canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}

/* ---------- buttons: chamfer built from pseudo-elements so focus outlines stay whole ---------- */
.btn{--bg:var(--brass);--fg:var(--navy);--edge:var(--brass-hi);--cc:14px;position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:54px;min-height:calc(var(--pw) * .138);padding:0 34px;padding:0 calc(var(--pw) * .087);text-decoration:none;color:var(--fg);font-weight:600;font-size:14px;font-size:max(14px,calc(var(--pw) * .036));letter-spacing:.12em;text-transform:uppercase;isolation:isolate;transition:color .35s var(--spring),transform .6s var(--spring);transform:translate3d(var(--mx,0),var(--my,0),0)}
.btn::before,.btn::after{content:"";position:absolute;z-index:-1;clip-path:polygon(var(--cc) 0,100% 0,100% calc(100% - var(--cc)),calc(100% - var(--cc)) 100%,0 100%,0 var(--cc))}
.btn::before{top:0;right:0;bottom:0;left:0;background:var(--edge)}
.btn::after{inset:1px;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%) no-repeat 160% 0/260% 100%,var(--bg);transition:background-color .35s}
.btn:hover{--bg:var(--brass-hi)}
.btn__t{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.arr{transition:transform .6s var(--expo)}
.btn:hover .arr,.btn:focus-visible .arr{transform:translateX(6px)}
.btn:hover::after{animation:sheen 1.1s var(--expo) 1}
@keyframes sheen{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}

/* ---------- ship linework ---------- */
.ship{position:absolute;z-index:4;left:50%;bottom:50px;width:110px;width:clamp(96px,calc(var(--pw) * .26),170px);margin-left:-55px;margin-left:calc(clamp(96px,calc(var(--pw) * .26),170px) / -2);height:auto;color:var(--brass);opacity:.55;pointer-events:none}
.ship path{stroke-width:1.15}
.ship__bob{transform-origin:50% 90%}
.ship__star{stroke:var(--brass-hi)}

.foot{grid-column:1;grid-row:4;position:relative;z-index:6;text-align:center;padding:0 24px 16px}
.foot small{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(201,211,230,.72)}

/* short stacked windows: tighter, no ship */
@media (max-height:760px){
  .globe-wrap{width:70vw;width:calc(var(--pw) * .8);width:min(calc(var(--pw) * .8),calc(var(--vh) * 38))}
  .h1{font-size:28px;font-size:calc(var(--pw) * .072);margin-bottom:14px}
  .btn{min-height:48px}
  .ship{display:none}
}

/* ---------- wide windows (landscape, 6:5 or wider, 700 px+): the full viewport, three balanced columns ----------
   headline + button on the left, the astrolabe centred (it scales with the window height), the ship on the right,
   ATLAS top-centre and the footer bottom-centre. --hs is the headline size; --pw is derived from it so every ratio-based
   size (button, wordmark, ship) follows. Phones and portrait tablets keep the panel layout above. */
@media (min-aspect-ratio:6/5) and (min-width:700px){
  :root{--hs:24px;--pw:290px}
  @supports (width:min(1px,2px)) and (width:clamp(1px,2px,3px)){
    :root{--hs:clamp(20px,min(calc(var(--vh) * 5),calc((44vw - var(--S) / 2) / 6.6)),120px);--pw:calc(var(--hs) / .083)}
  }
  .stage{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:center;
    background:#0B1D3A;background:radial-gradient(75% 95% at 50% 50%,#133463 0%,#0B1D3A 62%,#071328 100%),#0B1D3A}
  .top{grid-column:1 / -1;grid-row:1;padding:18px 24px 0;padding-top:clamp(18px,calc(var(--vh) * 2.8),46px)}
  .brand img{width:96px;width:clamp(96px,calc(var(--pw) * .2),240px)}
  .globe-wrap{grid-column:2;grid-row:2;width:50vw;width:var(--S);margin:0;align-self:center}
  .copy{grid-column:1;grid-row:2;align-self:center;justify-self:center;text-align:left;width:100%;padding:0 3vw;font-size:26px;font-size:var(--hs);max-width:calc(9.4em + 6vw)}
  .h1{font-size:1em;max-width:9.4em;margin:0 0 .62em;line-height:1.06}
  .actions{justify-content:flex-start}
  .btn{min-height:44px;min-height:max(44px,calc(var(--pw) * .138))}
  .ship{display:block;position:relative;grid-column:3;grid-row:2;left:auto;bottom:auto;margin:0;align-self:center;justify-self:center;width:140px;width:clamp(100px,calc(var(--pw) * .5),520px);max-width:62%;height:auto}
  .foot{grid-column:1 / -1;grid-row:3;padding:0 24px 14px;padding-bottom:clamp(14px,calc(var(--vh) * 2.4),40px)}
  .foot small{font-size:11.5px;font-size:clamp(11.5px,calc(var(--pw) * .03),20px)}
  @media (max-height:520px){
    @supports (width:min(1px,2px)){:root{--S:min(calc(var(--vh) * 68),50vw)}}
    .top{padding-top:12px}.foot{padding-bottom:8px}
  }
}

/* ---------- motion: long, overlapping, silky (only when allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .frame path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.2s var(--silk) .1s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  html.js .brand{opacity:0;animation:rise 2s var(--silk) .5s forwards}
  @keyframes rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
  html.js .sky{opacity:0;animation:fadeIn 4s ease .3s forwards}
  @keyframes fadeIn{to{opacity:1}}
  /* headline: words drift up out of a soft blur, then a slow gold light passes over them */
  html.js .w>span{opacity:0;transform:translate3d(0,.45em,0);animation:word 2.1s var(--silk) calc(.9s + var(--i)*.13s) forwards}
  @keyframes word{to{opacity:1;transform:none}}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    html.js .w>span{background-color:#fff;background-image:linear-gradient(100deg,rgba(255,255,255,0) 0 40%,#ecce72 50%,rgba(255,255,255,0) 60% 100%);background-position:150% 0;background-size:300% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
      animation:word 2.1s var(--silk) calc(.9s + var(--i)*.13s) forwards,sweep 10s var(--silk) calc(3.6s + var(--i)*.16s) infinite}
  }
  @keyframes sweep{0%{background-position:150% 0}22%,100%{background-position:-50% 0}}
  html.js .actions{opacity:0;transform:translate3d(0,18px,0);animation:rise 2s var(--silk) 2.1s forwards}
  html.js .btn--gold::after{animation:idleSheen 9s var(--silk) 5s infinite}
  @keyframes idleSheen{0%,72%{background-position:160% 0,0 0}96%,100%{background-position:-60% 0,0 0}}
  html.js .globe-wrap{opacity:0;animation:fadeIn 2.4s var(--silk) .5s forwards}
  html.js .foot{opacity:0;animation:fadeIn 2.4s ease 3.4s forwards}
  /* ship: lines draw in one after another, then it rides the swell */
  html.js .ship path:not(.ship__wake){stroke-dasharray:1;stroke-dashoffset:1;animation:trace 3.2s var(--silk) calc(1.8s + var(--k,0)*.22s) forwards}
  @keyframes trace{to{stroke-dashoffset:0}}
  html.js .ship__wake{opacity:0;animation:fadeWake 3s ease 3.8s forwards,wake 9s linear infinite}
  @keyframes fadeWake{to{opacity:.55}}
  @keyframes wake{to{stroke-dashoffset:-27}}
  .ship__bob{animation:bob 9s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translate3d(0,0,0) rotate(-1.4deg)}50%{transform:translate3d(0,-5px,0) rotate(1.6deg)}}
}
@media (prefers-reduced-motion:reduce){
  .btn,.arr{transition:none}
  }