@font-face {
  font-family: "Gabriele";
  src: url("assets/fonts/gabriele-d.ttf") format("truetype");
  font-display: swap;
}

:root {
  --paper: #fafafa;
  --ink: #111111;
  --muted: rgba(17, 17, 17, 0.54);
  --edge: rgba(17, 17, 17, 0.14);
  --type: "Gabriele", "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type);
}

body {
  overscroll-behavior: none;
}

body.viewer-open {
  overflow: hidden !important;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: url("assets/textures/wabi-paper.png") center / 540px 675px repeat;
  mix-blend-mode: multiply;
  opacity: 0.25;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
}

button:focus-visible,
a:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.viewport {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-perspective: 1500px;
  -webkit-perspective-origin: var(--perspective-x, 50%) var(--perspective-y, 50%);
  perspective: 1500px;
  perspective-origin: var(--perspective-x, 50%) var(--perspective-y, 50%);
}

.viewport.is-dragging {
  cursor: grabbing;
}

.photo-plane {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform-origin: 0 0;
  will-change: transform;
}

.photo-card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-width);
  margin: 0;
  contain: layout paint style;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.photo-card button {
  display: block;
  width: 100%;
  cursor: inherit;
  opacity: 0;
  transform: translate3d(var(--entry-x, 0), var(--entry-y, 0), 0) scale(0.24);
  transform-origin: center;
}

.archive-ready .photo-card:not(.opening-card) button {
  animation: disperse-in 1050ms cubic-bezier(0.18, 0.78, 0.12, 1) both;
  animation-delay: calc(80ms + var(--order) * 12ms);
}

.photo-card.opening-card button {
  transform: translate3d(0, 0, 0) scale(1.28);
}

.photo-card.opening-card {
  contain: layout style;
}

.archive-ready .photo-card.opening-card {
  contain: layout paint style;
}

.photo-entering .photo-card.opening-card button {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.28);
  transition:
    opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 950ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-settling .photo-card.opening-card button {
  transform: translate3d(0, 0, 0) scale(1);
  transition-duration: 950ms;
}

.archive-ready .photo-card.opening-card button {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.photo-card img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.07);
  transform: scale(1);
  transition:
    filter 420ms ease,
    opacity 320ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-ready .photo-card:hover img,
.archive-ready .photo-card:focus-within img {
  filter: grayscale(0.25) contrast(1.04);
  transform: scale(1.018);
}

.photo-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 7px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  opacity: 0;
  transition: opacity 220ms ease;
}

.archive-ready .photo-card:hover .photo-meta,
.archive-ready .photo-card:focus-within .photo-meta {
  opacity: 1;
}

.opening-frame {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 20;
  width: clamp(230px, 25vw, 390px);
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.opening-frame img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(1.07);
}

