/*
 * Keep flying-image handoff geometry stable between card source and menu hero
 * targets by neutralizing runtime parallax transform offsets on the transformed
 * transition layer itself.
 */
.figure-project__wrapper-img.js-transition-img:not(.clone) .js-transition-img__transformed-el,
.section-image__wrapper.js-transition-img:not(.clone) .js-transition-img__transformed-el {
  transform: none !important;
}

/*
 * BBQ Styles gallery source: match TransitionCloneImage getBoundingClientRect() on
 * .js-transition-img to the visible 16:9 .card-media_landscape crop. jQuery Lazy
 * padding-bottom (intrinsic image ratio) otherwise inflates the wrapper beyond the
 * card (components.js TransitionCloneImage / TransitionFlyingImage).
 */
#bbq-styles-menu .card-media_landscape .figure-project__wrapper-img.js-transition-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#bbq-styles-menu .card-media_landscape .figure-project__wrapper-img.js-transition-img .lazy,
#bbq-styles-menu .card-media_landscape .figure-project__wrapper-img.js-transition-img .js-transition-img__transformed-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0 !important;
}

#bbq-styles-menu .card-media_landscape .figure-project__wrapper-img.js-transition-img .lazy > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#bbq-styles-menu .bbq-styles-gallery-card--row .card-media_square .figure-project__wrapper-img.js-transition-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#bbq-styles-menu .bbq-styles-gallery-card--row .card-media_square .figure-project__wrapper-img.js-transition-img .lazy,
#bbq-styles-menu .bbq-styles-gallery-card--row .card-media_square .figure-project__wrapper-img.js-transition-img .js-transition-img__transformed-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0 !important;
}

#bbq-styles-menu .bbq-styles-gallery-card--row .card-media_square .figure-project__wrapper-img.js-transition-img .lazy > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clone.js-transition-img .lazy,
.clone.js-transition-img .js-transition-img__transformed-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0 !important;
  background-color: transparent;
}

.clone.js-transition-img .js-transition-img__transformed-el > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clone.js-transition-img {
  position: fixed;
  z-index: 350;
  pointer-events: none;
}

/*
 * Keep the html/body canvas dark for the whole navigation window so the collapse
 * of the leaving container never exposes the default white page background.
 */
html.is-barba-transitioning,
html.is-barba-transitioning body {
  background-color: var(--color-dark-1) !important;
}

/*
 * Hold the incoming container hidden until GSAP's autoAlpha reveals it. Barba
 * appends the next container at full opacity a frame before beforeEnter runs
 * gsap.set(next, {autoAlpha: 0}); this stops that frame from painting the
 * unstyled destination body. Inline autoAlpha overrides this on reveal.
 */
html.is-barba-transitioning [data-barba="wrapper"] [data-barba="container"] ~ [data-barba="container"] {
  visibility: hidden;
}

/*
 * Barba flying-image: leaving containers collapse and the next container stays
 * hidden until the clone handoff finishes, which exposes the default white
 * html/body canvas. Keep the full viewport dark for the cursor-progress window
 * (TransitionStartLoading through TransitionFinishLoading).
 */
html:has([data-barba="wrapper"].cursor-progress),
body:has([data-barba="wrapper"].cursor-progress) {
  background-color: var(--color-dark-1);
}

[data-barba="wrapper"].cursor-progress {
  background-color: var(--color-dark-1);
}

#js-page-transition-curtain,
#js-header-curtain-transition {
  background-color: var(--color-dark-1);
}