/* =============================================================================
   reveal.css — shared entrance-reveal system, used on:
     - the Artwork Detail page (title/image/meta hero blocks)
     - pages/commission.html, pages/contact.html, and pages/faqs.html
       (section titles/body copy — see js/content-reveal.js for the shared
       trigger these all use)
   pages/collection.html used to reuse this system too (each row's photo,
   via .collection-row__image-wrap) but per explicit request now reuses
   Home's own continuous system instead (js/home-reveal.js + this page's
   own css/pages/collection.css). pages/the-artistic-process.html likewise
   moved to that same Home system a while back.
   Mobile only (max-width: 1023px) — desktop is completely untouched, every
   rule in this file lives inside that media query, so above 1024px these
   classes carry no styling at all and the page renders exactly as it did
   before this file existed.

   Blocks fade + slide + (image only) blur into place, each toggled by one
   shared class, .is-revealed. On the Detail page all three blocks reveal
   together in a staggered sequence on page load (js/artwork-reveal.js); on
   commission/contact/faqs each block reveals independently as it scrolls
   into view (js/content-reveal.js, IntersectionObserver-driven) — same
   classes, same CSS, only the trigger differs because below-the-fold
   content needs a different trigger than one above-the-fold hero. The
   stagger/delay itself is pure CSS either way: each block variant only
   sets its own transition-delay, so one class change animates a block at
   its own offset automatically.

   Slide direction: every variant (title, image, meta) rises up into place
   from the same 16px-below starting point (.reveal-block's own base
   translateY(16px) — .reveal-block--image no longer overrides this with
   an inverted top-to-bottom drop, as it used to). This one shared
   direction is now the sitewide standard, matching the Home page's own
   entrance animation (css/pages/home.css) — see that file's own comments
   for its independent, continuous (fades back out on scroll-away) variant
   of the same visual language.

   Component ownership:
     .reveal-block          — base hidden→visible state + transition
     .reveal-block--title   — 80ms delay  (Detail page: .artwork-detail__intro)
     .reveal-block--image   — 220ms delay + its own slower, blur-clearing
                               transition + the veil overlay below (Detail
                               page: .artwork-zoom; Collection page: each
                               card's .artwork-card__image-wrap)
     .reveal-block--meta    — 360ms delay (Detail page: .artwork-info)
     .is-revealed           — toggled by JS; switches each block to its
                               visible end state

   prefers-reduced-motion: reduce — the slide (transform), the blur, and
   the stagger delay are dropped entirely; blocks only get a quick,
   non-staggered opacity fade, and the image veil is skipped outright.
   Same .is-revealed class either way — only what CSS does with it differs.
   ============================================================================= */

@media (max-width: 1023px) {

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

    .reveal-block {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
                  transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .reveal-block.is-revealed {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);      /* no-op for title/meta (they never set a filter) — only meaningful for --image below */
    }

    .reveal-block--title {
      transition-delay: 80ms;
    }

    /* Image block — deliberately slower and softer than the shared base:
       a longer duration and a blur-clearing effect layered on top of the
       fade so the photo settles into focus rather than snapping sharp.
       Slide direction now matches the shared base (.reveal-block's own
       translateY(16px), a bottom-to-top rise into place) rather than the
       inverted top-to-bottom drop this used to declare — unified sitewide
       to match the Home page's own rise-up entrance, per explicit
       request; no separate transform override needed here any more since
       it's identical to the inherited base value. The full transition
       shorthand is still redeclared here (rather than layering individual
       longhand overrides on top of .reveal-block's own shorthand) so all
       three animated properties share one explicit, unambiguous timing
       definition. */
    .reveal-block--image {
      filter: blur(10px);
      transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
                  transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
                  filter 1000ms cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: 220ms;
    }

    .reveal-block--meta {
      transition-delay: 360ms;
    }

    /* Veil overlay — a plain solid fade (the simpler of the two options),
       not a directional wipe mask, kept deliberately understated. Hosted
       on .artwork-zoom, which already has position: relative (see
       artwork-zoom.css) for its own desktop lens layer, so no new
       positioning context is introduced. Same var(--color-carbon) as the
       page background, so the photo reads as gently emerging from the
       page itself rather than a flash of an unrelated color. Timed with
       the image block's own 220ms delay and matched to its new 1000ms
       duration so the veil lifts in step with the slower slide + blur
       clear, rather than finishing early. pointer-events: none — purely
       decorative, never blocks the image beneath it. */
    .reveal-block--image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--color-carbon);
      opacity: 1;
      pointer-events: none;
      transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: 220ms;
    }

    .reveal-block--image.is-revealed::after {
      opacity: 0;
    }

  }

  @media (prefers-reduced-motion: reduce) {

    .reveal-block {
      opacity: 0;
      transition: opacity 150ms ease;      /* quick, minimal fade — no slide, no stagger delay */
    }

    .reveal-block.is-revealed {
      opacity: 1;
    }

    .reveal-block--image::after {
      display: none;                        /* skip the veil fade too — keep it minimal, per spec */
    }

  }

}