/* © 2026 LFM Labs. All rights reserved.
 *
 * intro-form.css: the picture fade contract for block reveals (intro-blocks.js,
 * intro-pictures.js). A [data-form="picture"] waits while html.particles is set (a reveal
 * could run now). Its block gets .in at the show point (0.72 of the form); the particles
 * finish landing 0.28 x 1200 ms later, so the real graphic fades in from there, over the
 * grains, while they dissolve (600 ms). Reduced motion never sets html.particles; the
 * media query below is the belt for a reduced-motion switch mid-visit: no delay, no fade.
 * Content is opacity only, never hidden. */
:root {
  --form-picture-delay: 340ms; /* HandoffCore.CHAPTER: (1 - showAt) x formMs */
  --form-picture-fade: 600ms;  /* HandoffCore.CHAPTER.dissolveMs */
}
html.particles [data-form="picture"] { opacity: 0; }
html.particles .in [data-form="picture"],
html.particles [data-form="picture"].in {
  opacity: 1;
  transition: opacity var(--form-picture-fade) var(--ease-lfm-out) var(--form-picture-delay);
}
/* Shown without forming (a jump, a deep link, Back, a fast scroll: .in-now from
 * intro-blocks.js): no wait, no fade. */
html.particles .in-now [data-form="picture"],
html.particles [data-form="picture"].in-now { opacity: 1; transition: none; }
@media print {
  [data-form="picture"] { opacity: 1 !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.particles [data-form="picture"] { opacity: 1; }
  html.particles .in [data-form="picture"],
  html.particles [data-form="picture"].in { transition: none; }
}