@font-face{font-family:"IT";src:url(fonts/it.woff2) format("woff2");font-weight:100 900;font-display:block}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#000}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:#000;color:#fff;font:600 9px/1.1 "IT",ui-sans-serif,system-ui,sans-serif;letter-spacing:-.01em;text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;cursor:default;user-select:none;-webkit-user-select:none}
a{color:inherit;text-decoration:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.app{position:fixed;inset:0;height:100vh;height:100dvh}
/* chrome text */
.top,.bot{position:fixed;left:0;right:0;z-index:10;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;opacity:0;transition:opacity .6s ease}
.top{top:0;margin-top:10px}
.bot{bottom:0;margin-bottom:10px}
.ready .top,.ready .bot{opacity:1}
.row{display:flex;gap:10px;align-items:center;justify-content:center;white-space:nowrap;pointer-events:auto}
.row a,.row span{display:block;padding:6px 0}
.row a{transition:opacity .2s ease}
.row a:hover{opacity:.55}
.dim{color:#727272}
.sep{color:#fff}
.sites a.cur{color:#727272;pointer-events:none}
/* stage */
.stage{position:absolute;left:0;right:0;top:80px;bottom:80px;display:flex;align-items:stretch;justify-content:center;overflow:hidden;touch-action:pan-y pinch-zoom;outline:none;-webkit-touch-callout:none}
.track{display:flex;flex:none;height:100%;transform:translate3d(var(--sx,0px),0,0)}
.track.ease{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.s{position:relative;flex:none;width:8px;height:100%;background-image:url(img/atlas2.webp);background-repeat:no-repeat;background-size:20000% 100%;image-rendering:pixelated;image-rendering:crisp-edges;opacity:0;transform-origin:50% 50%}
.s.on{opacity:1}
.intro .s.on{animation:print .1s cubic-bezier(.25,.46,.45,.94) both}
@keyframes print{from{opacity:0;transform:scaleX(4)}to{opacity:1;transform:none}}
.s.open{width:40vw;min-width:40vw;max-width:1400px;padding:40px;background:none;opacity:1;transform:none;animation:none;z-index:2}
/* viewer */
.v{position:absolute;inset:40px;display:none}
.s.open .v{display:block}
.v canvas,.v img{position:absolute;display:block;left:0;top:0}
.v img{opacity:0}
.v.sharp img{opacity:1}
.v.sharp canvas{opacity:0}
.cap{position:absolute;left:0;right:0;bottom:-26px;display:flex;justify-content:center;gap:10px;white-space:nowrap;pointer-events:auto}
.cap a{padding:6px 0}
.cap .dim{padding:6px 0}
.cap a:hover{opacity:.55}
.v .hit{position:absolute;cursor:pointer}
/* badge */
.badge{position:fixed;inset:0;margin:auto;width:fit-content;height:fit-content;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:9px;padding:10px;background:#000;text-align:center;opacity:0;transform:translateX(40px) scale(0);pointer-events:auto}
.ready .badge{animation:bin .2s cubic-bezier(.25,.46,.45,.94) forwards}
.badge{transition:opacity .25s ease,visibility .25s}
.touchopen .badge{opacity:0!important;visibility:hidden}
@keyframes bin{to{opacity:1;transform:none}}
.badge b{display:block;font:700 30px/60px "IT",sans-serif;letter-spacing:-.045em;text-transform:none;color:#fff;height:60px}
.badge:hover b{opacity:.8}
/* preloader */
.pre{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease-out}
.pre i{display:block;width:200px;height:2px;background:#ffffff33;overflow:hidden}
.pre i::after{content:"";display:block;height:100%;width:var(--p,0%);background:#fff;transition:width .2s linear}
.pre.out{opacity:0;pointer-events:none}
@media (max-width:767px){
  .stage{left:20px;right:20px}
  .s{width:4px;background-image:url(img/atlas1.webp)}
  .s.open{width:60vw;min-width:40vw;padding:20px}
  .v{inset:20px}
  .cap{bottom:-18px}
  .badge b{font-size:22px;line-height:40px;height:40px}
  .badge{gap:7px}
}
@media (prefers-reduced-motion:reduce){.intro .s.on{animation:none}.ready .badge{animation-duration:.01s}}

.stage:focus-visible{box-shadow:inset 0 0 0 1px #ffffff40}
a:focus-visible{outline:1px solid #fff;outline-offset:3px}

/* S5-TAP */
.sites a{padding:6px 5px;margin:0 -5px} .row a{position:relative} .row a::after{content:"";position:absolute;inset:-6px -2px}