* {
  box-sizing: border-box;
}

html, body {
  background: #000;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html {
  overflow: hidden;
}

body {
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Montserrat, sans-serif;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select {
  font: inherit;
}

.page {
  isolation: isolate;
  perspective: 1200px;
  background: #000;
  width: 100%;
  height: 100svh;
  position: relative;
  overflow: hidden;
}

.scene-wrap {
  z-index: 1;
  transform-origin: 50%;
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1), filter .95s cubic-bezier(.22, 1, .36, 1), transform .95s cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.scene-canvas {
  cursor: default;
  touch-action: none;
  width: 100%;
  height: 100%;
  display: block;
}

.top-ui {
  z-index: 99999;
  pointer-events: auto;
  position: fixed;
  top: 18px;
  left: 20px;
}

.top-ui__name {
  appearance: none;
  cursor: pointer;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffb8;
  mix-blend-mode: normal;
  opacity: 1;
  visibility: visible;
  text-shadow: 0 0 6px #ffffff14;
  background: none;
  border: 0;
  padding: 0;
  font-size: .78rem;
  font-weight: 500;
  transition: color .35s, opacity .35s, text-shadow .35s, transform .35s;
  display: inline-block;
}

.top-ui__name:hover {
  color: #fffffff2;
  text-shadow: 0 0 10px #ffffff1f;
}

.ui-layer {
  z-index: 4;
  pointer-events: none;
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1), filter .95s cubic-bezier(.22, 1, .36, 1), transform .95s cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: 0;
}

.ui-layer__hint {
  letter-spacing: .16em;
  text-transform: lowercase;
  color: #ffffff38;
  opacity: .8;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  font-size: .68rem;
  font-weight: 400;
  transition: opacity .35s, transform .35s;
  position: absolute;
  bottom: clamp(20px, 4vw, 36px);
  left: 50%;
  transform: translateX(-50%);
}

.ui-layer__hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.action-log {
  z-index: 8;
  pointer-events: none;
  flex-direction: column;
  gap: 4px;
  font-family: JetBrains Mono, monospace;
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1), filter .95s cubic-bezier(.22, 1, .36, 1), transform .95s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  position: fixed;
  bottom: 18px;
  left: 18px;
}

.action-log__item {
  letter-spacing: .02em;
  color: #ffffffc2;
  opacity: 0;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.35;
  transition: opacity .6s, transform .6s;
  transform: translateY(6px);
}

.action-log__item:before {
  content: "> ";
  color: #ffffff57;
}

.action-log__item.is-visible {
  opacity: .76;
  transform: translateY(0);
}

.action-log__item.is-exit {
  opacity: 0;
}

.mouse-readout {
  z-index: 8;
  pointer-events: none;
  letter-spacing: .03em;
  color: #ffffff9e;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  font-family: JetBrains Mono, monospace;
  font-size: 9px;
  line-height: 1;
  transition: opacity .95s cubic-bezier(.22, 1, .36, 1), filter .95s cubic-bezier(.22, 1, .36, 1), transform .95s cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  bottom: 18px;
  right: 18px;
}

.loading {
  z-index: 14;
  background: #000;
  place-items: center;
  transition: opacity .8s, visibility .8s;
  display: grid;
  position: fixed;
  inset: 0;
}

.loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading__inner {
  justify-content: center;
  align-items: center;
  display: flex;
}

.loading__label {
  letter-spacing: .18em;
  text-transform: lowercase;
  color: #ffffff61;
  margin: 0;
  font-size: .74rem;
  font-weight: 400;
}

.sr-nav {
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.sr-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.noscript {
  color: #fff;
  text-align: center;
  background: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  min-height: 100svh;
  padding: 32px;
  display: flex;
}

.noscript h1 {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffffe6;
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1;
}

.noscript ul {
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.noscript a {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffffb8;
  font-size: .95rem;
  font-weight: 400;
}

.page:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, #ffffff06 0%, #ffffff03 16%, #ffffff01 30%, #0000 58%);
  position: fixed;
  inset: 0;
}

.page:after {
  content: "";
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(#0000001f 0%, #0000 18% 82%, #00000029 100%);
  position: fixed;
  inset: 0;
}

.cursor-trail {
  z-index: 9;
  pointer-events: none;
  transition: opacity .9s, filter .9s;
  position: fixed;
  inset: 0;
}

.cursor-trail__square {
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  background: #fff;
  border: 1px solid #fff;
  width: 14px;
  height: 14px;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-9999px, -9999px, 0);
}

.about-overlay {
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.about-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.about-overlay__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.about-transition-label {
  z-index: 13;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffeb;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
  font-size: .78rem;
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-9999px, -9999px, 0);
}

.about-transition-label.is-active {
  opacity: 1;
}

.about-layout {
  opacity: 0;
  will-change: transform;
  width: 100%;
  min-height: 100svh;
  padding: 12vh 6vw 10vh;
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}

.about-overlay.is-content-visible .about-layout {
  opacity: 1;
}

.about-layout__title {
  width: min(46vw, 760px);
  position: absolute;
  top: 16vh;
  left: 11.4vw;
}

.about-title {
  letter-spacing: -.04em;
  opacity: 0;
  filter: blur(10px);
  flex-direction: column;
  gap: .04em;
  margin: 0;
  font-size: clamp(2.7rem, 5.8vw, 6.5rem);
  font-weight: 400;
  line-height: .94;
  display: flex;
  transform: translate3d(0, 10px, 0);
}

.about-layout__statement {
  opacity: 0;
  filter: blur(10px);
  flex-direction: column;
  gap: 16px;
  width: min(480px, 38vw);
  display: flex;
  position: absolute;
  top: 49vh;
  left: 12vw;
  transform: translate3d(0, 10px, 0);
}

.about-block {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 10px, 0);
}

