/* A scroll gesture plays the complete arrival of the archive. */
.portfolio { overflow: visible; }
.document-transition { position: relative; }
.document-stage { position: relative; isolation: isolate; }
.document-desk {
  position: relative;
  display: grid;
  width: 100%;
  height: 100svh;
  place-items: center;
  overflow: hidden;
}
.document-desk__surface {
  position: absolute;
  inset: 0;
  background: #fff;
  pointer-events: none;
}
.portfolio-document {
  position: relative;
  width: min(84vw, calc((100svh - 112px) * 969 / 724), 1280px);
  aspect-ratio: 969 / 724;
  margin: 0;
  background: #fff;
  border: 1px solid rgb(0 0 0 / .06);
  box-shadow: 0 24px 60px rgb(36 25 22 / .16), 0 4px 12px rgb(36 25 22 / .08);
  transform: rotate(-1.1deg);
  transform-origin: center;
}
.portfolio-document__fallback { position: relative; padding: 12px 20px; }
.archive-hint { display: none; }
@media (min-width: 960px) {
  .document-desk.is-settled .archive-hint {
    position: absolute; z-index: 6; top: clamp(28px, 7svh, 80px); left: 50%;
    display: flex; align-items: center; gap: 12px; transform: translateX(-50%);
    padding: 10px 14px; border: 0; background: none; color: #817b74;
    font: inherit; font-size: 12px; letter-spacing: .06em; white-space: nowrap;
    cursor: pointer; pointer-events: auto;
  }
  .archive-hint:hover { color: #ba5c57; }
  .archive-hint:focus-visible { outline: 2px solid #ba5c57; outline-offset: 4px; border-radius: 4px; }
  .archive-hint__mouse { position: relative; width: 12px; height: 18px; border: 1px solid currentColor; border-radius: 7px; }
  .archive-hint__mouse::after { position: absolute; top: 3px; left: 50%; width: 1px; height: 4px; background: currentColor; content: ''; }
  .archive-hint__arrow { margin-left: 4px; color: #ba5c57; font-size: 17px; }
}
.has-document-motion body { height: 100svh; min-height: 0; overflow: hidden; overscroll-behavior: none; }
.has-document-motion .document-transition { height: 100svh; }
.has-document-motion .document-stage {
  position: relative;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}
.has-document-motion .document-desk {
  position: absolute;
  z-index: 5;
  inset: 0;
  perspective: 1600px;
  pointer-events: none;
}
.has-document-motion .document-desk__surface { clip-path: inset(100% 0 0); }
.has-document-motion .portfolio-document {
  opacity: 0;
  transform: translate3d(90vw, -80svh, 0) rotate(18deg) scale(1.4);
  filter: blur(18px);
  pointer-events: none;
}
.has-document-motion .document-desk.is-settled .portfolio-document { pointer-events: auto; }
.has-document-motion .document-desk.is-moving .portfolio-document { will-change: transform, opacity, filter; }
.has-document-motion .document-desk.is-moving .document-desk__surface { will-change: clip-path; }
@media (max-width: 959px) {
  .portfolio-document { width: calc(100vw - 40px); height: min(76svh, 700px); aspect-ratio: auto; }
  .portfolio-document { box-shadow: 0 16px 40px rgb(36 25 22 / .14), 0 3px 9px rgb(36 25 22 / .08); }
}
@media (prefers-reduced-motion: reduce) {
  .has-document-motion body { height: auto; min-height: 100svh; overflow: visible; overscroll-behavior: auto; }
  .has-document-motion .document-transition { height: auto; }
  .has-document-motion .document-stage { position: relative; height: auto; overflow: visible; }
  .has-document-motion .document-desk { position: relative; inset: auto; pointer-events: auto; }
  .has-document-motion .document-desk__surface { clip-path: none !important; }
  .has-document-motion .portfolio-document { opacity: 1 !important; transform: none !important; filter: none !important; pointer-events: auto; }
}