/* ============================================================================
   RARA · transitions.css — micro-pack de tersura: title half of the card<->PDP
   shared-element morph + card hover-reveal second image. NEW file (kept out of
   motion.css/catalog.css) so this pass's touch surface stays isolated to
   base.html + catalog/_card.html + this stylesheet. Doctrine matches
   motion.css: transform/opacity only, honor prefers-reduced-motion, progressive
   enhancement (unsupported browsers render pixel-identical to today).
   ============================================================================ */

/* ---- title half of the card<->PDP shared-element morph (see motion.css's
   .vt-product-image for the image half, and the @view-transition at-rule +
   vt_dupe convention this extends — same file, both live under one
   @view-transition{navigation:auto} opt-in). --vt-name-title is set inline
   per-instance by catalog/_card.html and skipped on the vt_dupe duplicate,
   exactly like the image pairing, so one product can never carry two live
   instances of the same view-transition-name on one page. No @supports gate
   is needed: view-transition-name is simply ignored by unsupported browsers,
   which is the whole point of the progressive-enhancement design already
   documented in motion.css. The PDP-side h1 pairing (templates/catalog/
   detail.html) is a separate touch outside this pass's file scope — this half
   is inert (renders today's plain title, nothing more) until that lands. ---- */
.vt-product-title{view-transition-name:var(--vt-name-title)}

/* ---- hover-reveal second image (Baymard-documented pattern): catalog cards
   preview a second product shot on hover/focus when one exists. Renders only
   when catalog/_card.html found a real second ProductImage (never invented —
   see the template comment). Absolutely positioned inside .ph (already
   position:relative;overflow:hidden via components.css, and .card .ph img
   already supplies width/height/object-fit) so it adds no layout shift, and
   naturally paints above the plain cover image but below the .card-tags
   badges (z-index:1) through ordinary stacking order — no z-index needed
   here. Touch/no-hover pointers never trigger it; they keep the single cover
   as their only state. ---- */
.card .ph .card-hover-img{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 200ms var(--ease-out,ease);
}
@media (hover:hover){
  .card:hover .ph .card-hover-img,
  .card:focus-visible .ph .card-hover-img{opacity:1}
}

/* ---- reduced motion: the swap on hover still happens (it is a deliberate,
   user-triggered state change, not ambient motion), but the animated
   cross-fade duration drops — matching motion.css's blanket "kill the
   transition, keep the state change" doctrine used for every other hover
   effect in this codebase. ---- */
@media (prefers-reduced-motion:reduce){
  .card .ph .card-hover-img{transition:none}
}