/* ============================================
   PAGE TRANSITIONS (native View Transitions API)
   Cross-document navigation between pages of the site.
   Chromium browsers only — silently ignored elsewhere,
   navigation just stays instant there, no fallback needed.
   ============================================ */

@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 1100ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* The old page stays put and the new page slides in over it, right to
   left — a "curtain" covering the previous page rather than a crossfade. */
::view-transition-old(root) {
  animation: omius-slide-in-left 1100ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: omius-slide-in-right 1100ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes omius-slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes omius-slide-in-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-20%);
  }
}

/* ==== BOTTLE CARD -> BOTTLE HERO SHARED TRANSITION ====
   --vt-pattern / --vt-visual are set inline (per bottle ID) on .bottle-card
   (grid card) and #bottle-hero (single bottle page), then inherited down to
   the matching inner elements below — the bottle's pattern and image glide
   to their new spot instead of just cross-fading. The card/hero box itself
   and the title are deliberately left out of the named transition: matching
   their whole (very different) boxes on top of the hover-animated card
   geometry proved too unreliable, so they just cross-fade as part of the
   normal root transition instead. */

.bottle-card .bg-pattern,
#bottle-hero .bg-pattern {
  view-transition-name: var(--vt-pattern, none);
}

.bottle-visual {
  view-transition-name: var(--vt-visual, none);
}