/* The screen-print gallery: six prints on a white page, each on its own paper with its name and price under it.
   Open, one print stands big in the middle of the gallery, with the squeegee that pulls the next one over it. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #1f1d1a;           /* the names and the icons */
  --muted: #6b665d;         /* the prices */
  --button: #f1eee8;        /* the round buttons */
  --button-hover: #e5e1d9;
  --pencil: #57544e;        /* the title pencilled under a print */
  --wood: #d6a86f;          /* the squeegee's handle */
  --wood-deep: #a3733f;
  --rubber: #2b302c;        /* and its rubber blade */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'National Park Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 32px 16px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.prints {
  position: relative;
  width: min(600px, 100%);
}

/* the drawings live here once: the paper and the three inks of every print */
.prints__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------- the grid */
.prints__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prints__item {
  min-width: 0;
}

.thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

/* a sheet: the paper, the three inks printed one over the other (multiply, as transparent inks do) and the grain */
.sheet {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}

.sheet__layer,
.sheet__grain {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sheet__layer--ink {
  mix-blend-mode: multiply;
}

.sheet__layer--paper {
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(52, 42, 30, 0.12), 0 8px 18px -10px rgba(52, 42, 30, 0.4);
}

.sheet__grain {
  background-image: var(--grain);
  background-size: 128px 128px;
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}

.thumb .sheet {
  transition: transform 0.4s var(--ease-out);
}

.thumb .sheet__layer--paper {
  transition: box-shadow 0.4s var(--ease-out);
}

@media (hover: hover) {
  .thumb:hover .sheet {
    transform: translateY(-4px);
  }

  .thumb:hover .sheet__layer--paper {
    box-shadow: 0 1px 1px rgba(52, 42, 30, 0.1), 0 18px 26px -14px rgba(52, 42, 30, 0.45);
  }
}

.thumb:active .sheet {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 0.16s;
}

/* the sheet whose print is open stays empty, ready to take it back */
.thumb.is-away .sheet {
  visibility: hidden;
}

.thumb__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  font-size: 15px;
  line-height: 20px;
}

.thumb__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb__price {
  flex: none;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.thumb:focus-visible {
  outline: none;
}

.thumb:focus-visible .sheet {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* the focus comes back to the print when it closes: its ring shows only to who uses the keys */
html[data-using='pointer'] .thumb:focus-visible .sheet {
  outline: none;
}

/* ---------------------------------------------------------------- the print, open */
.view {
  --chrome: 0;              /* how much the buttons show: set by the script */
  position: absolute;
  inset: 0;
  z-index: 5;
  outline: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.view[hidden] {
  display: none;
}

/* the press: where the big sheet lies; its size is the script's */
.press {
  --pw: 400px;              /* the width of the big sheet: set by the script */
  position: absolute;
  left: 0;
  top: 0;
  isolation: isolate;
  cursor: grab;
}

.view.is-held .press {
  cursor: grabbing;
}

.press .sheet__layer,
.press .sheet__grain,
.press__title {
  transform-origin: 0 0;
}

.press .sheet__grain {
  background-size: 128px 128px;
}

/* a new print being pulled over the old one, an ink at a time: each coat is cut by the squeegee's edge */
.coat {
  position: absolute;
  inset: 0;
  isolation: isolate;
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

.coat[hidden] {
  display: none;
}

/* the wet ink shining right behind the squeegee */
.press__wet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.wet {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 120px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16) 35%, rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: 0;
  transform-origin: 0 0;
}

/* the name, pencilled in the margin under the print */
.press__title {
  position: absolute;
  left: 6%;
  top: 88.6%;
  margin: 0;
  color: var(--pencil);
  font-family: 'Caveat Variable', cursive;
  font-size: calc(var(--pw) * 0.058);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
}

.squeegee {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.squeegee svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------------------------------------------------------------- the buttons */
.view__btn {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--button);
  color: var(--ink);
  cursor: pointer;
  opacity: var(--chrome);
  transition: background-color 0.2s, transform 0.16s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.view__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease-out);
}

@media (hover: hover) {
  .view__btn:hover {
    background: var(--button-hover);
  }

  .view__step--back:hover svg {
    transform: translateX(-2px);
  }

  .view__step--on:hover svg {
    transform: translateX(2px);
  }

  .view__close:hover svg {
    transform: rotate(90deg);
  }

  .view__btn:disabled:hover {
    background: var(--button);
  }

  .view__btn:disabled:hover svg {
    transform: none;
  }
}

.view__btn:active {
  transform: scale(0.93);
}

.view__btn:disabled {
  color: rgba(31, 29, 26, 0.3);
  cursor: default;
}

.view__btn:disabled:active {
  transform: none;
}

.view__btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

html[data-using='pointer'] .view__btn:focus-visible {
  outline: none;
}

/* the open print has the focus: a ring round the sheet, only for the keys */
.press::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--ink);
  opacity: 0;
  pointer-events: none;
}

html[data-using='keys'] .view.is-open:focus-visible .press::after {
  opacity: 1;
}

/* ---------------------------------------------------------------- the phone */
@media (max-width: 560px) {
  .prints__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }

  .thumb__cap {
    margin-top: 9px;
    font-size: 14px;
  }
}

/* una casella bassa (l'anteprima sul telefono, 341 per 410): tre stampe per fila come sul computer, il nome sopra il
   prezzo, così le due file stanno in altezza senza rimpicciolirsi */
@media (max-width: 560px) and (max-height: 520px) {
  .stage {
    padding: 20px 16px;
  }

  .prints__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
  }

  .thumb__cap {
    flex-direction: column;
    gap: 0;
    margin-top: 7px;
    font-size: 12px;
    line-height: 16px;
  }

  .thumb__name {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------- less motion: nothing moves, only the shadows and
   the colours change */
@media (prefers-reduced-motion: reduce) {
  .thumb:active .sheet,
  .view__btn:active {
    transform: none;
  }
  @media (hover: hover) {
    .thumb:hover .sheet,
    .view__step--back:hover svg,
    .view__step--on:hover svg,
    .view__close:hover svg {
      transform: none;
    }
  }
}