/* ===========================================================================
   Cross-document view transitions.

   Pure progressive enhancement: browsers without the feature ignore every rule
   here and navigate exactly as before. Both the outgoing and the incoming page
   must opt in, which they do automatically because this file loads from
   _Layout.cshtml.

   Paired with wwwroot/js/view-transitions.js, which tags the clicked offering
   card so the grid image morphs into the detail hero.
   =========================================================================== */

@view-transition {
    navigation: auto;
}

/* --- Whole-page cross-fade -------------------------------------------------
   The default is 250ms. Slightly faster reads as "responsive" rather than
   "animated" — the point is to kill the white flash, not to put on a show. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

/* --- Shared element: offering card -> offering hero ------------------------
   Only ONE element per document may carry a given view-transition-name, or the
   whole transition is dropped. The detail page has exactly one #main_img1, and
   the JS tags exactly one card image on click, so the pair matches up. */
#main_img1 {
    view-transition-name: offering-hero;
}

::view-transition-group(offering-hero) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Square grid thumb -> tall detail hero is an aspect-ratio change. Without this the
   image squashes mid-flight instead of cropping. Each side must match how its own
   element actually paints, or the morph lands on one framing and snaps to another:
   the grid thumb is object-fit:cover, while #main_img1 is object-fit:contain
   (IM/Index.cshtml, .et-main-img-wrap img#main_img1). */
::view-transition-old(offering-hero) {
    height: 100%;
    object-fit: cover;
}

::view-transition-new(offering-hero) {
    height: 100%;
    object-fit: contain;
}

/* --- Accessibility ---------------------------------------------------------
   Opting out of the navigation entirely is cleaner than animating to zero. */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}