/* =====================================================
   NEW
===================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  width:100%;
  min-height:100%;
  overflow-y:scroll;
  overflow-x:hidden;
  background:#09090d;
}

body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  background:#09090d;
  color:#fff;
  -webkit-text-size-adjust:none;

  font-family:'SyneMono', monospace;
  font-size:11px;
  line-height:1.5;
}

body.is-preload *,
body.is-preload *::before,
body.is-preload *::after{
  animation:none !important;
  transition:none !important;
}

/* =====================================================
   FONT
===================================================== */

@font-face{
  font-family:'SyneMono';
  src:url('../../font/SyneMono-Regular.woff2') format('woff2');
  font-weight:normal;
  font-style:normal;
}

/* =====================================================
   WRAPPER
===================================================== */

#wrapper{
  position:relative;
  width:100%;
  overflow:hidden;
}

/* =====================================================
   GRID FIELD
===================================================== */

#main{
  position:relative;

  display:flex;
  flex-wrap:wrap;

  width:100%;

  opacity:0;
  transition:opacity 1.8s ease;
}

body:not(.is-preload) #main{
  opacity:1;
}

#main .thumb{
  position:relative;
  overflow:hidden;

  width:33.33333%;
  height:calc(40vh - 2em);
  min-height:20em;

  opacity:1;

  transition:
    opacity 1.25s ease-in-out;
}

#main .thumb .image{
  position:absolute;
  inset:0;

  display:block;

  width:100%;
  height:100%;

  overflow:hidden;

  text-decoration:none;

  -webkit-tap-highlight-color:transparent;

  touch-action:pan-y;
}

#main .thumb .image::before{
  content:"";
  position:absolute;

  top:50%;
  left:50%;

  width:calc(100% + 2px);
  height:calc(100% + 2px);

  transform:translate(-50%, -50%);

  background-image:var(--tile-bg);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;

  opacity:1;
}

/* =====================================================
   PRELOAD REVEAL
===================================================== */

body.is-preload #main .thumb{
  opacity:0;
  pointer-events:none;
}

#main .thumb:nth-child(1)  { transition-delay:0.65s; }
#main .thumb:nth-child(2)  { transition-delay:0.8s; }
#main .thumb:nth-child(3)  { transition-delay:0.95s; }
#main .thumb:nth-child(4)  { transition-delay:1.1s; }
#main .thumb:nth-child(5)  { transition-delay:1.25s; }
#main .thumb:nth-child(6)  { transition-delay:1.4s; }
#main .thumb:nth-child(7)  { transition-delay:1.55s; }
#main .thumb:nth-child(8)  { transition-delay:1.7s; }
#main .thumb:nth-child(9)  { transition-delay:1.85s; }
#main .thumb:nth-child(10) { transition-delay:2s; }
#main .thumb:nth-child(11) { transition-delay:2.15s; }
#main .thumb:nth-child(12) { transition-delay:2.3s; }

/* =====================================================
   LEAVING STATE
===================================================== */

body.leaving #main{
  opacity:0;

  transition:
    opacity 4s cubic-bezier(.4,0,.08,1);
}

/* =====================================================
   SIGNAL TILE
===================================================== */

.signal-text{
  position:absolute;
  inset:0;
  z-index:10;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  padding:24px;

  color:#fff;
  text-align:left;

  pointer-events:none;

  opacity:0;
  transition:opacity 1.2s ease;
}

.signal-cn{
  font-size:16px;
  line-height:1.4;
  letter-spacing:0.08em;

  opacity:0;
  transform:translateY(10px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

.signal-en{
  margin-top:6px;

  font-size:12px;
  line-height:1.4em;
  letter-spacing:0.08em;
  
  min-height:1.4em;

  opacity:0;
  transform:translateY(10px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

.signal-char{
  opacity:0;
  transition:opacity 0.9s cubic-bezier(.22,.61,.36,1);
  will-change:opacity;
}

.signal-char.visible{
  opacity:1;
}

/* =====================================================
   VEIL
===================================================== */

#veil{
  position:fixed;

  top:-2px;
  right:-2px;
  bottom:-2px;
  left:-2px;

  z-index:999999;

  background:#09090d;

  opacity:0;
  pointer-events:none;

  transition:opacity 1.4s ease;

  transform:translateZ(0);
}

/* =====================================================
   TITLE
===================================================== */

#site-title{
  float:left;

  padding-left:23px;
  padding-bottom:1px;

  font-family:Helvetica, Arial, sans-serif;
  font-size:13px;

  line-height:2;

  color:rgb(230,230,230);

  user-select:none;
  cursor:default;

  text-decoration:none;
}



/* =====================================================
   PRIVACY OVERLAY
===================================================== */

#privacy-overlay{
  position:fixed;
  inset:0;

  z-index:99;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(9,9,13,0.88);

  opacity:0;
  pointer-events:none;

  transition:opacity 1.2s ease;
}

#privacy-overlay.active{
  opacity:1;
  pointer-events:auto;
}

#privacy-content{
  width:min(460px, 82vw);

  font-family:'SyneMono', monospace;

  color:rgb(190,190,190);

  text-align:left;

  line-height:1.8;

  letter-spacing:0.04em;
}

.privacy-title{
  margin-bottom:28px;

  font-size:12px;
  
  color:rgb(222,222,222);

  letter-spacing:0.12em;
}

.privacy-text{
  font-size:12px;
}

.fine-dots{
  width:100%;
  height:1px;
  margin:28px 0;
  background-image:radial-gradient(
    circle,
    rgba(255,255,255,.82) 0.25px,
    transparent 0.5px
  );
  background-size:3px 1px;
  background-repeat:repeat-x;
}

#privacy-link{
  
  display:inline-block;
  float:right;

  text-align:right;

  padding-right:23px;
  padding-bottom:1px;

  font-family:Arial, sans-serif;
  font-size:13px;
  line-height:2;
  font-weight: 100;
  
  color:rgb(100,100,100);

  text-decoration:none;

}

#privacy-link:hover{
  color:rgb(150,150,150);
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media screen and (max-width:980px){

  #main .thumb{
    width:50%;
    height:calc(28.57143vh - 1.33333em);
    min-height:18em;
  }
}

@media screen and (max-width:480px){

  #main .thumb{
    width:100%;
    height:calc(40vh - 2em);
    min-height:18em;
  }

  body.leaving #main{
    transition:
      opacity 0.8s cubic-bezier(.4,0,.08,1);
  }

}