/* Experiences — multi-stage comparator (pin + clip-path wipe + divider),
   digerakkan js/motion/experiences.js. Layout mengikuti Figma:
   judul kiri · foto tengah · copy kanan, hairline merah atas-bawah. */

.experiences {
  background-color: var(--color-amber);
}

.exp-stage {
  position: relative;
  height: 100svh;
  display: flex;
  align-items: center;
  background-color: var(--color-amber);
  border-top: 1px solid var(--color-red);
  border-bottom: 1px solid var(--color-red);
  overflow: hidden;
}

.exp-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18.75rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xl);
}

/* Judul & copy bertumpuk — crossfade per stage */
.exp-titles,
.exp-copies {
  display: grid;
}

.exp-title,
.exp-copy {
  grid-area: 1 / 1;
  opacity: 0;
}

.exp-title:first-child,
.exp-copy:first-child {
  opacity: 1;
}

.exp-title {
  max-width: 21rem;
}

.exp-copy {
  max-width: 21rem;
  justify-self: end;
}

/* Frame foto: layer bertumpuk, wipe via clip-path */
.exp-frame {
  position: relative;
  aspect-ratio: 300 / 376;
  border-radius: 8px;
  overflow: hidden;
}

.exp-layer {
  position: absolute;
  inset: 0;
}

.exp-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background-color: var(--color-amber);
  box-shadow: 0 0 10px rgb(48 48 48 / 0.5);
  opacity: 0;
  z-index: 10;
}

.exp-counter {
  position: absolute;
  right: 0;
  bottom: calc(50% - 50svh + var(--space-l));
  color: var(--color-dusky);
  letter-spacing: var(--tracking-button);
}

.exp-counter-current {
  color: var(--color-red);
}

@media screen and (max-width: 767px) {
  .exp-inner {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .exp-frame {
    max-width: 18.75rem;
  }

  .exp-copy {
    justify-self: start;
  }
}

/* Fallback reduced-motion: daftar statis stage pertama + semua teks terlihat */
.no-motion .exp-stage {
  height: auto;
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.no-motion .exp-titles,
.no-motion .exp-copies {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.no-motion .exp-title,
.no-motion .exp-copy {
  opacity: 1;
}

.no-motion .exp-counter,
.no-motion .exp-divider {
  display: none;
}