/*
 * Swiping between products, and the colour that comes with it.
 *
 * Two things live here: the poster following a thumb, and the one panel in the
 * page-turn footer that leaves the category. They are the same feature seen
 * twice -- one by somebody dragging, one by somebody reading -- and they are
 * in one file so a change to what a crossing looks like cannot land on only
 * half of them.
 */

/*
 * pan-y, so the page still scrolls, and pinch-zoom, so it can still be
 * enlarged. `pan-y` alone would take zoom away from the whole product page,
 * which is a real cost paid by exactly the people least able to afford it, in
 * exchange for nothing -- the gesture does not need the pinch.
 *
 * The horizontal half is what this buys: with sideways panning declared dead
 * here, a horizontal drag is delivered as pointer events instead of being
 * swallowed as a scroll the page cannot do anyway.
 */
.product-main { touch-action: pan-y pinch-zoom; }

/*
 * While a thumb is on it. `will-change` only for the length of the drag: left
 * on permanently it holds a compositor layer for the whole visit, and the
 * poster is the tallest thing on the page.
 */
.product-poster.is-swiping { will-change: transform; }

/* Letting go: back to nothing, or off the side it was pushed. */
.product-poster.is-settling {
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .product-poster.is-settling { transition-duration: .01ms; }
}

/*
 * The step out of the category, in the colour of the category it steps into.
 *
 * The seven themes are spelled out again rather than read from --accent, for
 * the reason page-wipe.css gives at length: this panel is printed on a
 * page already wearing the theme it is LEAVING, so --accent here is the one
 * colour that would say nothing. Same list, same source values.
 *
 * A band down the leading edge rather than a fill: the panel is a link with
 * black type on white and it has to stay one, or the footer turns into two
 * different objects depending on where in a run you happened to land.
 */
.product-issue-walk-link.crosses-category {
  --crossing: var(--brand, #877ebc);
  border-color: var(--ink);
}
.product-issue-walk-link.crosses-category[data-theme="red"]    { --crossing: var(--red, #c8393f); }
.product-issue-walk-link.crosses-category[data-theme="ink"]    { --crossing: #343139; }
.product-issue-walk-link.crosses-category[data-theme="gold"]   { --crossing: var(--gold, #e9c577); }
.product-issue-walk-link.crosses-category[data-theme="blue"]   { --crossing: var(--blue, #b7cfdc); }
.product-issue-walk-link.crosses-category[data-theme="green"]  { --crossing: var(--green, #8aa683); }
.product-issue-walk-link.crosses-category[data-theme="paper"]  { --crossing: var(--brand-tint-deep, #ded8cd); }

.product-issue-walk-link.crosses-category::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 10px;
  background: var(--crossing);
}
/* On the edge the walk is heading toward, so the colour leads. */
.product-issue-walk-link.crosses-category.is-previous::before { left: -2px; }
.product-issue-walk-link.crosses-category.is-next::before { right: -2px; }
.product-issue-walk-link.crosses-category.is-previous { padding-left: 30px; }
.product-issue-walk-link.crosses-category.is-next { padding-right: 30px; }