/*
 * Filtering and load-more UX for the reference collection.
 *
 * The id-scoped half of these styles (skeleton specificity, scroll offset) is printed
 * inline by JM_Ref_Query_UX::scoped_css(), because it needs the resolved element ids.
 */

/*
 * Without this, browser scroll anchoring pushes freshly appended content above the
 * viewport: the load-more button stays put and everything new lands off screen.
 * Measured on the blog before the fix: scrollY 2786 -> 4389 with the button still at 350px.
 */
body{overflow-anchor:none}

/*
 * Smoothness is CSS's job. The script calls scrollIntoView() without a `behavior`
 * argument on purpose, so this single declaration controls it and reduced-motion users
 * get an instant jump instead.
 */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Loader for the phase where the cards are not in the DOM yet. Markup and looks are
   native Bricks (`brx-loading-*`); only the lifecycle is ours. */
.jm-ref-spinner{grid-column:1/-1;--brx-loader-color:var(--bricks-color-col-cnv3p7);padding:var(--lydka-space-lg) 0}

/*
 * A short fade-up. The native `brx-animate-fadeInDown` travels a full card height
 * (~300px here), which reads as the card flying through the row above it.
 */
.jm-ref-enter{animation:jmRefEnter 420ms ease-out both}
@keyframes jmRefEnter{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

@keyframes jmRefSkeleton{0%,100%{opacity:.5}50%{opacity:.85}}

@media (prefers-reduced-motion:reduce){
  .jm-ref-enter{opacity:1;animation:none}
}