.about-overlay.is-content-visible .about-title, .about-overlay.is-content-visible .about-layout__statement, .about-overlay.is-content-visible .about-block {
  opacity: 1;
  filter: blur();
  transform: translate3d(0, 0, 0);
}

.about-layout__statement p {
  letter-spacing: .01em;
  color: #ffffffb8;
  margin: 0;
  font-size: .82rem;
  line-height: 1.75;
}

.about-layout__cv {
  opacity: 1;
  flex-direction: column;
  gap: 22px;
  width: min(360px, 28vw);
  display: flex;
  position: absolute;
  bottom: 10vh;
  right: 8vw;
  transform: none;
}

.about-block h2 {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff6b;
  margin: 0 0 8px;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.4;
}

.about-block p {
  color: #ffffffc7;
  margin: 0;
  font-size: .8rem;
  line-height: 1.68;
}

.about-line {
  display: block;
}

.about-word {
  opacity: 0;
  filter: blur(10px);
  will-change: transform, opacity, filter;
  display: inline-block;
  transform: translate3d(0, 22px, 0);
}

.about-space {
  width: .34em;
  display: inline-block;
}

.about-char {
  opacity: 1;
  will-change: transform, opacity, filter;
  display: inline-block;
  transform: translate3d(0, 0, 0) scale(1) rotate(0);
}

.about-overlay.is-returning {
  pointer-events: none;
}

.about-overlay.is-returning .about-transition-label {
  opacity: 0;
  transition: opacity .32s;
}

.contact-overlay {
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.contact-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.contact-overlay__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.contact-transition-label {
  z-index: 13;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffeb;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
  font-size: .78rem;
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-9999px, -9999px, 0);
}

.contact-transition-label.is-active {
  opacity: 1;
}

.contact-layout {
  opacity: 0;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  padding: 0 6vw;
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}

.contact-overlay.is-content-visible .contact-layout {
  opacity: 1;
}

