#jf-lab {

--bg: #2447D8;
  --fg: #111;

  position: relative;

  width: 100%;

  /*
   * V2:
   * 2.4 viewport transition
   */

  min-height: 280vh;

  background:
    var(--bg);

  color:
    var(--fg);

  overflow-x: hidden;

}


/* ==========================================
   UI
   ========================================== */

#jf-lab .jf-ui {

  position: fixed;

  inset: 0;

  z-index: 1000;

  pointer-events: none;

  display: flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  padding:
    18px 20px;

  font-size:
    11px;

  line-height:
    1;

}


/* ==========================================
   LOADER
   ========================================== */

#jf-lab .jf-loader {

  position: fixed;

  inset: 0;

  z-index: 2000;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    var(--bg);

  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;

}


#jf-lab .jf-loader.is-hidden {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}


#jf-lab .jf-loader-grid {

  width: 20px;
  height: 20px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  grid-template-rows:
    1fr 1fr;

  gap: 1px;

}


#jf-lab .jf-loader-grid i {

  display: block;

  background:
    transparent;

  border:
    1px solid currentColor;

  transition:
    background 0.12s ease;

}


#jf-lab .jf-loader-grid i.active {

  background:
    currentColor;

}


/* ==========================================
   STAGE
   ========================================== */

#jf-lab .jf-stage {

  position: fixed;

  inset: 0;

  width: 100%;

  height: 100vh;

  overflow: visible;

}


/* ==========================================
   PROJECT
   ========================================== */

#jf-lab .jf-project {

  position: absolute;

  left: 0;
  top: 50%;

  /*
   * Smaller projects.
   */

  width: 27vw;
  height: 35vw;

  max-width:
    480px;

  max-height:
    600px;

  transform-origin:
    center center;

  cursor:
    none;

  will-change:
    transform;

}


/* ==========================================
   NUMBER
   ========================================== */

#jf-lab .jf-number {
color: white;
  
  position: absolute;

  left: 50%;
  top: 50%;

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

  z-index: 4;

  /*
   * Much smaller than V1.
   */

  font-size:
    clamp(
      15px,
      1.35vw,
      25px
    );

  line-height:
    1;

  transition:
    opacity 0.15s linear;

}


/* ==========================================
   CANVAS
   ========================================== */

#jf-lab canvas {

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  opacity: 0;

  pointer-events:
    none;

}


/* ==========================================
   META
   ========================================== */

#jf-lab .jf-meta {

  position: absolute;

  left: 0;

  top:
    calc(100% + 8px);

  width: 100%;

  display: flex;

  justify-content:
    space-between;

  font-size:
    9px;

  line-height:
    1;

  opacity: 0;

  transition:
    opacity 0.25s ease;

  pointer-events:
    none;

}


#jf-lab .jf-project.is-hovered
.jf-meta {

  opacity: 1;

}


/* ==========================================
   CURSOR
   ========================================== */

#jf-lab .jf-cursor {

  position: fixed;

  left: 0;
  top: 0;

  width: 12px;
  height: 12px;

  margin-left: -6px;
  margin-top: -6px;

  z-index: 3000;

  pointer-events:
    none;

  mix-blend-mode:
    difference;

  will-change:
    transform;

}


#jf-lab .jf-cursor::before,
#jf-lab .jf-cursor::after {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  background:
    white;

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

}


#jf-lab .jf-cursor::before {

  width: 12px;
  height: 1px;

}


#jf-lab .jf-cursor::after {

  width: 1px;
  height: 12px;

}


/* ==========================================
   END OF INDEX
   ========================================== */

#jf-lab .jf-end {

  position: absolute;

  left: 0;

  top:
    240vh;

  width: 100%;

  height:
    10vh;

  z-index: 50;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #000;

  color:
    #fff;

  opacity: 0;

  pointer-events:
    none;

}


#jf-lab .jf-end-inner {

  width: 100%;

  padding:
    0 20px;

  display: flex;

  justify-content:
    space-between;

  font-size:
    10px;

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 700px) {

  #jf-lab {

    min-height:
      220vh;

  }


  #jf-lab .jf-ui {

    padding:
      14px;

    font-size:
      10px;

  }


  #jf-lab .jf-project {

    width:
      55vw;

    height:
      70vw;

  }


  #jf-lab .jf-number {

    font-size:
      18px;

  }


  #jf-lab .jf-cursor {

    display:
      none;

  }


  #jf-lab .jf-meta {

    font-size:
      8px;

  }


 .jf-end {
  position: absolute;
  top: 180vh;
  left: 0;
  width: 100%;
  height: 100vh;

  background: #050505;
  color: #ffffff;

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

  padding: 0 22px;
  box-sizing: border-box;

  z-index: 20;
}


  #jf-lab .jf-end-inner {

    padding:
      0 14px;

    font-size:
      8px;

  }

}