@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/bai-jamjuree-700.woff2") format("woff2");
}

:root {
  --wall-color: #f2eee5;
  --ink-color: #211f1b;
  --focus-color: #b92b22;
  --gallery-easing: cubic-bezier(0.2, 0.75, 0.2, 1);
  /* Desktop motion is immediate and decisive; mobile softens the launch. */
  --artwork-easing: cubic-bezier(0.3333, 1, 0.6667, 1);
  --copy-duration: 560ms;

  color-scheme: light;
  background: var(--wall-color);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--wall-color);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 12%, rgb(255 255 255 / 24%), transparent 32rem),
    var(--wall-color);
}

/* Gallery canvas --------------------------------------------------------- */

.gallery-viewport {
  min-height: 100vh;
}

.wall {
  --unit: min(6.9vw, 7.8rem);
  --focus-bottom-space: 0px;
  --camera-y: 0px;
  --motion-duration: 560ms;

  position: relative;
  z-index: 1;
  width: calc(10 * var(--unit));
  height: calc(23.6 * var(--unit) + var(--focus-bottom-space));
  margin: clamp(1rem, 3vw, 3rem) auto;
  overflow-anchor: none;
  transition: height 560ms var(--gallery-easing);
}

.wall.is-expanding-focus-space {
  transition-duration: 0ms;
}

.wall.is-staging-camera {
  transition-property: none;
}

.wall.is-staging-camera .piece,
.wall.is-staging-camera .contact {
  transition-property: none;
}

@media (min-width: 48.01rem) and (max-width: 80rem) {
  .wall {
    --unit: 7.2vw;

    margin-block: clamp(3rem, 6vw, 5rem);
  }
}

@media (max-width: 48rem) {
  :root {
    /* A softer launch prevents large first-frame jumps on phone displays. */
    --artwork-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  html {
    overscroll-behavior: none;
  }

  body {
    overflow: hidden;
  }

  .gallery-viewport {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: none;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .gallery-viewport::-webkit-scrollbar {
    display: none;
  }

  .wall {
    --unit: 17vw;

    margin: 2.5rem 36vw 4rem;
  }

  .wall .contact {
    top: calc(3.8 * var(--unit));
    left: -32vw;
  }

  .artwork-details {
    width: min(19rem, calc(100vw - 2rem));
  }
}

/* Artwork --------------------------------------------------------------- */

.piece {
  --repel-x: 0px;
  --repel-y: 0px;
  --focus-scale: 1;
  --move-duration: 560ms;
  --placeholder-image: none;
  --sold-top-room: 0px;

  position: absolute;
  top: calc(var(--y) * var(--unit) + var(--sold-top-room));
  left: calc(var(--x) * var(--unit));
  width: calc(var(--feet) * var(--unit));
  margin: 0;
  /* A stable shared layer avoids Safari's first-focus image flash. */
  z-index: 1;
  transform:
    translate3d(
      var(--repel-x),
      calc(var(--repel-y) + var(--camera-y)),
      0
    )
    scale(var(--focus-scale));
  transform-origin: 0 0;
  transition: transform var(--move-duration) var(--artwork-easing);
  will-change: transform;
}

.piece.is-sold {
  --sold-top-room: calc(0.24 * var(--unit));
}

.piece::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--placeholder-image) center / 100% 100% no-repeat;
  filter: blur(0.32rem);
  opacity: 1;
  transform: scale(1.012);
  transition: opacity 220ms ease-out;
}

.piece.is-loaded::before {
  opacity: 0;
}

.piece:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 0.45rem;
}

.piece img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(-0.6rem 0.42rem 0.05rem rgb(45 36 29 / 24%))
    drop-shadow(0.46rem 0.64rem 0.13rem rgb(54 40 29 / 16%))
    drop-shadow(0 0.9rem 0.38rem rgb(34 27 22 / 9%));
}

.piece > img:not(.sold-tag) {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.piece.is-loaded > img:not(.sold-tag) {
  opacity: 1;
}

.piece .sold-tag {
  position: absolute;
  top: -7%;
  left: -2%;
  z-index: 0;
  width: 36%;
  height: auto;
  transform: none;
  filter:
    blur(0.32rem)
    drop-shadow(0.11rem 0.16rem 0.12rem rgb(40 22 17 / 24%));
  transition: filter 220ms ease-out;
}

.piece.is-loaded .sold-tag {
  filter: drop-shadow(0.11rem 0.16rem 0.12rem rgb(40 22 17 / 24%));
}

/* Selected-artwork details --------------------------------------------- */

.artwork-details {
  --details-x: 0px;
  --details-y: 0px;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: clamp(13rem, 21vw, 19rem);
  color: var(--ink-color);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--details-x), var(--details-y), 0);
  transition: opacity var(--copy-duration) var(--artwork-easing);
}

.artwork-details.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.artwork-details.is-staging {
  transition: none;
}

.artwork-details.artwork-details--ghost {
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--copy-duration) var(--artwork-easing);
}

.artwork-details--ghost.is-fading {
  opacity: 0;
}

.artwork-details__content {
  display: grid;
  gap: 0.7rem;
  font-family: "Bai Jamjuree", "Eurostile", sans-serif;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.artwork-details__title,
.artwork-details__description,
.artwork-details__price,
.artwork-details__sales {
  margin: 0;
}

.artwork-details__title {
  font-size: clamp(1.02rem, 1.25vw, 1.4rem);
  line-height: 1;
}

.artwork-details__description {
  font-size: clamp(0.72rem, 0.78vw, 0.86rem);
  line-height: 1.25;
}

.artwork-details.has-long-copy .artwork-details__description {
  font-size: clamp(0.66rem, 0.7vw, 0.77rem);
}

.artwork-details__price,
.artwork-details__sales {
  font-size: clamp(0.68rem, 0.72vw, 0.8rem);
  line-height: 1.15;
}

.artwork-details__price {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}

.artwork-details__sold-status {
  display: none;
}

.artwork-details.is-sold .artwork-details__price-value {
  text-decoration: line-through;
  text-decoration-thickness: 0.12em;
}

.artwork-details.is-sold .artwork-details__sold-status {
  display: inline;
}

.artwork-details__sales {
  white-space: nowrap;
}

.artwork-details a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

/* Sales contact --------------------------------------------------------- */

.contact {
  position: absolute;
  top: calc(3.8 * var(--unit));
  left: calc((100% - 100vw) / 2 + clamp(1rem, 2vw, 2rem));
  z-index: 0;
  color: var(--ink-color);
  font: 700 clamp(0.78rem, 0.86vw, 0.96rem) / 1.08 "Bai Jamjuree", "Eurostile", sans-serif;
  letter-spacing: -0.012em;
  transform: translate3d(0, var(--camera-y), 0);
  transition: transform var(--motion-duration) var(--artwork-easing);
  white-space: nowrap;
}

.contact a {
  color: inherit;
  text-decoration-color: rgb(48 45 40 / 42%);
  text-underline-offset: 0.18em;
}

/* Accessibility --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .piece,
  .wall,
  .artwork-details,
  .contact,
  .piece::before,
  .piece > img:not(.sold-tag),
  .piece .sold-tag {
    transition-duration: 0.01ms;
  }
}