/* =============================================================================
   artwork-scroll-reveal.css — continuous scroll fade + light image parallax
   for every Artwork Detail page. Linked from every page in the Collection
   (pages/sleeping-lion.html, pages/rocklands-boulder.html,
   pages/capitan-black.html, and the rest).

   Matches Home exactly — same script (js/home-reveal.js, extended with this
   page type's own selectors), same trigger (IntersectionObserver, threshold:
   0), same values copied verbatim (translateY distance, duration, easing),
   same reduced-motion fallback. See css/pages/home.css's own "Scroll reveal"
   section and css/pages/collection.css's matching section — this file is
   the same system rolled out to the individual artwork pages, per explicit
   request for "the same parallax effect and the same appearance effect used
   on Home's images and text."

   This REPLACES reveal.css + js/artwork-reveal.js on these pages (that
   one-shot, mobile-only system is untouched and still serves every other
   page that links it — commission.html, contact.html, faqs.html). Unlike
   that old system, this one runs at every viewport width and fades back
   OUT as each element scrolls back out of view, not just in once.

   Targets (dedicated Artwork Detail Page components — never reused
   elsewhere on the site, so no extra ancestor scoping is needed):
     .artwork-detail__intro   — title + private-collection label
     .artwork-zoom            — hero image wrap (its own inner
                                 .artwork-detail__image also gets the JS
                                 parallax offset — see js/home-reveal.js)
     .artwork-info            — dimensions / materials / scale-reference link
     .artwork-story--linear > img — every direct-child photo (reference
                                 photo + any gallery images), fade+slide
                                 only, no parallax (no wrapper of their own
                                 — see js/home-reveal.js's own note)
     .artwork-story__text     — the "Inspired by…" / route / lead / body copy
     .artwork-cta             — Private Collection notice + Contact-the-
                                 artist button + hint
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {

  .artwork-detail__intro,
  .artwork-zoom,
  .artwork-info,
  .artwork-story--linear > img,
  .artwork-story__text,
  .artwork-cta {
    opacity: 0;
    transform: translateY(16px);
  }

  .artwork-detail__intro,
  .artwork-info,
  .artwork-story__text,
  .artwork-cta {
    transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .artwork-zoom,
  .artwork-story--linear > img {
    transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .artwork-detail__intro.is-visible,
  .artwork-zoom.is-visible,
  .artwork-info.is-visible,
  .artwork-story--linear > img.is-visible,
  .artwork-story__text.is-visible,
  .artwork-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* Reduced motion: still fades in (once, immediately, no observer, no
   parallax — see js/home-reveal.js) so nothing is left permanently
   invisible, but drops the slide and slows to a minimal, non-distracting
   fade — identical to Home's own reduced-motion treatment. */
@media (prefers-reduced-motion: reduce) {

  .artwork-detail__intro,
  .artwork-zoom,
  .artwork-info,
  .artwork-story--linear > img,
  .artwork-story__text,
  .artwork-cta {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .artwork-detail__intro.is-visible,
  .artwork-zoom.is-visible,
  .artwork-info.is-visible,
  .artwork-story--linear > img.is-visible,
  .artwork-story__text.is-visible,
  .artwork-cta.is-visible {
    opacity: 1;
  }

}