/* project section header view transition animation */
:root {
  --table-to-list-animation-time: 1.5s;
  --list-to-grid-animation-time: 1s;
  --grid-to-table-animation-time: 2s;
}

/* table view to list view */
@keyframes old-heading-one {
  from {
    transform: translateX(0) translateY(0) scale(1) rotate(0);
    opacity: 1;
  }

  to {
    transform: translateX(-100%) translateY(100%) scale(0) rotate3d(1, -5, 1, 90deg);
    opacity: 0;
  }
}

@keyframes old-heading-two {
  from {
    transform: translateX(0) translateY(0) scale(1) rotate(0);
    opacity: 1;
  }

  to {
    transform: translateX(-100%) translateY(-300%) scale(0) rotate3d(1, -5, 1, 90deg);
    opacity: 0;
  }
}

::view-transition-old(table-h1) {
  animation: old-heading-one var(--table-to-list-animation-time) ease-in-out forwards;
}

::view-transition-old(table-h2) {
  animation: old-heading-two var(--table-to-list-animation-time) ease-in-out forwards;
}

@keyframes new-heading {
  from {
    transform: translateX(-200%) translateY(200%) scale(2) rotate3d(1, -5, 1, -90deg);
    opacity: 0;
  }

  to {
    transform: translateX(0) translateY(0) scale(1) rotate(0);
    opacity: 1;
  }
}

::view-transition-new(list-h1),
::view-transition-new(list-h2) {
  animation: new-heading var(--table-to-list-animation-time) ease-in-out forwards;
}

@keyframes button-out {
  from {
    transform: translateX(0) scale(1) rotate3d(0, 0, 0, 0);
    opacity: 1;
  }

  to {
    transform: translateX(200%) scale(0) rotate3d(1, 1, 1, -90deg);
    opacity: 0;
  }
}

::view-transition-old(table-button) {
  animation: button-out var(--table-to-list-animation-time) ease-in-out forwards;
}

@keyframes button-in {
  from {
    transform: translateX(200%) scale(0) rotate3d(1, 1, 1, 90deg);
    opacity: 0;
  }

  to {
    transform: translateX(0) scale(1) rotate3d(0, 0, 0, 0);
    opacity: 1;
  }
}

::view-transition-new(list-button) {
  animation: button-in var(--table-to-list-animation-time) ease-in-out forwards;
}

/* end table view to list view */

/* start list view to grid view */
@keyframes move-top-out {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(250%);
  }

  30% {
    transform: translateY(200%);
  }

  40% {
    transform: translateY(250%);
  }

  60% {
    transform: translateY(300%);
  }

  70% {
    transform: translateY(300%);
  }

  100% {
    transform: translateY(-500px);
  }
}
::view-transition-old(list-h1),
::view-transition-old(list-h2),
::view-transition-old(list-button) {
  animation: move-top-out var(--list-to-grid-animation-time) ease-in-out forwards;
}

@keyframes move-top-in {
  0% {
    transform: translateY(-100000%);
  }

  50% {
    transform: translateY(450%);
  }

  55% {
    transform: translateY(400%);
  }

  60% {
    transform: translateY(450%);
  }

  65% {
    transform: translateY(430%);
  }

  70% {
    transform: translateY(450%);
  }

  100% {
    transform: translateY(0);
  }
}

::view-transition-new(grid-h1),
::view-transition-new(grid-h2),
::view-transition-new(grid-button) {
  animation: move-top-in calc(4 * var(--list-to-grid-animation-time)) ease-in-out forwards;
}

/* end list view to grid view */

/* start grid view to table view */
@keyframes grid-button-out {
  from {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100vw) scale(0.8) rotate(45deg);
    opacity: 0;
  }
}

@keyframes grid-h1-out {
  from {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateX(-120vw) scale(0.6) rotate(-30deg);
    opacity: 0;
  }
}

