/* ============================================================
   Celeste Canvas & Parallax Item — sc-canvas.css
   Chunk 33 — Free-Position Canvas & Parallax Wrapper
   ============================================================ */

.celeste-canvas {
  position: relative;
  width: 100%;
  flex: 1;
  height: 100%;
  aspect-ratio: var(--cc-aspect-ratio, auto);
  min-height: var(--cc-min-height, auto);
}

.celeste-canvas--clip {
  overflow: hidden;
}

/* WPBakery DOM Inheritance Repair (Full-Height Row Support) */
.wpb_column:has(> .vc_column-inner > .wpb_wrapper > .celeste-canvas),
.vc_column-inner:has(> .wpb_wrapper > .celeste-canvas),
.wpb_wrapper:has(> .celeste-canvas) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
  height: 100%;
}

.vc_row.vc_row-o-full-height:has(.celeste-canvas) {
  height: 1px;
}

/* Sibling Inversion: Read the Row's class and push non-canvas columns back into alignment */
.vc_row.vc_row-o-columns-middle:has(.celeste-canvas) > .wpb_column:not(:has(.celeste-canvas)) {
  align-self: center;
}
.vc_row.vc_row-o-columns-bottom:has(.celeste-canvas) > .wpb_column:not(:has(.celeste-canvas)) {
  align-self: flex-end;
}
.vc_row.vc_row-o-columns-top:has(.celeste-canvas) > .wpb_column:not(:has(.celeste-canvas)) {
  align-self: flex-start;
}
.vc_row-o-columns-stretch:has(.celeste-canvas) > .wpb_column:not(:has(.celeste-canvas)) {
  align-self: stretch;
}

/* Mobile slider: map WPBakery row vertical alignment to canvas flex axis */
@media (max-width: 767px) {
  .vc_row.vc_row-o-columns-middle:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'],
  .vc_row.vc_row-o-columns-bottom:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'],
  .vc_row.vc_row-o-columns-top:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'],
  .vc_row.vc_row-o-columns-stretch:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100% !important;
  }

  .vc_row.vc_row-o-columns-middle:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'] {
    justify-content: center;
  }

  .vc_row.vc_row-o-columns-bottom:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'] {
    justify-content: flex-end;
  }

  .vc_row.vc_row-o-columns-top:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'] {
    justify-content: flex-start;
  }

  .vc_row.vc_row-o-columns-stretch:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'] {
    justify-content: stretch;
  }

  .vc_row.vc_row-o-columns-stretch:has(.celeste-canvas[data-mobile-mode='slider']) .celeste-canvas[data-mobile-mode='slider'] .celeste-canvas__swiper {
    flex: 1;
    min-height: 0;
  }
}


/* --- Parallax item (desktop) ----------------------------------- */

.celeste-parallax-item {
  position: absolute;
  left: var(--pi-x, 0%);
  top: var(--pi-y, 0%);
  width: var(--pi-w, auto);
  z-index: var(--pi-z, 1);
  transform:
    translate3d(
      calc((var(--pi-anchor-x, 0%) * -1) + ((var(--scroll-progress, 0.5) - 0.5) * var(--pi-velocity-x, 0) * 100vw)),
      calc((var(--pi-anchor-y, 0%) * -1) + ((var(--scroll-progress, 0.5) - 0.5) * var(--pi-velocity-y, 0) * 100vh)),
      0
    )
    rotate(var(--pi-rot, 0deg))
    scale(var(--pi-scale, 1))
    skewX(var(--pi-skew-x, 0deg))
    skewY(var(--pi-skew-y, 0deg));
  transform-origin: var(--pi-transform-origin, center center);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
}

@media (min-width: 768px) {
  .celeste-canvas .celeste-parallax-item.swiper-slide {
    position: absolute !important;
    left: var(--pi-x, 0%) !important;
    top: var(--pi-y, 0%) !important;
    width: var(--pi-w, auto) !important;
    height: auto !important;
    transform:
      translate3d(
        calc((var(--pi-anchor-x, 0%) * -1) + ((var(--scroll-progress, 0.5) - 0.5) * var(--pi-velocity-x, 0) * 100vw)),
        calc((var(--pi-anchor-y, 0%) * -1) + ((var(--scroll-progress, 0.5) - 0.5) * var(--pi-velocity-y, 0) * 100vh)),
        0
      )
      rotate(var(--pi-rot, 0deg))
      scale(var(--pi-scale, 1))
      skewX(var(--pi-skew-x, 0deg))
      skewY(var(--pi-skew-y, 0deg)) !important;
  }
}

/* --- Desktop: slider wrapper is positionally transparent --------- */

