/* ATLAS point-cloud pages — shared chrome */
@font-face{font-family:'Neue Haas';src:url('../../assets/NHaasGroteskDSPro-25Th.otf');font-weight:100}
@font-face{font-family:'Neue Haas';src:url('../../assets/NHaasGroteskDSPro-45Lt.otf');font-weight:300}
@font-face{font-family:'Neue Haas';src:url('../../assets/NHaasGroteskDSPro-55Rg.otf');font-weight:400}
@font-face{font-family:'Neue Haas';src:url('../../assets/NHaasGroteskDSPro-65Md.otf');font-weight:500}

html,body{margin:0;height:100%;background:#000;overflow:hidden;
  font-family:'Neue Haas',-apple-system,sans-serif;color:#fff;
  cursor:crosshair;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
canvas{display:block}

/* ---------- loading ---------- */
#load{position:fixed;inset:0;background:#000;z-index:40;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .7s ease}
#load.done{opacity:0;pointer-events:none}
#load .brand{font-weight:100;font-size:13px;letter-spacing:.42em;opacity:.5;
  margin-right:-.42em}
#load .name{font-weight:300;font-size:26px;letter-spacing:.18em;margin-right:-.18em}
#load .bar{width:210px;height:1px;background:rgba(255,255,255,.14);overflow:hidden}
#load .bar i{display:block;height:100%;width:0%;background:rgba(255,255,255,.85);
  transition:width .25s ease}
#load .stat{font-weight:300;font-size:11px;letter-spacing:.14em;opacity:.42;
  font-variant-numeric:tabular-nums;margin-right:-.14em}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:20;font-weight:300;letter-spacing:.14em;
  font-size:12px;line-height:1}
#crumb{top:20px;left:22px;opacity:.62;text-decoration:none;color:#fff;
  transition:opacity .2s}
#crumb:hover{opacity:1}
#crumb b{font-weight:500}
#tools{top:14px;right:14px;display:flex;gap:2px}
#tools div{width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;opacity:.5;cursor:pointer;transition:opacity .2s;
  font-size:15px;font-weight:300}
#tools div:hover{opacity:1}
#hint{bottom:34px;left:50%;transform:translateX(-50%);opacity:.4;
  font-size:11px;white-space:nowrap;transition:opacity .8s;text-align:center;
  pointer-events:none}
#hint.gone{opacity:0}
#stat2{bottom:14px;right:16px;opacity:.32;font-size:10px;
  font-variant-numeric:tabular-nums;pointer-events:none;text-align:right}

/* ---------- timeline scrubber ---------- */
#tl{position:fixed;left:0;right:0;bottom:0;height:34px;z-index:22;
  cursor:pointer}
#tl .rail{position:absolute;left:0;right:0;bottom:12px;height:1px;
  background:rgba(255,255,255,.16);transition:height .15s,bottom .15s}
#tl .fill{position:absolute;left:0;bottom:12px;height:1px;width:0%;
  background:rgba(255,255,255,.85);transition:height .15s,bottom .15s}
#tl:hover .rail,#tl.drag .rail,#tl:hover .fill,#tl.drag .fill{height:3px;bottom:11px}
#tl .tick{position:absolute;bottom:18px;transform:translateX(-50%);
  font-size:10px;letter-spacing:.12em;opacity:0;transition:opacity .2s;
  font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
#tl:hover .tick,#tl.drag .tick{opacity:.75}

/* ---------- radial menu ---------- */
#radial{position:fixed;inset:0;z-index:30;display:none}
#radial.open{display:block}
#glass{position:absolute;width:330px;height:330px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.94);opacity:0;
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.075),rgba(255,255,255,.015) 55%,rgba(0,0,0,.05)),
    rgba(14,16,22,.28);
  -webkit-backdrop-filter:blur(22px) saturate(1.5) brightness(1.08);
  backdrop-filter:blur(22px) saturate(1.5) brightness(1.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -18px 42px rgba(0,0,0,.22),0 14px 60px rgba(0,0,0,.5);
  transition:transform .16s cubic-bezier(.2,.9,.3,1.2),opacity .14s ease}
#radial.open #glass{transform:translate(-50%,-50%) scale(1);opacity:1}
#glass:after{content:'';position:absolute;inset:8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.05)}
.ritem{position:absolute;transform:translate(-50%,-50%);color:#fff;
  padding:9px 12px;white-space:nowrap;cursor:pointer;text-align:center;
  font-weight:300;font-size:12.5px;letter-spacing:.1em;opacity:0;
  transition:opacity .18s ease}
#radial.open .ritem{opacity:.92}
.ritem small{display:block;font-size:9.5px;letter-spacing:.16em;opacity:.55;
  margin-top:3px;font-weight:300}
.ritem:hover{opacity:1!important}
.ritem:hover small{opacity:.8}
#radial.dial .ritem{opacity:.22}
#radial.dial .ritem.active{opacity:1}
#dialv{position:absolute;transform:translate(-50%,-50%);text-align:center;
  pointer-events:none;display:none}
#radial.dial #dialv{display:block}
#dialv .v{font-weight:100;font-size:30px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
#dialv .l{font-weight:300;font-size:10px;letter-spacing:.24em;opacity:.55;
  margin-top:6px;text-transform:uppercase}
#arc{position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  display:none}
#radial.dial #arc{display:block}

/* ---------- help ---------- */
#help{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center}
#help.open{display:flex}
#help .card{display:grid;grid-template-columns:auto auto;gap:13px 34px;
  font-size:12.5px;font-weight:300;letter-spacing:.1em;align-items:baseline}
#help .card u{text-decoration:none;opacity:.45;text-align:right;display:block;
  font-size:11px}
#help .card span{opacity:.95}
#help .t{grid-column:1/3;font-size:10px;letter-spacing:.3em;opacity:.4;
  margin:14px 0 2px;text-transform:uppercase}
#help .t:first-child{margin-top:0}

@media (max-width:640px){
  #crumb{top:16px;left:16px}
  #hint{bottom:28px;font-size:10px;width:88vw;white-space:normal;line-height:1.7}
  #glass{width:300px;height:300px}
}