@keyframes grid-h2-out {
  from {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
  to {
    transform: translateX(-80vw) scale(0.7) rotate(60deg);
    opacity: 0;
  }
}

::view-transition-old(grid-h1) {
  animation: grid-h1-out calc(1.5 * var(--grid-to-table-animation-time)) ease-in-out forwards;
}
::view-transition-old(grid-h2) {
  animation: grid-h2-out calc(2 * var(--grid-to-table-animation-time)) ease-in-out forwards;
}
::view-transition-old(grid-button) {
  animation: grid-button-out var(--grid-to-table-animation-time) ease-in-out forwards;
}

@keyframes table-button-in {
  from {
    transform: translateX(100%) scale(0.5) rotate(-45deg);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes table-h1-in {
  from {
    transform: translateX(120vw) scale(0.7) rotate(30deg);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes table-h2-in {
  from {
    transform: translateX(80vw) scale(0.6) rotate(-60deg);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
}
::view-transition-new(table-h1) {
  animation: table-h1-in calc(1.5 * var(--grid-to-table-animation-time)) ease-in-out forwards;
}
::view-transition-new(table-h2) {
  animation: table-h2-in calc(2 * var(--grid-to-table-animation-time)) ease-in-out forwards;
}
::view-transition-new(table-button) {
  animation: table-button-in calc(2 * var(--grid-to-table-animation-time)) ease-in-out forwards;
}

/* end grid view to table view */

/* end project section header view transition animation */

/* table view animations */
@keyframes img-in-view {
  from {
    transform: scaleY(0.3);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes img-out-view {
  from {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
  }

  to {
    opacity: 0;
    transform: scaleX(0.8) scaleY(0);
  }
}

@keyframes slide-left-in {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-left-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-50px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    display: none;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    display: block;
    transform: scaleY(1);
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
    display: block;
    height: auto;
  }

  to {
    opacity: 0.5;
    display: none;
    height: 0;
  }
}

table-view ul.animate-in {
  --animation-time: 0.2s;
  --animation-delay: 0.05s;

  animation: fade-in var(--animation-time) ease-in-out forwards;

  li {
    &:nth-of-type(1) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(0 * var(--animation-delay));
    }

    &:nth-of-type(2) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(1 * var(--animation-delay));
    }

    &:nth-of-type(3) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(2 * var(--animation-delay));
    }

    &:nth-of-type(4) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(3 * var(--animation-delay));
    }

    &:nth-of-type(5) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(4 * var(--animation-delay));
    }

    &:nth-of-type(6) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(5 * var(--animation-delay));
    }

    &:nth-of-type(7) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(6 * var(--animation-delay));
    }

    &:nth-of-type(8) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(7 * var(--animation-delay));
    }

    &:nth-of-type(9) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(8 * var(--animation-delay));
    }

    &:nth-of-type(10) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(9 * var(--animation-delay));
    }

    &:nth-of-type(11) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(10 * var(--animation-delay));
    }

    &:nth-of-type(12) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(11 * var(--animation-delay));
    }

    &:nth-of-type(13) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(12 * var(--animation-delay));
    }

    &:nth-of-type(14) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(13 * var(--animation-delay));
    }

    &:nth-of-type(15) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(14 * var(--animation-delay));
    }

    &:nth-of-type(16) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(15 * var(--animation-delay));
    }

    &:nth-of-type(17) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(16 * var(--animation-delay));
    }

    &:nth-of-type(18) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(17 * var(--animation-delay));
    }

    &:nth-of-type(19) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(18 * var(--animation-delay));
    }

    &:nth-of-type(20) {
      animation: slide-left-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(19 * var(--animation-delay));
    }
  }
}