@media (min-width: 768px) {
  .celeste-canvas__swiper,
  .celeste-canvas__swiper > .swiper,
  .celeste-canvas__swiper .swiper-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: none !important;
  }
}

/* --- Reduced motion: pin scroll progress at neutral ------------- */

@media (prefers-reduced-motion: reduce) {
  .celeste-canvas {
    --scroll-progress: 0.5 !important;
  }

  .celeste-parallax-item {
    will-change: auto;
  }
}

/* --- Mobile behaviour (<= 767px) -------------------------------- */

@media (max-width: 767px) {
  .vc_row.vc_row-o-full-height:has(.celeste-canvas) {
    height: auto;
  }

  .vc_row.vc_row-o-full-height:has(.celeste-canvas[data-mobile-mode='stack']) {
    height: auto;
}

  .celeste-canvas[data-mobile-mode='stack'] {
    display: flex;
    flex-direction: column;
    gap: var(--cc-stack-gap, 16px);
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }

  .celeste-canvas[data-mobile-mode='stack'] .celeste-parallax-item {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    will-change: auto;
    order: var(--pi-mobile-order, 0);
  }

  .celeste-canvas[data-mobile-mode='disable'] {
    display: none !important;
  }

  .celeste-parallax-item[data-mobile-disable='1'] {
    display: none !important;
  }

  .celeste-canvas[data-mobile-mode='slider'] {
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }

  .celeste-canvas[data-mobile-mode='slider'] .celeste-canvas__swiper > .swiper {
    position: relative;
    inset: auto;
    width: 100%;
    overflow: hidden;
  }

  .celeste-canvas[data-mobile-mode='slider'] .celeste-canvas__swiper {
    position: relative;
    inset: auto;
    width: 100%;
  }

  .celeste-canvas[data-mobile-mode='slider'] .celeste-parallax-item.swiper-slide {
    position: relative;
    left: auto;
    top: auto;
    width: var(--cpi-slide-mob, 100%);
    height: auto;
    transform: none;
    will-change: auto;
    flex-shrink: 0;
  }

  .celeste-canvas[data-mobile-mode='slider'] .swiper-wrapper {
    position: relative;
    inset: auto;
    display: flex;
    align-items: stretch;
  }

  .celeste-canvas[data-mobile-mode='slider'][data-slider-mode='peek'] .swiper-slide {
    user-select: none;
    transition: opacity 0.3s ease;
  }

  .celeste-canvas[data-mobile-mode='slider'][data-slider-mode='peek'] .celeste-canvas__swiper .swiper-slide:not(.swiper-slide-active) {
    opacity: var(--cc-peek-opacity, 0.4);
  }

  .celeste-canvas[data-mobile-mode='slider']:not([data-slider-mode='peek']) .swiper-slide {
    user-select: none;
  }
}

/* --- Swiper nav / pagination tokens ----------------------------- */

.celeste-canvas .swiper-pagination-bullet {
  background: var(--cpi-pagination-color, currentColor);
  opacity: 0.45;
}

.celeste-canvas .swiper-pagination-bullet-active {
  opacity: 1;
}

.celeste-canvas .swiper-button-prev,
.celeste-canvas .swiper-button-next {
  color: var(--cpi-nav-color, currentColor);
}

@media (min-width: 768px) {
  .celeste-canvas .swiper-button-prev,
  .celeste-canvas .swiper-button-next,
  .celeste-canvas .swiper-pagination {
    display: none !important;
  }
}

.celeste-canvas[data-nav-position='outside'] .celeste-canvas__swiper[data-nav-layout='outside'] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

@media (max-width: 767px) {
  .celeste-canvas[data-nav-position='outside'] .celeste-canvas__swiper[data-nav-layout='outside'] .swiper {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .celeste-canvas[data-nav-position='outside'] .celeste-canvas__swiper[data-nav-layout='outside'] .swiper-button-prev,
  .celeste-canvas[data-nav-position='outside'] .celeste-canvas__swiper[data-nav-layout='outside'] .swiper-button-next {
    position: relative;
    inset: auto;
    margin: 0;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
  }

  .celeste-canvas[data-nav-position='outside'] .celeste-canvas__swiper[data-nav-layout='outside'] .swiper-button-prev::after,
  .celeste-canvas[data-nav-position='outside'] .celeste-canvas__swiper[data-nav-layout='outside'] .swiper-button-next::after {
    font-size: 18px;
  }
}

/* --- FOUC prevention: pre-init slider state --------------------- */

@media (max-width: 767px) {
  .celeste-canvas__swiper .swiper:not(.swiper-initialized) .swiper-slide {
    opacity: 0;
  }

  .celeste-canvas__swiper .swiper:not(.swiper-initialized) .swiper-slide:first-child {
    opacity: 1;
  }
}