:root {
  --o2: cubic-bezier(0.25,0.46,0.45,0.94);
  --o3: cubic-bezier(0.215,0.61,0.355,1);
  --o6: cubic-bezier(0.19,1,0.22,1);
}
*,*::before,
*::after {
  margin:0;
  padding:0;
  border:0;
  box-sizing:border-box;
}
a,div,span,ul,li,p,nav,body,html{margin:0;padding:0;border:0;font:inherit;font-size:100%}
ul,li{list-style:none}
a{color:inherit;text-decoration:none;display:block}
html{-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;cursor:default;-webkit-tap-highlight-color:transparent}

body {
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  background:#141414;
  color:#fff;
  height:100vh;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

/* LOADER */
#load{position:fixed;inset:0;z-index:9996;display:flex;align-items:center;justify-content:center;background:#141414;transition:opacity 1s var(--o2),pointer-events 0s 1s}
#load.done{opacity:0;pointer-events:none}
#load-no{position:relative;letter-spacing:.05em;overflow:hidden;font-size:min(1.6667vh,.9375vw);line-height:min(2.0833vh,1.1719vw)}
#load-no div{will-change:transform;transition:transform .8s var(--o6)}
#load.done #load-no div{transform:translate3d(0,-110%,0)}

/* NAV */

#nav {
  position:fixed;
  z-index:9995;
  top:37px;
  left:0;
  width:100%;
  font-size:16px;
  line-height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  mix-blend-mode:difference;
}

#nav div {
  margin:0 22px;
  white-space:nowrap;
  overflow:hidden;
}
.nav-a {
  opacity:0;
  will-change:transform;
  transform:translate3d(0,110%,0);
  pointer-events:all;
  transition:opacity 300ms var(--o2);
}
.nav-a.on,.nav-a:hover {
  opacity:1;
}

/* GALLERY */
#gallery {
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:420px;
  transform:translateY(-50%);
  overflow:hidden;
  cursor:grab
}
#gallery.grabbing {
  cursor:grabbing;
}
#track {
  display:flex;
  gap:22px;
  padding:0 calc(50% - 135px);
  height:100%;
  align-items:center;
  position:absolute;
  left:0;
  top:0;
  will-change:transform;
}

/* CARD */
.card{
  flex:0 0 270px;height:405px;
  overflow:hidden;
  position:relative;cursor:pointer;
  background-color:#1a1a1a;
  background-size:cover;
  background-position:50% 50%;
}
/* CROSSES */
#crosses{position:fixed;inset:0;z-index:25;pointer-events:none}
.cross{position:absolute;top:calc(50% - 11px);width:22px;height:22px;fill:#fff;opacity:0;cursor:pointer;pointer-events:none;transition:opacity .4s var(--o2)}
.cross:nth-child(1){left:16.1979vw}
.cross:nth-child(2){right:16.1979vw}
#crosses.active .cross{opacity:.5;pointer-events:all}
#crosses.active .cross:hover{opacity:1}
#crosses.active .cross.edge{opacity:.15;pointer-events:none}

/* PAGINATION */
#pgn{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);font-size:16px;line-height:20px;z-index:4;pointer-events:none;display:flex;align-items:center;opacity:0}
#pgn-l-w{position:relative;height:20px;width:22px;overflow:hidden}
#pgn-l{position:absolute;top:0;left:0;will-change:transform;text-align:center;width:100%}
#pgn-l div{width:100%}
#pgn-m{width:24px;text-align:center}
#pgn-r{width:22px;text-align:center}

/* OVERLAY */
#bg{position:fixed;inset:0;background:rgba(0,0,0,0);transition:background .55s var(--o3);pointer-events:none;z-index:5}
#bg.dark{background:rgba(0,0,0,.92)}

/* CLONES */
#clones{position:fixed;inset:0;pointer-events:none;z-index:10}

/* PROJECT TITLE */
#title{position:fixed;left:50%;transform:translateX(-50%);z-index:20;text-align:center;opacity:0;pointer-events:none;transition:opacity .5s var(--o3)}
#title.show{opacity:1;pointer-events:auto}
#title-link{display:block;letter-spacing:-.015em;color:#fff;text-decoration:none;transition:opacity 300ms var(--o2)}
#title-link:hover{opacity:.6}

/* REVEAL (text) */
.r-outer{overflow:hidden}
.r-block,.r-line{display:block}
.r-word{display:inline-block;vertical-align:top}
.r-inner{will-change:transform;display:inline-block}
.r-block>.r-inner,.r-line>.r-inner{display:block}
@media(min-aspect-ratio:16/9){#title{bottom:calc(50% - 3.7037vh - 30px)}#title-link{font-size:5.5556vh;line-height:7.5926vh}}
@media(max-aspect-ratio:16/9){#title{bottom:calc(50% - 2.0833vw - 30px)}#title-link{font-size:3.125vw;line-height:4.2708vw}}