:root {
  --scene-ratio: 1.7768331562;
  --wall: #fffdf8;
  --ink: #334139;
  --fade-out-duration: 300ms;
  --fade-in-duration: 300ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--wall);
}

body {
  color: var(--ink);
  font-family:
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.gallery-stage {
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, #fffefb 0%, var(--wall) 72%);
  overscroll-behavior: none;
  touch-action: pan-y pinch-zoom;
}

.willow-leaf-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  user-select: none;
}

.willow-leaf {
  position: absolute;
  top: -12vh;
  left: var(--leaf-x);
  display: block;
  width: clamp(5px, 0.48vw, 9px);
  height: clamp(17px, 1.45vw, 27px);
  border-radius: 90% 8% 90% 8%;
  opacity: 0;
  background:
    linear-gradient(
      120deg,
      rgba(178, 190, 126, 0.62),
      rgba(100, 137, 85, 0.76) 48%,
      rgba(72, 112, 76, 0.52)
    );
  box-shadow: inset 1px 0 rgba(241, 238, 189, 0.28);
  filter: drop-shadow(0 2px 2px rgba(70, 91, 66, 0.12));
  transform-origin: 50% 12%;
  will-change: transform, opacity;
  animation: willow-drift var(--leaf-duration) ease-in-out var(--leaf-delay)
    infinite;
}

.willow-leaf::after {
  position: absolute;
  top: 13%;
  left: 50%;
  width: 1px;
  height: 72%;
  content: "";
  background: rgba(66, 104, 70, 0.3);
  transform: rotate(13deg);
  transform-origin: top;
}

.willow-leaf:nth-child(2n) {
  width: clamp(4px, 0.4vw, 8px);
  height: clamp(15px, 1.25vw, 24px);
  animation-name: willow-drift-soft;
}

.willow-leaf:nth-child(3n) {
  filter: blur(0.15px) drop-shadow(0 2px 2px rgba(70, 91, 66, 0.1));
}

@keyframes willow-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, -4vh, 0) rotate(12deg);
  }

  12% {
    opacity: 0.36;
  }

  32% {
    transform: translate3d(15vw, 24vh, 0) rotate(126deg);
  }

  58% {
    opacity: 0.42;
    transform: translate3d(34vw, 54vh, 0) rotate(274deg);
  }

  82% {
    opacity: 0.28;
    transform: translate3d(55vw, 84vh, 0) rotate(408deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(74vw, 118vh, 0) rotate(548deg);
  }
}

@keyframes willow-drift-soft {
  0% {
    opacity: 0;
    transform: translate3d(0, -8vh, 0) rotate(-18deg);
  }

  14% {
    opacity: 0.3;
  }

  38% {
    transform: translate3d(12vw, 30vh, 0) rotate(112deg);
  }

  64% {
    opacity: 0.36;
    transform: translate3d(29vw, 61vh, 0) rotate(242deg);
  }

  86% {
    opacity: 0.22;
    transform: translate3d(46vw, 88vh, 0) rotate(356deg);
  }

  100% {
    opacity: 0;
    transform: translate3d(61vw, 116vh, 0) rotate(478deg);
  }
}

.scene-canvas {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  width: min(100vw, calc(100dvh * var(--scene-ratio)));
  height: min(100dvh, calc(100vw / var(--scene-ratio)));
  overflow: hidden;
  transform: translateX(-50%);
}

.page-stack,
.gallery-page {
  position: absolute;
  inset: 0;
}

.page-stack {
  z-index: 1;
}

.gallery-page {
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  contain: layout paint;
}

.gallery-page.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.gallery-page.is-active,
.gallery-page.is-entering {
  will-change: opacity;
}

.gallery-page.is-active.is-leaving {
  opacity: 0;
  transition: opacity var(--fade-out-duration) ease-in;
}

.gallery-page.is-entering {
  z-index: 2;
  visibility: visible;
  opacity: 0;
}

.gallery-page.is-entering.is-visible {
  opacity: 1;
  transition: opacity var(--fade-in-duration) ease-out;
}

.scene-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.window-layer {
  position: absolute;
  inset: 0;
}

.work-window {
  position: absolute;
  top: 36%;
  width: 27.25%;
  height: 31.2%;
  overflow: hidden;
  background: rgba(255, 253, 248, 0.78);
}

.project-entry {
  --entry-frame-position: 7.63% 52.33%;

  isolation: isolate;
  display: block;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.project-entry::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(1px, 0.12vw, 2px);
  pointer-events: none;
  content: "";
  background-image: url("./assets/wall-scene-v1.png");
  background-repeat: no-repeat;
  background-position: var(--entry-frame-position);
  background-size: 366.972% 320.513%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.project-entry:focus-visible {
  outline: 3px solid rgba(166, 66, 50, 0.82);
  outline-offset: -4px;
}

.work-preview {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.06);
  transform-origin: center;
  transition:
    filter 180ms ease,
    transform 180ms ease;
  user-select: none;
}

.project-entry:hover .work-preview {
  filter: brightness(1.04);
}

.slot-1 {
  left: 5.55%;
}

.slot-2 {
  left: 36.35%;
}

.slot-3 {
  left: 67.2%;
}

.work-art {
  position: absolute;
  inset: 0;
}

.work-art {
  background-image: url("./assets/work-sprite-v2-head-cleaned.png");
  background-repeat: no-repeat;
  background-size: 366% 311%;
  transition: filter 180ms ease;
}

.art-1 {
  background-position: 7.6% 52%;
}

.art-2 {
  background-position: 50% 52%;
}

.art-3 {
  background-position: 92.6% 52%;
}

.palette-2 .work-art {
  filter: hue-rotate(22deg) saturate(0.86) brightness(1.03);
}

.palette-3 .work-art {
  filter: hue-rotate(-18deg) saturate(0.78) brightness(1.04);
}

.palette-4 .work-art {
  filter: hue-rotate(38deg) saturate(0.72) brightness(1.05);
}

.walker-layer {
  position: absolute;
  bottom: 2%;
  z-index: 4;
  width: auto;
  height: 46%;
  pointer-events: none;
  transform: translateX(-50%);
  user-select: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-aspect-ratio: 4 / 5) {
  .scene-canvas {
    width: 100vw;
    height: calc(100vw / var(--scene-ratio));
  }
}

@media (max-aspect-ratio: 16 / 9) {
  .scene-background {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 8%,
      #000 22%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 8%,
      #000 22%,
      #000 100%
    );
  }
}

@media (min-aspect-ratio: 16 / 9) {
  .scene-background {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .willow-leaf-layer {
    display: none;
  }

  .gallery-page,
  .gallery-page.is-active.is-leaving,
  .gallery-page.is-entering.is-visible,
  .work-art,
  .work-preview {
    transition: none;
  }
}