table-view ul.animate-out {
  --animation-time: 0.2s;
  --animation-delay: 0.05s;

  animation: fade-out var(--animation-time) ease-in-out forwards;
  animation-delay: calc(20 * var(--animation-delay));

  li {
    &:nth-of-type(1) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(0 * var(--animation-delay));
    }

    &:nth-of-type(2) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(1 * var(--animation-delay));
    }

    &:nth-of-type(3) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(2 * var(--animation-delay));
    }

    &:nth-of-type(4) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(3 * var(--animation-delay));
    }

    &:nth-of-type(5) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(4 * var(--animation-delay));
    }

    &:nth-of-type(6) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(5 * var(--animation-delay));
    }

    &:nth-of-type(7) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(6 * var(--animation-delay));
    }

    &:nth-of-type(8) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(7 * var(--animation-delay));
    }

    &:nth-of-type(9) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(8 * var(--animation-delay));
    }

    &:nth-of-type(10) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(9 * var(--animation-delay));
    }

    &:nth-of-type(11) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(10 * var(--animation-delay));
    }

    &:nth-of-type(12) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(11 * var(--animation-delay));
    }

    &:nth-of-type(13) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(12 * var(--animation-delay));
    }

    &:nth-of-type(14) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(13 * var(--animation-delay));
    }

    &:nth-of-type(15) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(14 * var(--animation-delay));
    }

    &:nth-of-type(16) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(15 * var(--animation-delay));
    }

    &:nth-of-type(17) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(16 * var(--animation-delay));
    }

    &:nth-of-type(18) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(17 * var(--animation-delay));
    }

    &:nth-of-type(19) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(18 * var(--animation-delay));
    }

    &:nth-of-type(20) {
      animation: slide-left-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(19 * var(--animation-delay));
    }
  }
}

/* end table view animation */

/* list view animation */
@keyframes horizontal-scroll {
  to {
    transform: translateX(calc(-100% + 100vw));
  }
}

@keyframes slide-down-in {
  from {
    opacity: 0.5;
    transform: translateY(-100px) scaleY(0);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes slide-up-out {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transform-origin: top;
  }

  to {
    opacity: 0.5;
    transform: translateY(-100px) scaleY(0);
    transform-origin: top;
  }
}

list-view ul.animate-in {
  --animation-time: 0.3s;
  --animation-delay: 0.1s;

  li {
    &:nth-of-type(1) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(0 * var(--animation-delay));
    }

    &:nth-of-type(2) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(1 * var(--animation-delay));
    }

    &:nth-of-type(3) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(2 * var(--animation-delay));
    }

    &:nth-of-type(4) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(3 * var(--animation-delay));
    }

    &:nth-of-type(5) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(4 * var(--animation-delay));
    }

    &:nth-of-type(6) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(5 * var(--animation-delay));
    }

    &:nth-of-type(7) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(6 * var(--animation-delay));
    }

    &:nth-of-type(8) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(7 * var(--animation-delay));
    }

    &:nth-of-type(9) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(8 * var(--animation-delay));
    }

    &:nth-of-type(10) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(9 * var(--animation-delay));
    }

    &:nth-of-type(11) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(10 * var(--animation-delay));
    }

    &:nth-of-type(12) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(11 * var(--animation-delay));
    }

    &:nth-of-type(13) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(12 * var(--animation-delay));
    }

    &:nth-of-type(14) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(13 * var(--animation-delay));
    }

    &:nth-of-type(15) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(14 * var(--animation-delay));
    }

    &:nth-of-type(16) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(15 * var(--animation-delay));
    }

    &:nth-of-type(17) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(16 * var(--animation-delay));
    }

    &:nth-of-type(18) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(17 * var(--animation-delay));
    }

    &:nth-of-type(19) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(18 * var(--animation-delay));
    }

    &:nth-of-type(20) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards;
      animation-delay: calc(19 * var(--animation-delay));
    }
  }
}

