/* =========================================================
   SHARED PROJECT INDEX
   Used by BOTH Work and Experiments.
   Change this file once -> both pages change.
   ========================================================= */

:root{
  --index-ink:#111;
  --index-soft:rgba(17,17,17,.46);
  --index-line:rgba(17,17,17,.19);

  --index-stage-left:7.4vw;
  --index-stage-right:5.2vw;
  --index-stage-top:20.8vh;
  --index-stage-bottom:16vh;

  --index-list-width:55%;
  --index-row-height:76px;
  --index-row-step:86px;

  --index-highlight-width:min(31vw,500px);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

body{
  color:var(--index-ink);
  font-family:Arial,Helvetica,sans-serif;
  animation:indexPageEnter 320ms cubic-bezier(.22,.72,.18,1) both;
}

.page{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.project-index-stage{
  position:absolute;
  left:var(--index-stage-left);
  right:var(--index-stage-right);
  top:var(--index-stage-top);
  bottom:var(--index-stage-bottom);
  z-index:10;
}

.project-index-list{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--index-list-width);
}

.project-index-row{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:var(--index-row-height);
  transform:translateY(-50%);
  border-bottom:1px solid var(--index-line);
  transition:
    transform 620ms cubic-bezier(.22,.72,.18,1),
    opacity 420ms ease,
    filter 620ms cubic-bezier(.22,.72,.18,1);
  will-change:transform,opacity,filter;
}

.project-index-inner{
  position:absolute;
  left:0;
  right:0;
  bottom:9px;
  display:flex;
  align-items:flex-end;
  gap:24px;
  cursor:pointer;
}

.project-index-number{
  position:absolute;
  left:0;
  top:-1px;
  font-size:10px;
  line-height:1;
  color:var(--index-soft);
  letter-spacing:.01em;
}

.project-index-title{
  margin:0;
  flex:0 0 auto;
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  line-height:.92;
  font-weight:400;
  letter-spacing:-.025em;
  white-space:nowrap;
}

.project-index-meta{
  min-width:0;
  padding-bottom:1px;
  font-size:10px;
  line-height:1.18;
  white-space:normal;
  max-width:285px;
}

.project-index-row[data-distance="0"]{
  opacity:1;
  filter:blur(0);
  z-index:10;
}

.project-index-row[data-distance="1"],
.project-index-row[data-distance="-1"]{
  opacity:.50;
  filter:blur(1.5px);
  z-index:8;
}

.project-index-row[data-distance="2"],
.project-index-row[data-distance="-2"]{
  opacity:.22;
  filter:blur(3px);
  z-index:6;
}

.project-index-row[data-distance="3"],
.project-index-row[data-distance="-3"]{
  opacity:.07;
  filter:blur(4.2px);
  z-index:4;
}

.project-index-row.is-hidden{
  opacity:0;
  filter:blur(5px);
  pointer-events:none;
}

.project-index-highlight{
  position:absolute;
  right:0;
  top:50%;
  width:var(--index-highlight-width);
  aspect-ratio:1/1;
  margin:0;
  transform:translateY(-50%);
  overflow:hidden;
  cursor:pointer;
}

.project-index-highlight img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transform:scale(1.018);
  filter:blur(1.5px);
  transition:
    opacity 360ms ease,
    transform 620ms cubic-bezier(.22,.72,.18,1),
    filter 460ms ease;
}

.project-index-highlight img.is-visible{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
}

@keyframes indexPageEnter{
  from{opacity:0}
  to{opacity:1}
}

body.is-leaving{
  opacity:0;
  transition:opacity 240ms ease;
  animation:none;
}

@media(max-width:1050px) and (min-width:801px){
  :root{
    --index-list-width:52%;
    --index-highlight-width:min(33vw,420px);
  }

  .project-index-title{font-size:31px}
  .project-index-meta{max-width:180px}
}

@media(max-width:800px){
  :root{
    --index-stage-left:20px;
    --index-stage-right:20px;
    --index-stage-top:17vh;
    --index-stage-bottom:14vh;
    --index-list-width:100%;
    --index-row-step:80px;
  }

  .project-index-list{bottom:43%}

  .project-index-title{
    font-size:26px;
    white-space:normal;
  }

  .project-index-meta{
    font-size:9px;
    max-width:160px;
  }

  .project-index-inner{gap:12px}

  .project-index-highlight{
    left:0;
    right:auto;
    top:auto;
    bottom:0;
    width:min(62vw,280px);
    transform:none;
  }
}


.project-index-row.is-wrap-teleport{
  opacity:0 !important;
  transition:none !important;
}