.contact-line-wrap {
  padding: 0 10vw;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.contact-viewport {
  width: 100%;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, #0000 0%, #000 5% 90%, #0000 100%);
}

.contact-track {
  will-change: transform;
  align-items: center;
  width: max-content;
  min-width: max-content;
  display: flex;
  position: relative;
}

.contact-anchor {
  letter-spacing: -.05em;
  color: #fffffff5;
  opacity: 0;
  white-space: nowrap;
  flex: none;
  font-size: clamp(2.2rem, 5vw, 5.2rem);
  font-weight: 400;
  line-height: .92;
  transition: opacity .8s, transform .8s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  transform: translate3d(-36px, 0, 0);
}

.contact-line {
  opacity: 0;
  transform-origin: 0;
  background: none;
  flex: none;
  width: clamp(180px, 18vw, 320px);
  height: 1px;
  margin: 0 64px;
  transition: opacity .8s, transform .8s;
  position: relative;
  overflow: visible;
  transform: scaleX(.96);
}

.contact-line:after {
  content: "";
  height: 1px;
  width: var(--contact-line-extend, 0px);
  pointer-events: none;
  background: #ffffff1a;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.contact-line__glow {
  top: 50%;
  left: calc(var(--contact-line-glow-left, 0px) - 180px);
  width: 180px;
  height: 1px;
  opacity: var(--contact-line-glow-opacity, 1);
  will-change: left, opacity;
  background: linear-gradient(90deg, #fff0 0%, #ffffffc7 50%, #fff0 100%);
  position: absolute;
  transform: translateY(-50%);
}

.contact-item {
  --focus-strength: .22;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: calc(.28 + (var(--focus-strength) * .72));
  color: rgb(255 255 255 / calc(.22 + (var(--focus-strength) * .74)));
  transform: translateY(calc((1 - var(--focus-strength)) * 4px));
  flex: none;
  margin-right: 140px;
  font-size: .76rem;
  font-weight: 500;
  transition: opacity .22s linear, color .22s linear, transform .22s linear;
  position: relative;
}

.contact-item:last-child {
  margin-right: 0;
}

.contact-item:before {
  content: "";
  background: rgb(255 255 255 / calc(.18 + (var(--focus-strength) * .78)));
  opacity: 1;
  width: 6px;
  height: 6px;
  transform: translateY(-50%) scale(calc(.9 + (var(--focus-strength) * .25)));
  border-radius: 50%;
  transition: background .22s linear, transform .22s linear;
  position: absolute;
  top: 50%;
  left: -22px;
}

.contact-item.is-active, .contact-item:hover {
  color: #fffffff5;
}

.contact-item.is-active:before, .contact-item:hover:before {
  background: #fffffff5;
}

.contact-hint {
  letter-spacing: .16em;
  text-transform: lowercase;
  color: #ffffff3d;
  opacity: 0;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 400;
  transition: opacity .6s, transform .6s;
  position: absolute;
  bottom: clamp(20px, 4vw, 36px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}

.contact-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.contact-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.panel-overlay {
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.panel-overlay__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.panel-transition-label {
  z-index: 13;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffeb;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
  font-size: .78rem;
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-9999px, -9999px, 0);
}

.panel-transition-label.is-active {
  opacity: 1;
}

.coming-layout {
  opacity: 0;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  padding: 12vh 6vw 10vh;
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}

.panel-overlay.is-content-visible .coming-layout {
  opacity: 1;
}

.coming-layout__title-wrap {
  width: min(46vw, 760px);
  position: absolute;
  top: 16vh;
  left: 11.4vw;
}

.coming-title {
  letter-spacing: -.04em;
  opacity: 0;
  margin: 0;
  font-size: clamp(2.7rem, 5.8vw, 6.5rem);
  font-weight: 400;
  line-height: .94;
  transform: translate3d(0, 18px, 0);
}

.coming-layout__body {
  width: min(420px, 36vw);
  position: absolute;
  top: 49vh;
  left: 12vw;
}

.coming-copy {
  letter-spacing: .02em;
  color: #ffffff9e;
  opacity: 0;
  margin: 0;
  font-size: .78rem;
  line-height: 1.72;
  transform: translate3d(0, 18px, 0);
}

.panel-overlay.is-returning {
  pointer-events: none;
}

.panel-overlay.is-returning .panel-transition-label {
  opacity: 0;
  transition: opacity .32s;
}

.interactive-art-overlay {
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000;
  position: fixed;
  inset: 0;
}

.interactive-art-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.interactive-art-overlay__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.interactive-art-transition-label {
  z-index: 40;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffeb;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
  font-size: .78rem;
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-9999px, -9999px, 0);
}

.interactive-art-transition-label.is-active {
  opacity: 1;
}

.interactive-art-layout {
  z-index: 31;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  padding: 0 6vw;
  transition: opacity .45s, visibility .45s;
  position: relative;
}

.interactive-art-overlay.is-content-visible .interactive-art-layout {
  opacity: 1;
  visibility: visible;
}

.interactive-art-line-wrap {
  padding: 0 10vw;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  overflow: visible;
  transform: translateY(-50%);
}

.interactive-art-viewport {
  width: 100%;
  position: relative;
  overflow: visible;
  mask-image: linear-gradient(to right, #0000 0%, #000 5% 90%, #0000 100%);
}

.page.is-interactive-art-open .top-ui {
  z-index: 50;
}

.interactive-art-track {
  will-change: transform;
  align-items: flex-start;
  width: max-content;
  min-width: max-content;
  display: flex;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.interactive-art-anchor {
  letter-spacing: -.05em;
  color: #fffffff5;
  white-space: nowrap;
  z-index: 2;
  opacity: 0;
  flex: none;
  font-size: clamp(2.2rem, 5vw, 5.2rem);
  font-weight: 400;
  line-height: .92;
  transition: opacity .8s, transform .8s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  transform: translate3d(-36px, 0, 0);
}

.interactive-art-line {
  z-index: 1;
  opacity: 0;
  transform-origin: 0;
  background: none;
  flex: none;
  width: clamp(200px, 20vw, 360px);
  height: 1px;
  margin: 18px 64px 0;
  transition: opacity .8s, transform .8s;
  position: relative;
  overflow: visible;
  transform: scaleX(.96);
}

.interactive-art-line:after {
  content: "";
  height: 1px;
  width: var(--interactive-art-line-extend, 0px);
  pointer-events: none;
  background: #ffffff1a;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.interactive-art-line__glow {
  top: 50%;
  left: calc(var(--interactive-art-line-glow-left, 0px) - 180px);
  width: 180px;
  height: 1px;
  opacity: var(--interactive-art-line-glow-opacity, 1);
  will-change: left, opacity;
  background: linear-gradient(90deg, #fff0 0%, #ffffffc7 50%, #fff0 100%);
  position: absolute;
  transform: translateY(-50%);
}

.interactive-art-item {
  --focus-strength: .3;
  width: 420px;
  color: inherit;
  opacity: calc(.45 + (var(--focus-strength) * .55));
  filter: brightness(calc(.55 + (var(--focus-strength) * .45)));
  transform: translateY(calc((1 - var(--focus-strength)) * 10px));
  flex: none;
  margin-top: 54px;
  text-decoration: none;
  transition: opacity .22s linear, filter .22s linear, transform .22s linear;
  display: block;
  position: relative;
}

.interactive-art-item + .interactive-art-item {
  margin-left: 120px;
}

.interactive-art-item__meta-row {
  z-index: 6;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.interactive-art-item__label, .interactive-art-item__year {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #ffffff57;
  margin: 0;
  font-family: JetBrains Mono, monospace;
  font-size: 9px;
  line-height: 1.45;
  display: block;
}

.interactive-art-item__media {
  aspect-ratio: 16 / 9;
  background: #ffffff08;
  border: 1px solid #ffffff14;
  width: 100%;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.interactive-art-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.interactive-art-item__media--placeholder {
  justify-content: center;
  align-items: center;
  display: flex;
}

.interactive-art-placeholder-inner {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.interactive-art-placeholder-text {
  letter-spacing: .22em;
  color: #ffffff3d;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
}

.interactive-art-item__texts {
  margin-top: 12px;
}

.interactive-art-item__title {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff42;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 500;
  transition: none;
  display: block;
}

.interactive-art-item.is-work {
  cursor: pointer;
}

.interactive-art-item.is-placeholder {
  cursor: default;
}

.interactive-art-item.is-active .interactive-art-item__title, .interactive-art-item.is-work:hover .interactive-art-item__title {
  color: #fffffff5;
}

.interactive-art-item.is-active .interactive-art-item__meta, .interactive-art-item.is-work:hover .interactive-art-item__meta {
  color: #ffffffb8;
}

.interactive-art-hint {
  letter-spacing: .16em;
  text-transform: lowercase;
  color: #ffffff3d;
  opacity: 0;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 400;
  transition: opacity .6s, transform .6s;
  position: absolute;
  bottom: clamp(20px, 4vw, 36px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}

.interactive-art-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.interactive-art-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.interactive-art-overlay.is-open:not(.is-content-visible) .interactive-art-layout {
  opacity: 0;
  visibility: hidden;
}

.interactive-art-overlay.is-content-visible .interactive-art-anchor {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.interactive-art-overlay.is-content-visible .interactive-art-line {
  opacity: 1;
  transform: scaleX(1);
}

.interactive-art-overlay.is-content-visible .interactive-art-item, .interactive-art-overlay.is-content-visible .interactive-art-hint {
  opacity: 1;
}

.client-works-overlay {
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), visibility .9s cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: 0;
}

.client-works-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.client-works-transition-label {
  z-index: 120;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffeb;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
  font-size: .78rem;
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-9999px, -9999px, 0);
}

.client-works-transition-label.is-active {
  opacity: 1;
}

.client-works-overlay__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.client-works-layout {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  padding: 0 6vw;
  transition: opacity .45s, visibility .45s;
  position: relative;
  overflow: hidden;
}

.client-works-overlay.is-content-visible .client-works-layout {
  opacity: 1;
  visibility: visible;
}

.client-works-line-wrap {
  z-index: 10;
  padding: 0 10vw;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  overflow: visible;
  transform: translateY(-50%);
}

.client-works-viewport {
  width: 100%;
  position: relative;
  overflow: visible;
  mask-image: linear-gradient(to right, #0000 0%, #000 5% 90%, #0000 100%);
}

.client-works-track {
  will-change: transform;
  align-items: flex-start;
  width: max-content;
  min-width: max-content;
  display: flex;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.client-works-anchor {
  letter-spacing: -.05em;
  color: #fffffff5;
  white-space: nowrap;
  z-index: 2;
  opacity: 0;
  flex: none;
  font-size: clamp(2.2rem, 5vw, 5.2rem);
  font-weight: 400;
  line-height: .92;
  transition: opacity .8s, transform .8s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  transform: translate3d(-36px, 0, 0);
}

.client-works-line {
  z-index: 1;
  opacity: 0;
  transform-origin: 0;
  background: none;
  flex: none;
  width: clamp(200px, 20vw, 360px);
  height: 1px;
  margin: 18px 64px 0;
  transition: opacity .8s, transform .8s;
  position: relative;
  overflow: visible;
  transform: scaleX(.96);
}

.client-works-line:after {
  content: "";
  height: 1px;
  width: var(--client-works-line-extend, 0px);
  pointer-events: none;
  background: #ffffff1a;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.client-works-line__glow {
  top: 50%;
  left: calc(var(--client-works-line-glow-left, 0px) - 180px);
  width: 180px;
  height: 1px;
  opacity: var(--client-works-line-glow-opacity, 1);
  will-change: left, opacity;
  background: linear-gradient(90deg, #fff0 0%, #ffffffc7 50%, #fff0 100%);
  position: absolute;
  transform: translateY(-50%);
}

.client-works-item {
  --focus-strength: .3;
  width: 420px;
  color: inherit;
  opacity: calc(.45 + (var(--focus-strength) * .55));
  filter: brightness(calc(.55 + (var(--focus-strength) * .45)));
  transform: translateY(calc((1 - var(--focus-strength)) * 10px));
  flex: none;
  margin-top: 54px;
  text-decoration: none;
  transition: opacity .22s linear, filter .22s linear, transform .22s linear;
  display: block;
  position: relative;
}

.client-works-item + .client-works-item {
  margin-left: 120px;
}

.client-works-item.is-placeholder {
  cursor: default;
}

.client-works-item__meta-row {
  z-index: 6;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.client-works-item__label, .client-works-item__year {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #ffffff57;
  margin: 0;
  font-family: JetBrains Mono, monospace;
  font-size: 9px;
  line-height: 1.45;
  display: block;
}

.client-works-item__media {
  aspect-ratio: 16 / 9;
  background: #ffffff08;
  border: 1px solid #ffffff14;
  width: 100%;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.client-works-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.client-works-item__media--placeholder {
  justify-content: center;
  align-items: center;
  display: flex;
}

.client-works-placeholder-inner {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.client-works-placeholder-text {
  letter-spacing: .22em;
  color: #ffffff3d;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
}

.client-works-item__texts {
  margin-top: 12px;
}

.client-works-item__title {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff42;
  font-size: .8rem;
  font-weight: 500;
  transition: color .22s linear;
  display: block;
}

.client-works-item__meta {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #ffffff4d;
  margin-top: 7px;
  font-family: JetBrains Mono, monospace;
  font-size: 9px;
  line-height: 1.45;
  transition: color .22s linear, opacity .22s linear;
  display: block;
}

.client-works-item__note {
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffffff38;
  margin-top: 7px;
  font-family: JetBrains Mono, monospace;
  font-size: 9px;
  line-height: 1.45;
  display: block;
}

.client-works-item.is-active .client-works-item__title {
  color: #fffffff5;
}

.client-works-item.is-active .client-works-item__meta {
  color: #ffffffb8;
}

.client-works-hint {
  z-index: 11;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: #ffffff3d;
  opacity: 0;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 400;
  transition: opacity .6s, transform .6s;
  position: absolute;
  bottom: clamp(20px, 4vw, 36px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}

.client-works-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.client-works-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.client-works-overlay.is-returning {
  pointer-events: none;
}

.client-works-overlay.is-returning .client-works-transition-label {
  opacity: 0;
  transition: opacity .32s;
}

.contact-overlay.is-returning, .interactive-art-overlay.is-returning, .moving-image-overlay.is-returning, .client-works-overlay.is-returning {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

.contact-overlay, .interactive-art-overlay, .moving-image-overlay, .client-works-overlay {
  transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), visibility 1.1s cubic-bezier(.22, 1, .36, 1);
}

.archive-overlay {
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  background: #000;
  transition: opacity .6s, visibility .6s;
  position: fixed;
  inset: 0;
}

.archive-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.archive-overlay__inner {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.archive-canvas {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.archive-ui {
  z-index: 70;
  pointer-events: none;
  position: fixed;
  top: 42px;
  left: 20px;
}

.archive-title {
  letter-spacing: .12em;
  color: #ffffffb8;
  text-align: left;
  margin-bottom: 4px;
  font-size: 14px;
}

.archive-year-label {
  letter-spacing: .12em;
  color: #ffffffb8;
  text-align: left;
  font-family: JetBrains Mono, monospace;
  font-size: 14px;
}

.archive-transition-label {
  letter-spacing: .12em;
  color: #fff;
  pointer-events: none;
  z-index: 200;
  font-family: JetBrains Mono, monospace;
  font-size: 14px;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), opacity .9s;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(1);
}

.archive-transition-label.is-moving {
  transform: translate(20px, 42px) scale(1);
}

.page.is-archive-transition .scene-wrap {
  opacity: 0;
  filter: blur(12px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
  transform: scale(.92);
}

.page.is-archive-open .scene-wrap {
  opacity: 0;
  pointer-events: none;
  filter: blur(8px);
  transition: opacity .9s, filter .9s;
}

.moving-image-overlay {
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000;
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), visibility .9s cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  inset: 0;
}

.moving-image-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.moving-image-transition-label {
  z-index: 130;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffffeb;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
  font-size: .78rem;
  font-weight: 500;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(-9999px, -9999px, 0);
}

.moving-image-transition-label.is-active {
  opacity: 1;
}

.moving-image-overlay__inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.moving-image-layout {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  padding: 0 6vw;
  transition: opacity .45s, visibility .45s;
  position: relative;
  overflow: hidden;
}

.moving-image-overlay.is-content-visible .moving-image-layout {
  opacity: 1;
  visibility: visible;
}

.moving-image-stage {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1), visibility .55s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: 0;
}

.moving-image-stage.is-active {
  opacity: 1;
  visibility: visible;
}

.moving-image-stage__video {
  object-fit: cover;
  opacity: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px) brightness(var(--moving-image-brightness, .28));
  background: #000;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), filter .9s cubic-bezier(.22, 1, .36, 1);
  position: absolute;
  inset: 0;
  transform: scale(1.03);
}

.moving-image-stage.is-active .moving-image-stage__video {
  opacity: 1;
  filter: blur(0px) brightness(var(--moving-image-brightness, .28));
  transform: scale(1);
}

.moving-image-stage:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(#0000002e 0%, #00000014 22% 78%, #0000002e 100%);
  position: absolute;
  inset: 0;
}

.moving-image-line-wrap {
  z-index: 10;
  padding: 0 10vw;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  overflow: visible;
  transform: translateY(-50%);
}

.moving-image-viewport {
  width: 100%;
  position: relative;
  overflow: visible;
  mask-image: linear-gradient(to right, #0000 0%, #000 5% 90%, #0000 100%);
}

.moving-image-track {
  will-change: transform;
  align-items: flex-start;
  width: max-content;
  min-width: max-content;
  display: flex;
  position: relative;
  transform: translate3d(0, 0, 0);
}

.moving-image-anchor {
  letter-spacing: -.05em;
  color: #fffffff5;
  white-space: nowrap;
  z-index: 2;
  opacity: 0;
  flex: none;
  font-size: clamp(2.2rem, 5vw, 5.2rem);
  font-weight: 400;
  line-height: .92;
  transition: opacity .8s, transform .8s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  transform: translate3d(-36px, 0, 0);
}

.moving-image-line {
  z-index: 1;
  opacity: 0;
  transform-origin: 0;
  background: none;
  flex: none;
  width: clamp(200px, 20vw, 360px);
  height: 1px;
  margin: 18px 64px 0;
  transition: opacity .8s, transform .8s;
  position: relative;
  overflow: visible;
  transform: scaleX(.96);
}

.moving-image-line:after {
  content: "";
  height: 1px;
  width: var(--moving-image-line-extend, 0px);
  pointer-events: none;
  background: #ffffff1c;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.moving-image-line__glow {
  top: 50%;
  left: calc(var(--moving-image-line-glow-left, 0px) - 180px);
  opacity: 1;
  will-change: left, opacity;
  background: linear-gradient(90deg, #fff0 0%, #ffffffd1 50%, #fff0 100%);
  width: 180px;
  height: 1px;
  position: absolute;
  transform: translateY(-50%);
}

.moving-image-item {
  --focus-strength: .32;
  width: 420px;
  color: inherit;
  opacity: calc(.45 + (var(--focus-strength) * .55));
  filter: brightness(calc(.55 + (var(--focus-strength) * .45)));
  transform: translateY(calc((1 - var(--focus-strength)) * 10px));
  flex: none;
  margin-top: 54px;
  text-decoration: none;
  transition: opacity .22s linear, filter .22s linear, transform .22s linear;
  display: block;
  position: relative;
}

.moving-image-item + .moving-image-item {
  margin-left: 120px;
}

.moving-image-item__meta-row {
  z-index: 6;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.moving-image-item__label, .moving-image-item__year {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #ffffff57;
  margin: 0;
  font-family: JetBrains Mono, monospace;
  font-size: 9px;
  line-height: 1.45;
  display: block;
}

.moving-image-item__media {
  aspect-ratio: 16 / 9;
  background: #ffffff08;
  border: 1px solid #ffffff14;
  width: 100%;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.moving-image-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.moving-image-item__media--placeholder {
  justify-content: center;
  align-items: center;
  display: flex;
}

.moving-image-placeholder-inner {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.moving-image-placeholder-text {
  letter-spacing: .22em;
  color: #ffffff3d;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
}

.moving-image-item__texts {
  margin-top: 12px;
}

.moving-image-item__title {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffff42;
  margin: 0;
  font-size: .8rem;
  font-weight: 500;
  transition: color .22s linear;
  display: block;
}

.moving-image-item__subtitle {
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #ffffff4d;
  margin: 7px 0 0;
  font-family: JetBrains Mono, monospace;
  font-size: 9px;
  line-height: 1.45;
  transition: color .22s linear, opacity .22s linear;
  display: block;
}

.moving-image-item.is-active .moving-image-item__title, .moving-image-item:hover .moving-image-item__title {
  color: #fffffff5;
}

.moving-image-item.is-active .moving-image-item__subtitle, .moving-image-item:hover .moving-image-item__subtitle {
  color: #ffffffb8;
}

.moving-image-hint {
  z-index: 11;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: #ffffff3d;
  opacity: 0;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 400;
  transition: opacity .6s, transform .6s;
  position: absolute;
  bottom: clamp(20px, 4vw, 36px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}

.moving-image-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.moving-image-hint.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.moving-image-overlay.is-returning {
  pointer-events: none;
}

.moving-image-overlay.is-returning .moving-image-transition-label {
  opacity: 0;
  transition: opacity .32s;
}

.moving-image-assets {
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  position: absolute;
  overflow: hidden;
}

.page.is-about-open .scene-wrap, .page.is-contact-open .scene-wrap, .page.is-interactive-art-open .scene-wrap, .page.is-moving-image-open .scene-wrap, .page.is-client-works-open .scene-wrap, .page.is-lab-open .scene-wrap, .page.is-archive-open .scene-wrap {
  opacity: 0;
  filter: blur(14px);
  transform: scale(.9);
}

.page.is-about-open .ui-layer, .page.is-about-open .action-log, .page.is-about-open .mouse-readout, .page.is-contact-open .ui-layer, .page.is-contact-open .action-log, .page.is-contact-open .mouse-readout, .page.is-interactive-art-open .ui-layer, .page.is-interactive-art-open .action-log, .page.is-interactive-art-open .mouse-readout, .page.is-moving-image-open .ui-layer, .page.is-moving-image-open .action-log, .page.is-moving-image-open .mouse-readout, .page.is-client-works-open .ui-layer, .page.is-client-works-open .action-log, .page.is-client-works-open .mouse-readout, .page.is-lab-open .ui-layer, .page.is-lab-open .action-log, .page.is-lab-open .mouse-readout, .page.is-archive-open .ui-layer, .page.is-archive-open .action-log, .page.is-archive-open .mouse-readout {
  opacity: 0;
  filter: blur(10px);
  transform: scale(.96) translateY(10px);
}

.page.is-about-open .top-ui__name, .page.is-contact-open .top-ui__name, .page.is-interactive-art-open .top-ui__name, .page.is-client-works-open .top-ui__name, .page.is-lab-open .top-ui__name, .page.is-archive-open .top-ui__name, .page.is-moving-image-open .top-ui__name {
  opacity: .55;
  transition: opacity .75s;
}

body.is-about-open-trail .cursor-trail, body.is-contact-open-trail .cursor-trail, body.is-interactive-art-open-trail .cursor-trail, body.is-moving-image-open-trail .cursor-trail, body.is-client-works-open-trail .cursor-trail, body.is-lab-open-trail .cursor-trail, body.is-archive-open-trail .cursor-trail {
  opacity: 0;
  filter: blur(8px);
}

.page.is-home-return-prep .scene-wrap, .page.is-home-return-prep .ui-layer, .page.is-home-return-prep .action-log, .page.is-home-return-prep .mouse-readout {
  opacity: 0 !important;
  filter: blur(10px) !important;
  transform: scale(.96) translateY(10px) !important;
}

.page.is-home-return-prep .top-ui__name {
  opacity: .55 !important;
}

body.is-home-return-prep-trail .cursor-trail {
  opacity: 0 !important;
  filter: blur(8px) !important;
}

.page.is-returning-home .scene-wrap, .page.is-returning-home .ui-layer, .page.is-returning-home .action-log, .page.is-returning-home .mouse-readout {
  opacity: 1 !important;
  filter: blur() !important;
  transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1), filter 1.2s cubic-bezier(.22, 1, .36, 1), transform 1.2s cubic-bezier(.22, 1, .36, 1) !important;
  transform: scale(1) translateY(0) !important;
}

.page.is-returning-home .top-ui__name {
  opacity: .55 !important;
  transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1) !important;
}

body.is-returning-home-trail .cursor-trail {
  opacity: 1 !important;
  filter: blur() !important;
  transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), filter 1.1s cubic-bezier(.22, 1, .36, 1) !important;
}

@media (width <= 1100px) {
  .about-layout__title {
    width: min(58vw, 760px);
    top: 18vh;
    left: 12vw;
  }

  .about-layout__statement {
    width: min(500px, 48vw);
    top: 48vh;
    left: 12vw;
  }

  .about-layout__cv {
    width: min(340px, 34vw);
    bottom: 8vh;
    right: 6vw;
  }

  .coming-layout__title-wrap {
    width: min(58vw, 760px);
    top: 18vh;
    left: 12vw;
  }

  .coming-layout__body {
    width: min(460px, 44vw);
    top: 48vh;
    left: 12vw;
  }
}

@media (width <= 900px) {
  .top-ui {
    top: 16px;
    left: 16px;
  }

  .top-ui__name {
    letter-spacing: .11em;
    font-size: .7rem;
  }

  .ui-layer__hint {
    letter-spacing: .14em;
    font-size: .64rem;
    bottom: 24px;
  }

  .action-log {
    bottom: 16px;
    left: 16px;
  }

  .mouse-readout {
    bottom: 16px;
    right: 16px;
  }

  .about-transition-label, .contact-transition-label, .panel-transition-label, .interactive-art-transition-label, .moving-image-transition-label, .client-works-transition-label {
    letter-spacing: .11em;
    font-size: .74rem;
  }

  .about-overlay.is-open {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  .about-overlay__inner {
    min-height: 100svh;
  }

  .about-layout {
    padding: 12vh 8vw 10vh;
  }

  .about-layout__title {
    width: 100%;
    margin-top: 8vh;
    position: relative;
    top: auto;
    left: auto;
  }

  .about-layout__statement {
    width: min(520px, 100%);
    margin-top: 7vh;
    position: relative;
    top: auto;
    left: auto;
  }

  .about-layout__cv {
    width: min(420px, 100%);
    margin-top: 9vh;
    margin-bottom: 28px;
    position: relative;
    bottom: auto;
    right: auto;
  }

  .about-title {
    font-size: clamp(2.3rem, 8vw, 4.8rem);
  }

  .contact-layout, .interactive-art-layout, .moving-image-layout, .client-works-layout, .contact-line-wrap, .interactive-art-line-wrap, .moving-image-line-wrap, .client-works-line-wrap {
    padding: 0 8vw;
  }

  .contact-line, .interactive-art-line, .client-works-line {
    margin: 0 44px;
  }

  .moving-image-line {
    margin: 22px 44px 0;
  }

  .contact-item {
    margin-right: 110px;
    font-size: .72rem;
  }

  .interactive-art-item {
    width: 360px;
    margin-top: 48px;
  }

  .interactive-art-item + .interactive-art-item {
    margin-left: 100px;
  }

  .interactive-art-item__title {
    font-size: .74rem;
  }

  .moving-image-item {
    width: 360px;
    margin-top: 48px;
  }

  .moving-image-item + .moving-image-item {
    margin-left: 100px;
  }

  .client-works-item {
    width: 360px;
    margin-top: 48px;
  }

  .client-works-item + .client-works-item {
    margin-left: 100px;
  }

  .coming-layout {
    padding: 12vh 8vw 10vh;
  }

  .coming-layout__title-wrap {
    width: 100%;
    margin-top: 8vh;
    position: relative;
    top: auto;
    left: auto;
  }

  .coming-layout__body {
    width: min(520px, 100%);
    margin-top: 7vh;
    position: relative;
    top: auto;
    left: auto;
  }

  .coming-title {
    font-size: clamp(2.3rem, 8vw, 4.8rem);
  }
}

@media (width <= 520px) {
  .top-ui {
    top: 14px;
    left: 14px;
  }

  .top-ui__name {
    letter-spacing: .1em;
    font-size: .7rem;
  }

  .ui-layer__hint {
    letter-spacing: .12em;
    font-size: .62rem;
    bottom: 20px;
  }

  .action-log {
    bottom: 14px;
    left: 14px;
  }

  .mouse-readout {
    bottom: 14px;
    right: 14px;
  }

  .action-log__item, .mouse-readout {
    font-size: 11px;
  }

  .about-transition-label, .contact-transition-label, .panel-transition-label, .interactive-art-transition-label, .moving-image-transition-label, .client-works-transition-label {
    letter-spacing: .1em;
    font-size: .7rem;
  }

  .about-layout {
    padding: 11vh 14px 28px;
  }

  .about-layout__title {
    margin-top: 7vh;
  }

  .about-layout__statement {
    gap: 14px;
    margin-top: 6vh;
  }

  .about-layout__statement p {
    font-size: .78rem;
    line-height: 1.72;
  }

  .about-layout__cv {
    gap: 18px;
    margin-top: 7vh;
  }

  .about-block h2 {
    font-size: .64rem;
  }

  .about-block p {
    font-size: .76rem;
    line-height: 1.64;
  }

  .contact-layout, .interactive-art-layout, .moving-image-layout, .client-works-layout, .contact-line-wrap, .interactive-art-line-wrap, .moving-image-line-wrap, .client-works-line-wrap {
    padding: 0 14px;
  }

  .contact-anchor, .interactive-art-anchor, .moving-image-anchor, .client-works-anchor {
    font-size: clamp(1.8rem, 10vw, 3rem);
  }

  .contact-line, .interactive-art-line, .client-works-line {
    margin: 0 28px;
  }

  .moving-image-line {
    margin: 18px 28px 0;
  }

  .contact-item {
    letter-spacing: .12em;
    margin-right: 80px;
    font-size: .66rem;
  }

  .contact-item:before {
    width: 5px;
    height: 5px;
    left: -16px;
  }

  .contact-hint, .interactive-art-hint, .moving-image-hint, .client-works-hint {
    letter-spacing: .12em;
    font-size: .62rem;
    bottom: 20px;
    left: 50%;
  }

  .coming-layout {
    padding: 11vh 14px 28px;
  }

  .coming-layout__title-wrap {
    margin-top: 7vh;
  }

  .coming-layout__body {
    margin-top: 6vh;
  }

  .coming-copy {
    font-size: .74rem;
    line-height: 1.68;
  }

  .interactive-art-item {
    width: min(78vw, 300px);
    margin-top: 40px;
  }

  .interactive-art-item + .interactive-art-item {
    margin-left: 72px;
  }

  .interactive-art-item__title {
    letter-spacing: .12em;
    font-size: .66rem;
  }

  .interactive-art-item__meta, .interactive-art-item__label, .interactive-art-item__year {
    font-size: 8px;
  }

  .moving-image-item {
    width: min(78vw, 300px);
    margin-top: 40px;
  }

  .moving-image-item + .moving-image-item {
    margin-left: 72px;
  }

  .moving-image-item__title {
    letter-spacing: .12em;
    font-size: .66rem;
  }

  .moving-image-item__subtitle, .moving-image-item__label, .moving-image-item__year {
    font-size: 8px;
  }

  .client-works-item {
    width: min(78vw, 300px);
    margin-top: 40px;
  }

  .client-works-item + .client-works-item {
    margin-left: 72px;
  }

  .client-works-item__title {
    letter-spacing: .12em;
    font-size: .66rem;
  }

  .client-works-item__meta, .client-works-item__label, .client-works-item__year, .client-works-item__note {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-ui__name, .ui-layer__hint, .loading, .action-log__item, .scene-wrap, .ui-layer, .action-log, .mouse-readout, .cursor-trail, .about-overlay, .about-layout, .contact-overlay, .contact-layout, .contact-anchor, .contact-line, .contact-item, .contact-hint, .contact-transition-label, .contact-line__glow, .panel-overlay, .coming-layout, .coming-title, .coming-copy, .panel-transition-label, .interactive-art-overlay, .interactive-art-layout, .interactive-art-anchor, .interactive-art-line, .interactive-art-item, .interactive-art-hint, .interactive-art-transition-label, .interactive-art-line__glow, .client-works-overlay, .client-works-layout, .client-works-anchor, .client-works-line, .client-works-item, .client-works-hint, .client-works-transition-label, .client-works-line__glow, .moving-image-overlay, .moving-image-layout, .moving-image-anchor, .moving-image-line, .moving-image-item, .moving-image-hint, .moving-image-transition-label, .moving-image-line__glow, .moving-image-stage, .moving-image-stage__video {
    transition: none;
    animation: none;
  }
}

.overlay-back {
  z-index: 300;
  cursor: pointer;
  color: #ffffff8c;
  will-change: transform;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 8px;
  font-family: Montserrat, sans-serif;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .35s, text-shadow .35s, opacity .35s;
  display: flex;
  position: fixed;
  top: 18px;
  right: 20px;
}

.overlay-back:hover {
  color: #ffffffe6;
  text-shadow: 0 0 10px #ffffff26;
  transform: translateX(-6px);
}

.overlay-back:active {
  transform: translateX(-3px) scale(.96);
}

@media (width <= 900px) {
  .overlay-back {
    font-size: 22px;
    top: 16px;
    right: 16px;
  }
}

body.page-blur-enter {
  opacity: 0;
  filter: blur(14px);
  transform: scale(.985);
}

body.page-blur-ready {
  transition: opacity 1.8s cubic-bezier(.22, 1, .36, 1), filter 1.8s cubic-bezier(.22, 1, .36, 1), transform 1.8s cubic-bezier(.22, 1, .36, 1);
}

body.page-blur-leave {
  opacity: 0;
  filter: blur(14px);
  transform: scale(.985);
}

.moving-image-item, .interactive-art-item, .client-works-item {
  position: relative;
}

.moving-image-item__meta-row, .interactive-art-item__meta-row, .client-works-item__meta-row {
  z-index: 6;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.moving-image-item__media, .interactive-art-item__media, .client-works-item__media {
  z-index: 1;
  margin-top: 20px;
  position: relative;
}

.archive-drag-hint {
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffff47;
  pointer-events: none;
  font-family: JetBrains Mono, monospace;
  font-size: 10px;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.interactive-art-item, .moving-image-item, .client-works-item {
  transition: filter .22s linear, transform .22s linear !important;
}

.interactive-art-item__title, .interactive-art-item__meta, .moving-image-item__title, .moving-image-item__subtitle, .client-works-item__title, .client-works-item__meta {
  transition: none !important;
}

.interactive-art-overlay.is-open:not(.is-content-visible) .interactive-art-item {
  opacity: calc(.45 + (var(--focus-strength) * .55)) !important;
}
/*# sourceMappingURL=Project P.2cdaf7bc.css.map */