/* Section 03 only: cinematic client journeys without changing its editorial composition. */
.relationship-panels {
  --relationship-divider: 0%;
  position: relative;
  isolation: isolate;
}

.relationship-panels::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, .36);
  transform: translateX(calc(-50% + var(--relationship-divider)));
  transition: transform .7s cubic-bezier(.2, .72, .2, 1), background-color .7s ease;
  pointer-events: none;
}

.relationship-panels[data-active="dealership"] { --relationship-divider: 1.2vw; }
.relationship-panels[data-active="owners"] { --relationship-divider: -1.2vw; }

.relationship-panel {
  isolation: isolate;
  background: #111;
}

.relationship-panel:first-child { border-right: 0; }

.path .relationship-panel__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  color: inherit;
  pointer-events: none;
}

.relationship-panel__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  filter: grayscale(.54) saturate(.5) brightness(.57) contrast(1.12);
  transform: scale(1.005) translateZ(0);
  transition: filter .7s cubic-bezier(.2, .72, .2, 1), opacity .7s ease, transform .75s cubic-bezier(.2, .72, .2, 1);
}

.dealership .relationship-panel__video { object-position: 55% center; }
.owners .relationship-panel__video { object-position: center 48%; }

.relationship-panel::after {
  z-index: 1;
  opacity: 1;
  background:
    linear-gradient(0deg, rgba(4, 4, 4, .78) 0%, rgba(4, 4, 4, .18) 58%, rgba(4, 4, 4, .42) 100%),
    linear-gradient(90deg, rgba(4, 4, 4, .24), transparent 64%);
  transition: background-color .7s ease, opacity .7s ease;
  pointer-events: none;
}

.relationship-panel > span,
.path > .relationship-panel__copy {
  position: relative;
  z-index: 3;
}

.path > .relationship-panel__copy {
  align-self: end;
  color: white;
}

.relationship-panel__line {
  display: inline-block;
  will-change: transform, opacity;
}

.path .relationship-panel__meta {
  margin: -18px 0 24px;
  max-width: 360px;
  color: rgba(255, 255, 255, .64);
  font-size: 8px;
  line-height: 1.5;
  letter-spacing: .13em;
  white-space: normal;
}

.relationship-panel .line-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-bottom: 0;
  border-bottom: 0;
}

.relationship-panel .line-link::before,
.relationship-panel .line-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, .4);
}

.relationship-panel .line-link::after {
  background: #fff;
  transform: scaleX(.26);
  transform-origin: left center;
  transition: transform .65s cubic-bezier(.2, .72, .2, 1);
}

.relationship-panel .line-link span {
  transition: transform .65s cubic-bezier(.2, .72, .2, 1);
}

.relationship-panel .line-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 7px;
}

@media (hover: hover) and (pointer: fine) {
  .relationship-panels[data-active] .relationship-panel:not(.is-active) .relationship-panel__video {
    opacity: .58;
    filter: grayscale(.7) saturate(.34) brightness(.4) contrast(1.15);
  }

  .relationship-panel.is-active .relationship-panel__video {
    opacity: .96;
    filter: grayscale(.2) saturate(.8) brightness(.72) contrast(1.08);
    transform: scale(1.018) translateZ(0);
  }

  .relationship-panel.is-active .line-link::after,
  .relationship-panel:focus-within .line-link::after { transform: scaleX(1); }

  .relationship-panel.is-active .line-link span,
  .relationship-panel:focus-within .line-link span { transform: translateX(5px); }
}

@media (max-width: 700px) {
  .relationship-panels::after { display: none; }

  .relationship-panel__video {
    opacity: .88;
    filter: grayscale(.42) saturate(.58) brightness(.55) contrast(1.12);
  }

  .dealership .relationship-panel__video { object-position: 58% center; }
  .owners .relationship-panel__video { object-position: 54% center; }

  .path .relationship-panel__meta {
    margin-top: -14px;
    margin-bottom: 18px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .relationship-panels::after,
  .relationship-panel__video,
  .relationship-panel .line-link::after,
  .relationship-panel .line-link span {
    transition: none !important;
  }

  .relationship-panel__video {
    transform: none !important;
  }
}