/* Drifting plates — the scroll-parallax layer (spec v2.0 addendum).
   js/plates.js writes two custom properties only: --plate-y (px) on
   [data-plate] elements and --plate-shift (px) on [data-plate-window]
   frames. All painting lives here. Static-first: without JS, or under
   reduced motion, the vars stay at 0 and every plate rests at its
   designed position. */

[data-plate] {
  transform: translate3d(0, var(--plate-y, 0px), 0);
  will-change: transform;
}

/* A plate that is also a reveal target keeps the .rv fade but surrenders
   the entry slide to the drift engine — two writers on one transform
   would fight. Longhands only: the shorthand would wipe the .d1/.d2/.d3
   transition-delay set in base.css. */
html[data-ready] .rv[data-plate] {
  transition-property: opacity;
}

html[data-ready] .rv[data-plate]:not(.in),
html[data-ready] .rv.in[data-plate] {
  transform: translate3d(0, var(--plate-y, 0px), 0);
}

/* Window plates: the image slides inside a clipped frame while the frame
   drifts — the reference's uv-parallax, drawn with plain overflow. The
   frame needs a definite height (aspect-ratio or explicit). */
[data-plate-window] {
  overflow: hidden;
}

[data-plate-window] > img {
  display: block;
  width: 100%;
  height: calc(100% + var(--plate-overhang, 26%));
  object-fit: cover;
  object-position: top center;
  transform: translate3d(0, var(--plate-shift, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-plate],
  [data-plate-window] > img {
    transform: none;
    will-change: auto;
  }
}