list-view ul.animate-out {
  --animation-time: 0.3s;
  --animation-delay: 0.2s;

  li {
    &:nth-of-type(1) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(0 * var(--animation-delay));
    }

    &:nth-of-type(2) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(1 * var(--animation-delay));
    }

    &:nth-of-type(3) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(2 * var(--animation-delay));
    }

    &:nth-of-type(4) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(3 * var(--animation-delay));
    }

    &:nth-of-type(5) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(4 * var(--animation-delay));
    }

    &:nth-of-type(6) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(5 * var(--animation-delay));
    }

    &:nth-of-type(7) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(6 * var(--animation-delay));
    }

    &:nth-of-type(8) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(7 * var(--animation-delay));
    }

    &:nth-of-type(9) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(8 * var(--animation-delay));
    }

    &:nth-of-type(10) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(9 * var(--animation-delay));
    }

    &:nth-of-type(11) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(10 * var(--animation-delay));
    }

    &:nth-of-type(12) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(11 * var(--animation-delay));
    }

    &:nth-of-type(13) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(12 * var(--animation-delay));
    }

    &:nth-of-type(14) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(13 * var(--animation-delay));
    }

    &:nth-of-type(15) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(14 * var(--animation-delay));
    }

    &:nth-of-type(16) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(15 * var(--animation-delay));
    }

    &:nth-of-type(17) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(16 * var(--animation-delay));
    }

    &:nth-of-type(18) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(17 * var(--animation-delay));
    }

    &:nth-of-type(19) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(18 * var(--animation-delay));
    }

    &:nth-of-type(20) {
      animation: slide-down-in var(--animation-time) ease-in-out forwards, slide-up-out var(--animation-time) ease-in-out forwards;
      animation-delay: calc(19 * var(--animation-delay));
    }
  }
}

/* end list view animation */

/* grid view animation */
@keyframes vertical-scroll {
  from {
    transform: translateY(calc(-100% + 100vh));
  }

  to {
    transform: translateY(calc(100% - 100vh));
  }
}

@keyframes remove-cover {
  from {
    transform: scaleX(1);
    transform-origin: right;
  }

  to {
    transform: scaleX(0);
    transform-origin: right;
  }
}

