:root {
  --bg-top: #e7edf3;
  --bg-top-soft: #f2f5f8;
  --bg-mid: #ffffff;
  --bg-bottom-soft: #f0f4f7;
  --bg-bottom: #e4ebf2;
  --ink: #111111;
  --line: rgba(17, 17, 17, 0.08);
  --line-strong: rgba(17, 17, 17, 0.16);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  --tile-size: min(11vw, 74px);
  --gap: 0px;
  --swap-duration: 1240ms;
  --swap-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --seam-overscan: 0.018;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #ffffff;
}

body {
  font-family: "Space Grotesk", sans-serif;
  color: var(--ink);
}

button,
input,
textarea,
select {
  font: inherit;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

.gallery-shell {
  display: grid;
  place-items: center;
  width: min(88vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.collage {
  display: grid;
  grid-template-columns: repeat(6, var(--tile-size));
  grid-auto-rows: var(--tile-size);
  gap: var(--gap);
  width: fit-content;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.02);
  --detail-zoom: 1;
  --hover-tile-scale: 1.08;
  --hover-image-scale: 0.08;
}

.tile {
  position: relative;
  display: block;
  width: var(--tile-size);
  height: var(--tile-size);
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 560ms cubic-bezier(0.16, 1, 0.3, 1),
    z-index 180ms ease;
  transform-origin: center center;
  contain: paint;
  backface-visibility: hidden;
  isolation: isolate;
}

.tile-color {
  position: absolute;
  inset: 0;
  background: var(--tile-color, #d7dce3);
  opacity: 0;
  z-index: 1;
  transition: opacity var(--swap-duration) var(--swap-ease);
}

.tile-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--pan-x, 0%), var(--pan-y, 0%))
    scale(calc((var(--zoom, 1.14) * var(--detail-zoom, 1)) + var(--seam-overscan)));
  transform-origin: center center;
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 120ms ease;
}

.tile:hover,
.tile:focus-visible,
.tile.active {
  z-index: 4;
  transform: translateY(-4px) scale(var(--hover-tile-scale, 1.08));
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.05);
  outline: none;
  will-change: transform, box-shadow;
}

.tile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  filter: saturate(0.92) contrast(1.02);
  transform: translate(var(--pan-x, 0%), var(--pan-y, 0%))
    scale(calc((var(--zoom, 1.14) * var(--detail-zoom, 1)) + var(--seam-overscan)));
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 220ms ease,
    opacity var(--swap-duration) var(--swap-ease);
  transform-origin: center center;
  backface-visibility: hidden;
  clip-path: inset(-1px);
}

.tile:hover .tile-image,
.tile:focus-visible .tile-image,
.tile.active .tile-image {
  transform: translate(var(--pan-x, 0%), var(--pan-y, 0%))
    scale(
      calc(
        ((var(--zoom, 1.14) + var(--hover-image-scale, 0.08)) * var(--detail-zoom, 1)) +
          var(--seam-overscan)
      )
    );
  filter: saturate(1) contrast(1.04);
  will-change: transform, filter;
}

.tile:hover .tile-canvas,
.tile:focus-visible .tile-canvas,
.tile.active .tile-canvas {
  transform: translate(var(--pan-x, 0%), var(--pan-y, 0%))
    scale(
      calc(
        ((var(--zoom, 1.14) + var(--hover-image-scale, 0.08)) * var(--detail-zoom, 1)) +
          var(--seam-overscan)
      )
    );
}

.collage.color-mode .tile-image {
  opacity: 0;
  filter: saturate(0.92) contrast(1.02);
}

.tile.canvas-active .tile-canvas {
  opacity: 1;
}

.tile.canvas-active .tile-image {
  opacity: 0;
  transition-duration: 90ms, 220ms, 90ms;
}

.collage.color-mode .tile-color {
  opacity: 1;
}

.collage.color-mode .tile:hover .tile-color,
.collage.color-mode .tile:focus-visible .tile-color,
.collage.color-mode .tile.active .tile-color {
  transform: scale(1.02);
}

@media (max-width: 900px) {
  :root {
    --tile-size: min(14vw, 72px);
  }
}

@media (max-width: 640px) {
  :root {
    --tile-size: min(15vw, 58px);
  }

  .page {
    padding: 18px;
  }
}