/*
 * Scroll-induced depth (HZN-135, brief effects 3 and 1).
 *
 * STATIC-FIRST: a bare [data-reveal] is NOT styled here, so it is fully visible
 * with JavaScript off. Only [data-reveal-armed], which scroll-depth.ts adds when
 * motion is allowed and the block is below the fold, carries the hidden state;
 * [data-reveal-shown] transitions it in. External and unscoped so it reaches the
 * server-rendered blocks by attribute. The parallax transform itself is applied
 * inline by the script.
 */
[data-reveal-armed] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 640ms ease-out, transform 640ms ease-out;
  will-change: opacity, transform;
}

[data-reveal-armed][data-reveal-shown] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-armed],
  [data-reveal-armed][data-reveal-shown] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}