/* ════════════════════════════════════════════════════════════════════════
 * dp-attraction-wall.css — the counter-scrolling wall of attraction art.
 *
 * Markup and the reasoning behind the row maths: views/partials/
 * attraction-wall.ejs. Where the field sits and how far it bleeds is the
 * PAGE's business, not this file's — see body.dl-light .atw in
 * views/download.ejs. This file owns look and motion only, the same split
 * dp-floaters.css had.
 * ════════════════════════════════════════════════════════════════════ */

.atw {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--atw-rowgap, 14px);
  overflow: hidden;
  /* Scenery, not a control surface. See the note in
     views/partials/attraction-wall.ejs — a full-screen moving layer of
     link targets underneath the download button was a trap. */
  pointer-events: none;

  /* The rows would otherwise stop dead against the top and bottom of the
     field, which draws a hard horizontal edge across the page and makes
     the wall look like a panel someone dropped in. Fading them out means
     it reads as something the hero is sitting in front of. */
  /* Percentages again, but harmless ones: this is a soft edge, and 5%
     of a short field and 5% of a tall one both read as "the rows fade
     out here". At 9% it ate most of the top row once the phone layout
     started packing eight rows in. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/* The legibility scrim used to live here, as a radial gradient on
   .atw::after sized in PERCENTAGES OF THE FIELD. That was a bug waiting
   for a tall window: at 1440x900 "46% x 44%" is a modest blob around the
   copy, and at 577x1027 it is an ellipse 531 wide by 834 tall over a
   field 577 by 947 — white paint over almost the whole wall. Whole rows
   went blank, and tiles crossing the gradient's falloff faded in and out
   as they scrolled, which read as the rows glitching.

   The wash belongs to the COPY, whose size barely changes with the
   viewport, not to the field, whose size changes enormously. It is now a
   fixed-size halo on the hero — see body.dl-light .hero::before in
   views/download.ejs. */

.atw-row {
  position: relative;
  flex: 1 1 0;          /* equal shares of the field, so equal tile sizes */
  min-height: 0;        /* or a flex row refuses to shrink below its content */
  overflow: hidden;
}

.atw-track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: atwRoll var(--atw-dur, 80s) linear infinite;
}
.atw-row--rev .atw-track { animation-direction: reverse; }

@keyframes atwRoll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.atw-tile {
  display: block;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  /* margin, NOT the track's flex gap — see the loop note in the partial.
     A gap puts an odd number of gaps in an even number of copies and the
     -50% wrap lands half a gap out. */
  margin-right: var(--atw-gap, 14px);
  border-radius: 18%;
  overflow: hidden;
  /* No card, no fill, no border. The renditions are the pipeline's
     transparent preview art flattened onto white (lib/wallTiles.js), so
     on this page the tile's box is invisible and what drifts past is the
     ATTRACTION, cut out and floating. Give it a background and you get
     216 faint grey squares instead, and the page stops being white. The
     radius and the clip stay for the handful of previews that are opaque
     edge to edge. */
  /* --atw-dim is set per tile from its measured ink — see atwDim() in
     views/partials/attraction-wall.ejs. The scale is the global dial on
     top of it, so a breakpoint can back the whole wall off without
     undoing the per-tile evening-out. */
  opacity: calc(var(--atw-dim, .42) * var(--atw-dim-scale, 1));
}
.atw-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rows 6-8 exist for the phone, where the field is tall and narrow and
   five rows would mean under three enormous tiles across. See ATW_ROWS
   in views/partials/attraction-wall.ejs. */
@media (min-width: 701px) {
  .atw-row:nth-child(n + 6) { display: none; }
}

/* The copy takes up far more of a phone screen, so the wall backs off a
   little further behind it. */
@media (max-width: 700px) {
  .atw { --atw-dim-scale: .8; --atw-gap: 9px; --atw-rowgap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .atw-track { animation: none; }
}