/*
 * The painted product only. Everything shared with the map product — tokens, type, the
 * header and footer, the size chips, the green pill, the cart — is in shell.css, which
 * every page loads first.
 *
 * What is left here is what nothing else can use: the paper the poster sits on, the brush
 * wipe that reveals a new painting, the word counter, and the paint button.
 */

/*
 * The preview IS the print. No mat, no frame, no rounded corner: what is on screen is the
 * paper edge to edge, sitting on a neutral surface with a shadow under it. The aspect
 * follows the chosen size, so the three sizes are three different shapes.
 */
.poster {
  position: relative; overflow: hidden; background: #EFE9E1;
  aspect-ratio: var(--poster-aspect, 5 / 7);
  box-shadow: 0 2px 4px rgba(42, 42, 40, .07), 0 22px 50px -24px rgba(42, 42, 40, .42);
  margin-inline: auto;
}
@media (min-width: 900px) {
  /* Cap the height rather than the width, so the paper stays the right shape and the whole
     control panel is still on screen beside it. --poster-wh is width-over-height for the
     chosen size, set from the same place as the aspect. */
  .poster { width: min(100%, calc(74vh * var(--poster-wh, 0.714))); }
}
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
#poster-next { opacity: 0; }
#poster-next.fading { opacity: 1; animation: fadein 180ms ease forwards; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
#poster-next.wiping {
  opacity: 1;
  -webkit-mask-image: url(/wipe.png); mask-image: url(/wipe.png);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: wipe 460ms cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes wipe { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.poster-busy {
  position: absolute; inset: auto 0 0 0; height: 3px; background: var(--tomato);
  transform-origin: left; animation: busy 900ms ease-in-out infinite;
}
@keyframes busy { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.poster-error {
  position: absolute; inset: auto var(--s3) var(--s3); margin: 0; background: var(--sheet);
  border-radius: var(--r-chip); padding: 10px 12px; font-size: 14px;
}
.caption { color: var(--muted); font-size: 12px; margin: var(--s3) var(--s1) 0; min-height: 1.4em; }

/* your takes */
.takes { margin-top: var(--s6); }
.takes-list { display: flex; gap: var(--s2); list-style: none; margin: 0; padding: 0 0 var(--s1); overflow-x: auto; }
.takes-list button {
  padding: 0; border: 2px solid transparent; border-radius: var(--r-chip); background: var(--sheet-2);
  cursor: pointer; overflow: hidden; display: block; line-height: 0;
  transition: transform 120ms ease, border-color 120ms ease;
}
.takes-list button:hover { transform: translateY(-2px); }
.takes-list button[aria-current="true"] { border-color: var(--tomato); }
.takes-list img { width: 60px; height: 84px; object-fit: cover; border-radius: 10px; }

.counter { font-size: 13px; color: var(--muted); margin: var(--s2) var(--s1) 0; }
.counter b { font-weight: 600; color: var(--ink); }
.counter[data-over="true"] { color: var(--tomato); }

/*
 * The paint button. The same green pill as Add to cart, with the label in the hand the
 * posters are lettered in — one face, always, so there is nothing to crossfade. The two
 * label variants share one grid cell, so the button is as wide as the longer of them and
 * the initial-to-again change cannot move anything.
 *
 * 27px, not the 20-22px a UI label would take: this face has a 0.405em x-height against a
 * sans's ~0.52em, so 27px is what actually matches a 20px label on the page. Measured, and
 * the longer label comes to 167px of the 230px a 390px screen leaves for it.
 */
.paintbtn {
  position: relative; display: block; width: 100%; border: 0; cursor: pointer;
  margin: 0 0 var(--s6); padding: 13px 28px 15px; border-radius: var(--r-pill);
  background: var(--forest); color: #fff;
  transition: transform 120ms ease, background-color 120ms ease;
  --rule-w: 60%;
}
.paintbtn:hover { transform: translateY(-1px); background: var(--forest-2); }
.paintbtn:active { transform: translateY(1px) scale(.99); }

.paintbtn-labels { display: inline-grid; position: relative; }
.lbl {
  grid-area: 1 / 1; justify-self: center; align-self: center; white-space: nowrap;
  font-family: 'Belmonte', 'Fraunces', cursive; font-size: 27px; line-height: 1.05;
  /* the same tightening the posters are set with, so the joins close the same way */
  letter-spacing: -0.03em;
  opacity: 0;
}
.paintbtn[data-state="initial"] .lbl[data-when="initial"],
.paintbtn[data-state="again"] .lbl[data-when="again"] { opacity: 1; }

/* one brush stroke, drawn on left to right */
.paintbtn-rule {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -7px; width: var(--rule-w); height: 9px;
  background: #fff; opacity: .7;
  -webkit-mask-image: url(/underline.png); mask-image: url(/underline.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 180ms cubic-bezier(.4, 0, .2, 1);
}
.paintbtn:where(:hover, [data-press]) .paintbtn-rule { clip-path: inset(0 0 0 0); }
.paintbtn:focus-visible { outline-offset: 4px; }

/* painted this week */
.gallery-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .gallery-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gallery-list { grid-template-columns: repeat(6, 1fr); } }
.example { display: block; text-decoration: none; color: inherit; }
.example img {
  width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: fill;
  box-shadow: 0 1px 3px rgba(42, 42, 40, .1), 0 12px 24px -14px rgba(42, 42, 40, .4);
  transition: transform 140ms ease;
}
.example:hover img { transform: translateY(-3px); }
.example-words { display: block; margin-top: var(--s2); font-size: 12px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  /* the rule appears rather than draws; the label swaps rather than crossfades */
  .paintbtn-rule { transition: none; }
}