/* .works-page {
  overflow: hidden;

  --works-center-width: var(--content-width);
  --works-side-width: 30vw;
} */

.works-page {
  overflow: hidden;

  --works-center-width: var(--content-width);
  --works-sidebar-ratio: 35%;
  --works-project-ratio: 65%;
  --works-progress-gap: 2.2rem;
}

.works-page .cursor {
  display: block;
}

.works-page .works-header-name {
  opacity: 1;
}

.works-page header > #site-name,
.works-page header > nav,
.works-page header > .menu-toggle,
.works-page .works-sidebar > *,
.works-page .work-card {
  opacity: 0;
  animation: portfolio-enter 0.7s ease-out forwards;
}

.works-page .works-header-name,
.works-page .works-progress,
.works-page .works-copyright,
.works-page footer {
  opacity: 0;
  animation: portfolio-fade 0.8s ease-out forwards;
}

.works-page header > nav { animation-delay: 0.08s; }
.works-page .works-header-name { animation-delay: 0.12s; }
.works-page .works-sidebar > *:nth-child(1) { animation-delay: 0.12s; }
.works-page .works-sidebar > *:nth-child(2) { animation-delay: 0.18s; }
.works-page .works-sidebar > *:nth-child(3) { animation-delay: 0.24s; }
.works-page .work-card:nth-child(1) { animation-delay: 0.16s; }
.works-page .work-card:nth-child(2) { animation-delay: 0.22s; }
.works-page .work-card:nth-child(3) { animation-delay: 0.28s; }
.works-page .work-card:nth-child(4) { animation-delay: 0.34s; }
.works-page .work-card:nth-child(5) { animation-delay: 0.4s; }
.works-page .works-progress,
.works-page .works-copyright,
.works-page footer { animation-delay: 0.25s; }

/* Works page header / footer width */

.works-page header,
.works-page footer {
  width: var(--works-center-width);
}

/* Layout */

.works-page .works-layout {
  position: relative;
  z-index: 10;

  width: var(--works-center-width);
  height: calc(100dvh - var(--header-height) - var(--footer-height));

  margin-top: var(--header-height);
  margin-right: auto;
  margin-bottom: var(--footer-height);
  margin-left: auto;

  display: grid;
  grid-template-columns: 35% 65%;
  align-items: center;

  padding: 0;
}

/* Sidebar */

.works-page .works-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;

  padding-left: 4vw;
}

.works-page .work-filter {
  position: relative;
  width: fit-content;
  border: 0;
  background: transparent;

  font-family: var(--mono);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--green);

  cursor: none;
  opacity: 0.85;
}

.works-page .work-filter.active,
.works-page .work-filter:hover {
  opacity: 1;
}

.works-page .work-filter::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
}

.works-page .work-filter.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Fixed Scroll Progress */

/* .works-page .works-progress {
  position: fixed;
  top: 48.5%;
  /* left: calc(var(--works-side-width) / 2); 
  left: 34rem;
  z-index: 60;

  transform: translate(-50%, -50%);
  pointer-events: none;
} */

.works-page .works-progress {
  position: fixed;
  top: 48.5%;

  left: calc(
    (100vw - var(--works-center-width)) / 2 + var(--works-center-width) * 0.35 -
      var(--works-progress-gap)
  );

  z-index: 60;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.works-page .works-progress-bar {
  position: relative;

  width: 1px;
  height: 400px;

  background: rgba(3, 112, 53, 0.25);
  overflow: hidden;
}

.works-page .works-progress-fill {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 0%;

  background: var(--green);
  transition: height 0.12s linear;
}

.works-page .works-progress-number {
  position: absolute;

  top: 50%;
  left: -35px;

  width: 4ch;
  text-align: center;

  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center center;

  font-family: var(--mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;

  color: var(--green);
  white-space: nowrap;
}

/* Fixed Copyright */

.works-page .works-copyright {
  position: fixed;
  top: 50%;

  right: calc((100vw - var(--content-width)) / 4);

  z-index: 60;

  transform: translate(50%, -50%) rotate(-90deg);
  transform-origin: center center;

  font-family: var(--mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;

  color: var(--green);
  white-space: nowrap;
  pointer-events: none;
}

/* Project Scroll */

.works-page .works-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;

  padding: 0 4vw 0 4vw;
  scrollbar-width: none;
}

.works-page .works-scroll::-webkit-scrollbar {
  display: none;
}

.works-page .work-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 1.6rem;
  align-items: center;

  height: calc((100dvh - var(--header-height) - var(--footer-height)) / 2);
  min-height: 0;
  padding: 0 1rem 0 0;

  /* border-bottom: 1px solid var(--green); */

  color: var(--green);
  text-decoration: none;
  cursor: none;
}

.works-page .work-card:first-child {
  border-top: none;
}

.works-page .work-card:last-child {
  border-bottom: none;
}

/* Media */

.works-page .work-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  background: transparent;
}

.works-page .work-thumb img,
.works-page .work-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    filter 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}

.works-page .work-card:hover .work-thumb img,
.works-page .work-card:hover .work-thumb video {
  filter: blur(0);
  opacity: 1;
  transform: scale(1.02);
}

/* Text */

.works-page .work-info {
  min-height: 140px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.works-page .work-info h2 {
  margin: 0;

  font-family: var(--mono);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.02em;

  color: var(--green);
}

.works-page .work-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: end;
}

.works-page .work-meta,
.works-page .work-date {
  margin: 0;

  font-size: 12px;
  line-height: 1.5;
  opacity: 0.65;
}

.works-page .work-date {
  text-align: right;
}

/* PC Fade */

@media (min-width: 769px) {
  .works-page .works-scroll {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* Mobile */

@media (max-width: 768px) {
  .works-page {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .works-page header,
  .works-page footer {
    width: var(--content-width);
  }

  .works-page .cursor {
    display: none !important;
  }

  .works-page .works-layout {
    width: var(--content-width);
    height: auto;
    min-height: auto;

    display: block;
    margin: 0 auto;

    padding-top: calc(var(--header-height) + 1.8rem);
    padding-right: 0;
    padding-bottom: calc(var(--footer-height) + 2rem);
    padding-left: 0;
  }

  .works-page .works-sidebar {
    position: relative;
    top: auto;
    z-index: 10;

    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0;

    background: transparent;
  }

  .works-page .work-filter {
    font-size: 11px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.05em;

    cursor: auto;
    opacity: 0.85;
  }

  .works-page .works-progress,
  .works-page .works-copyright {
    display: none;
  }

  .works-page .works-scroll {
    width: 100%;
    height: auto;
    overflow: visible;

    padding: 0;

    mask: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    -webkit-mask-image: none !important;
  }

  .works-page .work-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    width: 100%;
    height: auto;
    min-height: auto;

    padding: 1.4rem 0;
    border-bottom: 1px solid var(--green);

    cursor: auto;
  }

  .works-page .work-card:first-child {
    padding-top: 0;
  }

  .works-page .work-card:last-child {
    border-bottom: none;
  }

  .works-page .work-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .works-page .work-thumb img,
  .works-page .work-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: none;
    opacity: 1;
    transform: none;
  }

  .works-page .work-card:hover .work-thumb img,
  .works-page .work-card:hover .work-thumb video {
    transform: none;
  }

  .works-page .work-info {
    min-height: auto;
    gap: 1.2rem;
  }

  .works-page .work-info h2 {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.2;
  }

  .works-page .work-bottom {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }

  .works-page .work-meta,
  .works-page .work-date {
    font-size: 11px;
    line-height: 1.4;
  }
}