:root {
  color-scheme: light;
  --ink: #171714;
  --muted: #8a8983;
  --hairline: rgba(23, 23, 20, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.intro {
  position: fixed;
  top: clamp(24px, 4vw, 54px);
  left: clamp(24px, 4vw, 58px);
  z-index: 20;
}

.intro h1,
.intro p,
.hint,
figure {
  margin: 0;
}

.intro h1 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.intro p,
.hint {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.015em;
}

.send-moment {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 9px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: #65645f;
  font-size: 10px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease;
}

.send-moment:hover,
.send-moment:focus-visible {
  border-color: rgba(23, 23, 20, 0.24);
  color: var(--ink);
}

.send-moment:focus-visible {
  outline: 1px solid rgba(23, 23, 20, 0.38);
  outline-offset: 3px;
}

.field {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(22px, 4vh, 54px) clamp(10px, 2vw, 34px);
  width: 100vw;
  height: 100svh;
  padding: clamp(110px, 15vh, 160px) clamp(26px, 5vw, 76px) clamp(72px, 10vh, 100px);
  perspective: 1000px;
}

.moment {
  --scale: 0.88;
  --lift: 0px;
  --drag-x: 0px;
  --drag-y: 0px;
  --pin-x: 0px;
  --pin-y: 0px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  opacity: 0.52;
  outline: none;
  transform:
    translate3d(var(--drag-x), var(--drag-y), 0)
    translate3d(var(--pin-x), var(--pin-y), 0)
    translateY(var(--lift))
    scale(var(--scale));
  transition:
    opacity 360ms ease,
    filter 420ms ease,
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
  filter: saturate(0.68) contrast(0.96);
  will-change: transform, opacity;
}

.moment.is-dragging,
.moment.is-dragging.is-active {
  z-index: 30;
  cursor: grabbing;
  transition: none;
}

.moment.is-returning {
  transition:
    opacity 360ms ease,
    filter 420ms ease,
    transform 760ms cubic-bezier(0.22, 1.45, 0.36, 1);
}

.moment.is-pinned,
.moment.is-pinned.is-active {
  --scale: var(--pin-scale) !important;
  --lift: 0px !important;
  z-index: 40;
  opacity: 1 !important;
  filter: none;
  transform-origin: center center !important;
}

body.has-pinned .moment:not(.is-pinned) {
  opacity: 0.08 !important;
  filter: saturate(0.2);
  pointer-events: none;
}

.moment--landscape {
  aspect-ratio: 16 / 10;
}

.moment--portrait {
  width: min(52%, 118px);
  aspect-ratio: 9 / 16;
}

.moment--square {
  width: min(74%, 176px);
  aspect-ratio: 6 / 7;
}

.moment video,
.moment img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: #f8f8f6;
  box-shadow: 0 1px 2px rgba(20, 20, 16, 0.035);
  object-fit: contain;
}

.moment figcaption {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  max-width: 180px;
  color: #9c9b95;
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 220ms ease, transform 300ms ease;
  white-space: nowrap;
}

.caption-heading {
  display: flex;
  gap: 7px;
}

.caption-title {
  color: #484842;
  font-weight: 400;
  letter-spacing: 0;
}

.caption-description,
.caption-source {
  display: none;
}

.moment.is-active,
.moment:hover,
.moment:focus-visible {
  --scale: 2.12 !important;
  --lift: -7px !important;
  z-index: 12;
  opacity: 1 !important;
  filter: none;
}

.moment.is-active figcaption,
.moment:hover figcaption,
.moment:focus-visible figcaption {
  opacity: 1;
  transform: translateY(0) scale(0.472);
  transform-origin: top left;
}

.moment:focus-visible video,
.moment:focus-visible img {
  outline: 1px solid rgba(23, 23, 20, 0.38);
  outline-offset: 4px;
}

.hint {
  position: fixed;
  right: clamp(24px, 4vw, 58px);
  bottom: clamp(22px, 3vw, 44px);
}

.detail {
  position: fixed;
  top: clamp(24px, 4vw, 54px);
  right: clamp(24px, 4vw, 58px);
  z-index: 50;
  width: min(350px, 32vw);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 240ms ease,
    top 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
    right 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.detail.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.has-pinned .detail {
  top: 50%;
  right: clamp(28px, 6vw, 86px);
  width: min(360px, 30vw);
  transform: translateY(-50%);
}

.detail-number,
.detail-title,
.detail-description,
.detail-source {
  margin: 0;
}

.detail-number,
.detail-source {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.detail-title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.detail-description {
  margin-top: 7px;
  color: #484842;
  font-size: 12px;
  line-height: 1.5;
}

.detail-source {
  margin-top: 11px;
  text-transform: none;
}

.noscript {
  position: fixed;
  left: 24px;
  bottom: 20px;
  margin: 0;
  font-size: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .moment {
    cursor: grab;
    touch-action: none;
    user-select: none;
  }

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

@media (max-width: 820px) and (hover: hover) {
  .field {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .moment.is-active,
  .moment:hover,
  .moment:focus-visible {
    --scale: 1.72 !important;
  }
}

@media (max-width: 600px), (hover: none), (pointer: coarse) {
  body {
    overflow: auto;
  }

  .intro {
    position: relative;
    top: auto;
    left: auto;
    padding: 28px 22px 52px;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 72px;
    width: 100%;
    height: auto;
    padding: 0 22px 92px;
    overflow: hidden;
  }

  .moment,
  .moment.is-active,
  .moment:hover,
  .moment:focus-visible {
    --scale: 1 !important;
    --lift: 0 !important;
    flex: 0 0 auto;
    width: min(100%, 620px);
    max-height: none;
    aspect-ratio: auto;
    opacity: 1 !important;
    filter: none;
    transform: none;
  }

  .moment--portrait video,
  .moment--portrait img {
    width: min(58vw, 310px) !important;
    margin-inline: auto;
  }

  .moment--square video,
  .moment--square img {
    width: min(80vw, 460px) !important;
    margin-inline: auto;
  }

  .moment video,
  .moment img {
    height: auto;
  }

  .moment--landscape video,
  .moment--landscape img {
    aspect-ratio: 16 / 10;
  }

  .moment--portrait video,
  .moment--portrait img {
    aspect-ratio: 9 / 16;
  }

  .moment--square video,
  .moment--square img {
    aspect-ratio: 6 / 7;
  }

  .moment figcaption,
  .moment.is-active figcaption,
  .moment:hover figcaption,
  .moment:focus-visible figcaption {
    display: block;
    position: static;
    margin-top: 10px;
    width: 100%;
    max-width: 620px;
    color: #9c9b95;
    font-size: 10px;
    line-height: 1.45;
    opacity: 1;
    transform: none;
    white-space: normal;
  }

  .caption-heading {
    gap: 8px;
  }

  .caption-title {
    font-size: 11px;
  }

  .caption-description,
  .caption-source {
    display: block;
  }

  .caption-description {
    margin-top: 8px;
    color: #484842;
    font-size: 12px;
    line-height: 1.5;
  }

  .caption-source {
    margin-top: 8px;
    font-size: 10px;
  }

  .detail {
    display: none;
  }

  .hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moment,
  .moment figcaption {
    transition-duration: 1ms;
  }
}