/* v2. Served max-age=604800: never edit in place, ship a new name.
 * v2 over v1 (same day): the hero takes the header's frame instead of the
 * 1180px page column, so the words sit under the logo and the lanes end
 * under the language button. v1 is the centred version; point the link back
 * at it to revert.
 * The hero's product columns (patches/hero_cols_0927; operator 2026-09-27: "a
 * slightly tilted top to bottom 3 column animation of items flowing, middle
 * lane slightly slower, full size"). Rendered by
 * index-DcU4Xu6q.sections73.herocols.js and later as
 *   div.jpa-hero-cols > div.jpa-hc-tilt > div.jpa-hc-col x3 > div.jpa-hc-track > div.jpa-hc-tile > img
 * from the hero's own photo list (img/hero/*-t.webp, the same files the tilted
 * backdrop uses, sliced the same way, so nothing downloads twice).
 *
 * Wide screens only: the columns fill the hero from its top edge to its bottom
 * edge, and the backdrop gives way to them. The hero leaves the 1180px page
 * column and takes the header's frame instead (max 1680px, the logo 80px in,
 * the last button 48px in), so the words start under the logo and the lanes
 * end under the language button; inside the narrower page column the block
 * sat centred and read as floating (operator, same day). Under 1180px there
 * is no room beside the words, so the columns are not drawn and the backdrop
 * and the page column stay as they were.
 *
 * Each track is its list twice over and slides down by exactly one list
 * (translateY -50% -> 0), so the loop has no seam; the gap is each tile's own
 * margin, which keeps both halves the same height. Speed is set per tile
 * (--jpa-hc-spt x the column's tile count), so the outer lanes move at the
 * same pace whatever their counts and the middle lane is a quarter slower.
 * Transform only: the compositor moves it and nothing repaints.
 */
.jpa-hero-cols { display: none; }

@media (min-width: 1180px) {
  .jpa-hero-band { display: none; }

  /* the text column, on the header's frame (header: max-w-[1680px] lg:px-12,
     its logo drawn 32px further in) */
  .jpa-hero-cols ~ .max-w-page {
    max-width: 1680px;
    padding-left: 80px;
    padding-right: 48px;
  }

  /* Percentages here are the section's width, which (unlike 100vw) leaves
     the scrollbar out, so the edges land exactly under the header's. The
     right edge stops 16px short of the header's, and the lanes a further
     32px in, so their feet can lean right without being clipped. */
  .jpa-hero-cols {
    display: block;
    position: absolute;
    top: 0; bottom: 0;
    left: calc(max(0px, (100% - 1680px) / 2) + 80px + 42rem + 40px);
    right: calc(max(0px, (100% - 1680px) / 2) + 16px);
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  }
  /* Taller than the hero so the tilt never shows a corner; the rotation
     leans the lanes the way the picture does (tops left, feet right). */
  .jpa-hc-tilt {
    position: absolute;
    top: -16%; bottom: -16%; left: 20px; right: 32px;
    display: flex;
    gap: 18px;
    transform: rotate(-4deg);
  }
  .jpa-hc-col { flex: 1 1 0; min-width: 0; }
  .jpa-hc-track {
    --jpa-hc-spt: 5.2s;
    display: flex;
    flex-direction: column;
    animation: jpa-hc-down calc(var(--jpa-hc-n, 22) * var(--jpa-hc-spt)) linear infinite;
    will-change: transform;
  }
  /* the middle lane is the slower one; the outer two share a pace, so the
     third starts half a tile on from the first and their tiles never line up */
  .jpa-hc-col:nth-child(2) .jpa-hc-track { --jpa-hc-spt: 6.5s; animation-delay: -3.4s; }
  .jpa-hc-col:nth-child(3) .jpa-hc-track { animation-delay: -2.6s; }
  .jpa-hc-tile {
    flex: none;
    aspect-ratio: 3 / 4;
    margin-bottom: 18px;
    border-radius: 16px;
    overflow: hidden;
    background: hsl(var(--surface-2));
    box-shadow: 0 1px 2px hsl(var(--deep) / .06), 0 14px 28px -14px hsl(var(--deep) / .30);
  }
  .jpa-hc-tile > img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
@keyframes jpa-hc-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .jpa-hc-track { animation: none; transform: translateY(-40%); }
}