@keyframes add-cover {
  from {
    transform: scaleX(0);
    transform-origin: right;
  }

  to {
    transform: scaleX(1);
    transform-origin: right;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

grid-view.animate-in ul {
  picture::after {
    animation: remove-cover 1s linear forwards;
  }
}

grid-view.animate-out ul {
  picture::after {
    animation: add-cover 1s linear forwards;
  }
}
/* end grid view animation */

body {
  &:has(header[data-view="list"]),
  &:has(header[data-view="grid"]) {
    .main-header,
    .main-footer {
      display: none;
    }
  }
}

.project {
  --list-view-text-height: var(--sp-32);
  container: project / inline-size;

  inner-wrapper {
    transition: var(--transition-all);
    transition: all 1.5s ease-in-out;

    &:has(header[data-view="list"]),
    &:has(header[data-view="grid"]) {
      padding-block: 0;
    }

    /* header */
    header {
      margin-block-end: var(--sp-120-40);
      display: grid;
      width: 100%;

      &[data-view="table"] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "h1 h1"
          "h2 button";
        align-items: end;

        button {
          grid-area: button;
          width: fit-content;
          margin-inline-start: auto;
        }
      }

      &[data-view="list"] {
        grid-template-columns: auto auto 1fr;
        padding-inline: var(--sp-30-16);
        align-items: center;
        left: 0;
        top: var(--project-header-height);
        z-index: 1;
      }

      &[data-view="grid"] {
        right: 0;
        grid-template-columns: 1fr;
        row-gap: var(--sp-4);
        width: fit-content;
        padding: var(--sp-12);
        top: var(--project-header-height);
        z-index: 1;
      }

      h1 {
        &[data-view="table"] {
          grid-area: h1;
        }

        &[data-view="list"],
        &[data-view="grid"] {
          font-size: var(--fs-32);
          letter-spacing: calc(var(--neg-4) * var(--fs-32));
        }
      }

      h2 {
        margin-block-end: 0;

        &[data-view="table"] {
          grid-area: h2;
        }

        &[data-view="list"] {
          align-self: end;
        }
      }

      button {
        &[data-view="table"] {
          grid-area: button;
        }

        &[data-view="list"] {
          width: fit-content;
          margin-inline-start: auto;
        }
      }
    }

    /* table view */
    table-view {
      display: grid;
      grid-template-columns: 9fr 3fr;
      grid-template-areas:
        "list picture";
      column-gap: var(--sp-20);

      ul {
        grid-area: list;

        &.animate-in {
          opacity: 0;

          li {
            transform: translateX(-200px);
            opacity: 0;
          }
        }

        li {
          border-block-end: var(--border);

          &:first-of-type {
            display: grid;
            grid-template-columns: 5fr 3fr 1fr;
            padding-block: var(--sp-20);
          }

          a {
            display: grid;
            grid-template-columns: 5fr 3fr 1fr;
            padding-block: var(--sp-20);
            transition: none;

            color: var(--black);
            text-decoration: none;
            
            @media (hover: hover) {
              &:hover {
                background-color: var(--white-shade-8);
              }
            }
          }
        }
      }

      picture {
        grid-area: picture;

        position: sticky;
        top: var(--sp-20);
        height: fit-content;
        visibility: hidden;
        transition: var(--transition-all);
        overflow: hidden;

        img {
          animation: img-out-view 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          transform-origin: top center;
        }
      }

      &:has(ul li:nth-of-type(2):hover) picture:nth-of-type(1),
      &:has(ul li:nth-of-type(3):hover) picture:nth-of-type(2),
      &:has(ul li:nth-of-type(4):hover) picture:nth-of-type(3),
      &:has(ul li:nth-of-type(5):hover) picture:nth-of-type(4),
      &:has(ul li:nth-of-type(6):hover) picture:nth-of-type(5),
      &:has(ul li:nth-of-type(7):hover) picture:nth-of-type(6),
      &:has(ul li:nth-of-type(8):hover) picture:nth-of-type(7),
      &:has(ul li:nth-of-type(9):hover) picture:nth-of-type(8),
      &:has(ul li:nth-of-type(10):hover) picture:nth-of-type(9),
      &:has(ul li:nth-of-type(11):hover) picture:nth-of-type(10),
      &:has(ul li:nth-of-type(12):hover) picture:nth-of-type(11),
      &:has(ul li:nth-of-type(13):hover) picture:nth-of-type(12),
      &:has(ul li:nth-of-type(14):hover) picture:nth-of-type(13),
      &:has(ul li:nth-of-type(15):hover) picture:nth-of-type(14),
      &:has(ul li:nth-of-type(16):hover) picture:nth-of-type(15),
      &:has(ul li:nth-of-type(17):hover) picture:nth-of-type(16),
      &:has(ul li:nth-of-type(18):hover) picture:nth-of-type(17),
      &:has(ul li:nth-of-type(19):hover) picture:nth-of-type(18),
      &:has(ul li:nth-of-type(20):hover) picture:nth-of-type(19),
      &:has(ul li:nth-of-type(21):hover) picture:nth-of-type(20) {
        visibility: visible;

        img {
          animation: img-in-view 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
          transform-origin: bottom center;
        }
      }
    }

    /* list view */
    list-view {
      --card-width: var(--sp-231);
      --card-number: 20;
      --card-gap: var(--sp-20);
      --list-width: calc(var(--card-number) * var(--card-width) + (var(--card-number) - 1) * var(--card-gap) + 2 * var(--sp-30-16));
      --list-height: var(--sp-341);

      display: none;
      transition: var(--transition-all);

      overflow: visible;
      /* make position sticky work */
      height: 500vh;

      view-timeline-name: --list-view;
      view-timeline-axis: block;

      a {
        text-decoration: none;
        color: var(--black);
      }

      list-view-sticky {
        position: sticky;
        top: 0;

        display: block;
        overflow-x: clip;
        height: 100dvh;
        place-content: center;
        background: none;
        transition: var(--transition-all);

        ul {
          display: flex;
          flex-direction: row;
          align-items: end;
          gap: var(--card-gap);
          width: var(--list-width);

          animation: horizontal-scroll ease-in-out both;
          animation-timeline: --list-view;
          animation-range: contain 0% contain 100%;

          li {
            flex: 0 0 231px;
            opacity: 0;

            figcaption {
              margin-block-start: var(--sp-4);
              -webkit-text-stroke: 0.5px transparent;
              -webkit-text-fill-color: var(--black);
              transition: var(--transition-all);
            }

            @media (hover: hover) {
              &:hover {
                figcaption {
                  -webkit-text-stroke: 0.5px var(--black);
                  -webkit-text-fill-color: var(--white);
                }
              }
            }
          }
        }
      }

      list-view-pictures {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "picture";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        picture {
          grid-area: picture;
          height: 100dvh;
          opacity: 0;
          transition: var(--transition-all);

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      &:has(li:nth-of-type(1):hover) list-view-pictures picture:nth-of-type(1),
      &:has(li:nth-of-type(2):hover) list-view-pictures picture:nth-of-type(2),
      &:has(li:nth-of-type(3):hover) list-view-pictures picture:nth-of-type(3),
      &:has(li:nth-of-type(4):hover) list-view-pictures picture:nth-of-type(4),
      &:has(li:nth-of-type(5):hover) list-view-pictures picture:nth-of-type(5),
      &:has(li:nth-of-type(6):hover) list-view-pictures picture:nth-of-type(6),
      &:has(li:nth-of-type(7):hover) list-view-pictures picture:nth-of-type(7),
      &:has(li:nth-of-type(8):hover) list-view-pictures picture:nth-of-type(8),
      &:has(li:nth-of-type(9):hover) list-view-pictures picture:nth-of-type(9),
      &:has(li:nth-of-type(10):hover) list-view-pictures picture:nth-of-type(10),
      &:has(li:nth-of-type(11):hover) list-view-pictures picture:nth-of-type(11),
      &:has(li:nth-of-type(12):hover) list-view-pictures picture:nth-of-type(12),
      &:has(li:nth-of-type(13):hover) list-view-pictures picture:nth-of-type(13),
      &:has(li:nth-of-type(14):hover) list-view-pictures picture:nth-of-type(14),
      &:has(li:nth-of-type(15):hover) list-view-pictures picture:nth-of-type(15),
      &:has(li:nth-of-type(16):hover) list-view-pictures picture:nth-of-type(16),
      &:has(li:nth-of-type(17):hover) list-view-pictures picture:nth-of-type(17),
      &:has(li:nth-of-type(18):hover) list-view-pictures picture:nth-of-type(18),
      &:has(li:nth-of-type(19):hover) list-view-pictures picture:nth-of-type(19),
      &:has(li:nth-of-type(20):hover) list-view-pictures picture:nth-of-type(20) {
        opacity: 1;
      }
    }

    grid-view {
      /* display: grid; */
      display: none;
      grid-template-columns: repeat(5, 1fr);
      column-gap: var(--sp-32);

      ul {
        display: flex;
        flex-direction: column;
        gap: var(--sp-80);

        picture {
          position: relative;
          width: 100%;
          height: var(--sp-330);

          img {
            height: 100%;
            object-fit: cover;
          }

          &::after {
            content: "";
            display: block;
            position: absolute;
            top: -1px;
            left: -1px;
            width: calc(100% + var(--sp-4));
            height: calc(100% + var(--sp-4));
            background-color: var(--white);
            z-index: 1;
          }
        }
      }

      @supports (animation-timeline: scroll()) {
        overflow-y: clip;

        ul.reverse {
          transform: translateY(calc(-100% + 100vh));
          flex-direction: column-reverse;

          animation: vertical-scroll linear forwards;
          animation-timeline: scroll(root block);
        }
      }
    }

    @container (inline-size < 43.75rem) {
      header {
        button {
          display: none;
        }
      }
      table-view {
        grid-template-columns: 1fr;
        grid-template-areas:
          "list";
        picture {
          display: none;
        }

        ul {
          li a {
            grid-template-columns: repeat(3, 1fr);
            
            span:nth-of-type(3) {
              text-align: center;
            }
          }
        }
      }
    }
  }
}