/* Background shift — scoped (from src/css/base.css) */

.testi-container[data-background-shift] {
  --shift-text: #ffffff;
  --shift-bg-cover: #ffffff;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  background-color: transparent;
}

.testi-container[data-background-shift] > .bg {
  background: #000000;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.testi-container[data-background-shift] > .shift {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
  z-index: 0;
}

.testi-container[data-background-shift] .shift--horizontal {
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
}

.testi-container[data-background-shift] .shift--vertical {
  /* Bleed past edges so fractional column widths never leave gaps */
  inset: 0 -2px;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.testi-container[data-background-shift] .shift--rotated {
  inset: -10% -10%;
  height: 120%;
  width: 120%;
}

.testi-container[data-background-shift] .shift__layer {
  position: relative;
  overflow: hidden;
}

/* Overlap adjacent strips — kills 1px black seams on odd DPR / widths */
.testi-container[data-background-shift] .shift--horizontal .shift__layer {
  margin-top: -1px;
}

.testi-container[data-background-shift] .shift--vertical .shift__layer {
  margin-left: -1px;
}

.testi-container[data-background-shift] .shift--rotated .shift__layer {
  transform: rotate(4deg) scale(1.1);
}

.testi-container[data-background-shift] .shift__layer-inner {
  height: 100%;
  background: var(--shift-bg-cover);
  transform: translate3d(0, 101%, 0);
  will-change: transform;
  backface-visibility: hidden;
}

.testi-container[data-background-shift] .shift--vertical .shift__layer-inner {
  width: calc(100% + 2px);
  margin-left: -1px;
  transform: translate3d(101%, 0, 0);
}

/* Solid cover once animation finishes — no residual black hairlines */
.testi-container[data-background-shift].is-covered {
  background-color: var(--shift-bg-cover);
}

.testi-container[data-background-shift].is-covered > .bg,
.testi-container[data-background-shift].is-covered > .shift {
  opacity: 0;
  pointer-events: none;
}

.testi-container[data-background-shift] > .content.blend {
  position: relative;
  z-index: 1;
  mix-blend-mode: difference;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  min-height: inherit;
}

/* Mobile / tablet: no mix-blend — text stays black for the whole animation */
.testi-container[data-background-shift].is-touch > .content.blend {
  mix-blend-mode: normal;
  color: #000;
}

.testi-container[data-background-shift].is-touch > .content.blend h2,
.testi-container[data-background-shift].is-touch > .content.blend h2 span,
.testi-container[data-background-shift].is-touch > .content.blend h4,
.testi-container[data-background-shift].is-touch > .content.blend a,
.testi-container[data-background-shift].is-touch > .content.blend button a {
  color: #000;
}

.testi-container[data-background-shift].is-touch > .content.blend button a:before,
.testi-container[data-background-shift].is-touch > .content.blend button a:after {
  border-color: #000;
}

.testi-container[data-background-shift].is-covered .shift__layer-inner {
  will-change: auto;
}