body {
  overflow: hidden;
}

::view-transition-old(root) {
  animation: slide-out-right var(--slide) ease-in-out both;
}
::view-transition-new(root) {
  animation: slide-in-left var(--slide) ease-in-out both;
}

.bgx {
  left: var(--edge);
  bottom: var(--edge);
  overflow: visible;
}
.bgx line,
.bgx circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#track {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

#track > * {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  will-change: transform;
}

#intro {
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
}
#intro .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  will-change: transform;
}
#intro .name {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 200;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
}
#intro .rule {
  margin: 1.6em 0;
}
#intro .tagline,
#intro .profile {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  font-weight: 300;
}
#intro .tagline {
  --ls: 0.3em;
  margin: 0;
  font-size: clamp(0.85rem, 2.4vw, 1.1rem);
  opacity: 0.6;
}
#intro .profile {
  --ls: 0.14em;
  margin: 1.4em 0 0;
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  opacity: 0.8;
}
#intro .side-left,
#intro .side-right {
  letter-spacing: var(--ls);
  white-space: nowrap;
}
#intro .side-left {
  text-align: right;
  margin-right: calc(-1 * var(--ls));
}
#intro .side-right {
  text-align: left;
}
#intro .sep {
  padding: 0 0.5em;
}

.project {
  --reveal: 0;
  --fill: clamp(0, var(--reveal) * 2 - 1, 1);
}
#stage.pre-projects .project {
  visibility: hidden;
}
#stage.post-projects #intro,
#stage.post-projects .project:not(.outro) {
  visibility: hidden;
}

.project .work {
  margin: 0;
  width: calc((1 - var(--t, 0)) * min(56vw, 96vh) + var(--t, 0) * 86vw);
}
.project .work img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--fill);
}
.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.frame path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--reveal));
  stroke-opacity: calc(1 - var(--reveal));
}
.project .title {
  margin: 2em 0 0;
}
.project .desc {
  max-width: calc((1 - var(--t, 0)) * min(56vw, 34em) + var(--t, 0) * 86vw);
}
.more {
  display: block;
  margin: 2em 0 0;
  opacity: calc(0.6 * var(--fill));
}
.more:hover,
.more:focus-visible {
  opacity: var(--fill);
}
.more img {
  display: block;
  width: 30px;
  height: 30px;
}

.outro {
  width: calc(100vw - var(--edge) * 2);
  height: calc(100vh - var(--edge) * 2);
}
.outro-name {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 200;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  opacity: var(--fill);
}
.outro-links {
  display: flex;
  gap: 2.6em;
  margin-top: 0.5em;
  opacity: var(--fill);
}
.outro-links a {
  display: block;
}
.outro-links img {
  display: block;
  width: clamp(26px, 4vw, 34px);
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.outro-links a:hover img,
.outro-links a:focus-visible img {
  opacity: 1;
}
.outro .copyright {
  position: absolute;
  bottom: 0;
}

.line-svg {
  position: fixed;
  height: auto;
  max-width: calc(100vw - var(--edge) * 2);
  max-height: calc(100vh - var(--edge) * 2);
  pointer-events: none;
}
.line-svg path {
  stroke: #fff;
  fill: #fff;
  fill-opacity: 0;
}
.logo {
  right: var(--edge);
  top: var(--edge);
  height: calc(100vh - var(--edge) * 2);
}
.wordmark {
  left: var(--edge);
  bottom: var(--edge);
}