.photo-entering .opening-frame {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.photo-entering.archive-ready .opening-frame {
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
}

.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: transparent;
  opacity: 1;
  transition:
    opacity 850ms cubic-bezier(0.55, 0, 0.45, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-intro span {
  font-size: clamp(19px, 2vw, 28px);
  letter-spacing: 0;
}

.brand-leaving .brand-intro {
  opacity: 0;
  transform: scale(1.035);
}

.loading-note {
  position: fixed;
  left: 50%;
  bottom: 72px;
  z-index: 22;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 500ms ease;
}

.photo-entering .loading-note {
  opacity: 1;
}

.archive-ready .loading-note {
  opacity: 0;
}

.hud {
  position: fixed;
  z-index: 40;
  display: grid;
  width: 100%;
  padding-right: max(30px, env(safe-area-inset-right));
  padding-left: max(30px, env(safe-area-inset-left));
  pointer-events: none;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}

.photo-entering .hud {
  opacity: 1;
}

.hud p {
  margin: 0;
}

.hud-top {
  top: 0;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding-top: max(25px, env(safe-area-inset-top));
}

.wordmark,
.reset-view {
  width: max-content;
  pointer-events: auto;
  text-decoration: none;
}

.site-title {
  margin: 0;
  font: inherit;
  line-height: inherit;
}

.wordmark::before,
.reset-view::before {
  content: "( ";
}

.wordmark::after,
.reset-view::after {
  content: " )";
}

.reset-view {
  justify-self: end;
  cursor: pointer;
}

.archive-center {
  display: grid;
  justify-items: center;
  gap: 8px;
  pointer-events: none;
}

.archive-count {
  justify-self: center;
  color: var(--muted);
}

.zoom-controls {
  display: grid;
  grid-template-columns: 20px 42px 20px;
  align-items: center;
  pointer-events: auto;
  color: var(--muted);
}

.zoom-controls button {
  width: 20px;
  height: 20px;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
}

.zoom-controls button:hover,
.zoom-controls button:focus-visible {
  color: var(--ink);
}

.zoom-readout {
  text-align: center;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.hud-bottom {
  bottom: 0;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  align-items: end;
  padding-bottom: max(25px, env(safe-area-inset-bottom));
}

.drag-note {
  color: var(--muted);
}

.credit,
.edition {
  justify-self: center;
}

.copyright {
  justify-self: end;
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(250, 250, 250, 0.985);
  color: var(--ink);
  opacity: 0;
  touch-action: none;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.viewer[hidden] {
  display: none;
}

.viewer-close {
  position: fixed;
  top: max(22px, env(safe-area-inset-top));
  right: max(28px, env(safe-area-inset-right));
  z-index: 4;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 25px;
  line-height: 30px;
}

.viewer-close:focus-visible {
  outline-offset: 0;
}

.viewer-content {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 64px 32px 52px;
  opacity: 1;
  transform: none;
}

.viewer.is-visible {
  opacity: 1;
}

.viewer.is-closing {
  opacity: 0;
  transition-duration: 680ms;
}

.viewer-image,
.viewer-full-image {
  grid-area: 1 / 1;
  display: block;
  max-width: min(82vw, 1220px);
  max-height: calc(100vh - 132px);
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: 0;
  transition: opacity 180ms ease;
}

.viewer-full-image {
  opacity: 0;
  transition: opacity 260ms ease;
}

.viewer.is-settled .viewer-image {
  opacity: 1;
  transition: none;
}

.viewer.is-full-ready.is-settled .viewer-full-image {
  opacity: 1;
}

.viewer-content figcaption {
  position: fixed;
  right: max(30px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  left: max(30px, env(safe-area-inset-left));
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  opacity: 0;
  transition: opacity 350ms ease;
}

.viewer.is-settled .viewer-content figcaption {
  opacity: 1;
}

.shared-photo-transition {
  position: fixed;
  z-index: 3;
  display: block;
  margin: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(1.05);
  transform-origin: top left;
  will-change: transform, opacity;
}

@keyframes disperse-in {
  from {
    opacity: 0;
    transform: translate3d(var(--entry-x, 0), var(--entry-y, 0), 0) scale(0.24);
  }
  64% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html {
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
  }

  body {
    height: auto;
    min-height: 100%;
    overflow: visible;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }

  .viewport {
    position: relative;
    inset: auto;
    min-height: 100vh;
    overflow: visible;
    cursor: auto;
    touch-action: pan-y;
    user-select: auto;
    -webkit-perspective: none;
    perspective: none;
  }

  .viewport.is-dragging {
    cursor: auto;
  }

  .photo-plane {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 28vh;
    min-height: 100vh;
    padding: 34vh 18px 28vh;
    transform: none !important;
    touch-action: pan-y;
    will-change: auto;
  }

  .photo-card {
    position: relative;
    top: auto;
    left: auto;
    width: min(84vw, 370px);
    margin: 0;
    contain: layout paint style;
    transform: none !important;
    scroll-margin-block: 12vh;
    scroll-snap-align: none;
  }

  .photo-card:nth-child(3n + 1) {
    align-self: flex-start;
  }

  .photo-card:nth-child(3n + 2) {
    align-self: center;
  }

  .photo-card:nth-child(3n) {
    align-self: flex-end;
  }

  .archive-ready .photo-card:not(.opening-card) button,
  .photo-card.mobile-pending button {
    animation: none;
    opacity: 0;
    transform: translate3d(0, 64px, 0) scale(0.94);
  }

  .archive-ready .photo-card.mobile-visible button {
    animation: mobile-card-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .photo-card.mobile-pending .photo-meta {
    opacity: 0;
  }

  .photo-card.mobile-visible .photo-meta {
    opacity: 1;
    transition: opacity 500ms ease 260ms;
  }

  .photo-card.opening-card {
    align-self: center;
  }

  .photo-card.opening-card button {
    transform: translate3d(0, 0, 0) scale(1.14);
  }

  .photo-card.opening-card .photo-meta {
    opacity: 0;
  }

  .photo-entering .photo-card.opening-card button {
    transform: translate3d(0, 0, 0) scale(1.14);
  }

  .hero-settling .photo-card.opening-card button,
  .archive-ready .photo-card.opening-card button {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .hud {
    padding-right: max(18px, env(safe-area-inset-right));
    padding-left: max(18px, env(safe-area-inset-left));
    font-size: 9px;
  }

  .hud-top {
    grid-template-columns: 1fr 1fr;
    padding-top: max(18px, env(safe-area-inset-top));
  }

  .archive-center {
    display: none;
  }

  .hud-bottom {
    grid-template-columns: 1fr 1fr;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .credit,
  .edition {
    display: none;
  }

  .opening-frame {
    width: min(62vw, 320px);
  }

  .photo-meta {
    opacity: 1;
  }

  .viewer-content {
    padding: 58px 18px 48px;
  }

  .viewer-image,
  .viewer-full-image {
    max-width: 92vw;
    max-height: calc(100vh - 120px);
  }
}

@keyframes mobile-card-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 64px, 0) scale(0.94);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.01);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}