/* Curtain Image Reveal — original.
   An offset two-column editorial gallery. Each figure waits behind a closed
   "curtain": the frame is clipped shut with a clip-path inset while the photo
   inside is zoomed to 1.25. When a figure crosses into the viewport the inset
   wipes open — the direction alternates per item (left→right, top→bottom,
   right→left…) — while the photo settles back to scale(1); the counter-motion
   of curtain and photo is the parallax feel. A tiny mono series number fades
   in a beat after the wipe. IntersectionObserver only toggles `.is-revealed`;
   all motion is CSS transitions on clip-path / transform / opacity.
   Every selector is scoped to .byq-gem--curtain-image-reveal-01. */

.byq-gem--curtain-image-reveal-01 {
  font-family: var(--byq-font-sans);
  color: var(--byq-fg);
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem;
  box-sizing: border-box;
}

.byq-gem--curtain-image-reveal-01 *,
.byq-gem--curtain-image-reveal-01 *::before,
.byq-gem--curtain-image-reveal-01 *::after {
  box-sizing: border-box;
}

/* ---- Two staggered columns --------------------------------------------- */
.byq-gem--curtain-image-reveal-01__columns {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 4vw, 3.5rem);
}

.byq-gem--curtain-image-reveal-01__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 10vh, 6.5rem);
}

/* The second column starts lower, so figures interleave as you scroll. */
.byq-gem--curtain-image-reveal-01__col--b {
  margin-top: clamp(5rem, 24vh, 11rem);
}

/* Column-based stagger: when two figures enter together, the right column
   trails a beat behind the left. (JS overrides --d for the load cascade.) */
.byq-gem--curtain-image-reveal-01__col--b .byq-gem--curtain-image-reveal-01__item {
  --d: 0.12s;
}

/* ---- Figures ------------------------------------------------------------ */
.byq-gem--curtain-image-reveal-01__item {
  --d: 0s; /* per-item reveal delay */
  margin: 0;
  width: 100%;
}

/* Editorial rhythm: a couple of figures run narrower / flush right. */
.byq-gem--curtain-image-reveal-01__item--narrow {
  width: 84%;
}
.byq-gem--curtain-image-reveal-01__item--end {
  align-self: flex-end;
}

/* Varied rendered aspect ratios (all crops of the same 900×1100 source). */
.byq-gem--curtain-image-reveal-01__item--r45 .byq-gem--curtain-image-reveal-01__frame {
  aspect-ratio: 4 / 5;
}
.byq-gem--curtain-image-reveal-01__item--r34 .byq-gem--curtain-image-reveal-01__frame {
  aspect-ratio: 3 / 4;
}
.byq-gem--curtain-image-reveal-01__item--r11 .byq-gem--curtain-image-reveal-01__frame {
  aspect-ratio: 1 / 1;
}
.byq-gem--curtain-image-reveal-01__item--r78 .byq-gem--curtain-image-reveal-01__frame {
  aspect-ratio: 7 / 8;
}

/* ---- The curtain --------------------------------------------------------- */
.byq-gem--curtain-image-reveal-01__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--byq-radius);
  background: var(--byq-card);
  transform: translateZ(0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--d);
}

/* Closed states — the wipe direction alternates per figure. Revealing means
   collapsing one inset edge back to 0, so the image is *uncovered*, not moved. */
.byq-gem--curtain-image-reveal-01__item--wipe-lr .byq-gem--curtain-image-reveal-01__frame {
  clip-path: inset(0 100% 0 0); /* opens left → right */
}
.byq-gem--curtain-image-reveal-01__item--wipe-tb .byq-gem--curtain-image-reveal-01__frame {
  clip-path: inset(0 0 100% 0); /* opens top → bottom */
}
.byq-gem--curtain-image-reveal-01__item--wipe-rl .byq-gem--curtain-image-reveal-01__frame {
  clip-path: inset(0 0 0 100%); /* opens right → left */
}

/* The photo starts pushed-in and settles as the curtain opens — the two
   opposing motions read as parallax. */
.byq-gem--curtain-image-reveal-01__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) var(--d);
}

/* ---- Series caption ------------------------------------------------------ */
.byq-gem--curtain-image-reveal-01__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.7rem;
  font-family: var(--byq-font-mono);
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0;
  transform: translateY(8px);
  /* fades in a beat (150ms) after the wipe has visually landed */
  transition:
    opacity 0.45s ease calc(var(--d) + 0.7s),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--d) + 0.7s);
}
.byq-gem--curtain-image-reveal-01__no {
  color: var(--byq-accent-lime);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.byq-gem--curtain-image-reveal-01__name {
  color: color-mix(in srgb, var(--byq-fg) 55%, transparent);
  text-align: right;
}

/* ---- Revealed state (toggled once by IntersectionObserver) --------------- */
.byq-gem--curtain-image-reveal-01__item.is-revealed .byq-gem--curtain-image-reveal-01__frame {
  clip-path: inset(0 0 0 0);
}
.byq-gem--curtain-image-reveal-01__item.is-revealed .byq-gem--curtain-image-reveal-01__img {
  transform: scale(1);
}
.byq-gem--curtain-image-reveal-01__item.is-revealed .byq-gem--curtain-image-reveal-01__caption {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Narrow screens: a single flowing column ----------------------------- */
@media (max-width: 44rem) {
  .byq-gem--curtain-image-reveal-01__columns {
    flex-direction: column;
    gap: 3.25rem;
  }
  .byq-gem--curtain-image-reveal-01__col {
    width: 100%;
    gap: 3.25rem;
  }
  .byq-gem--curtain-image-reveal-01__col--b {
    margin-top: 3.25rem;
  }
}

/* ---- Reduced motion: everything simply visible --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .byq-gem--curtain-image-reveal-01 .byq-gem--curtain-image-reveal-01__frame {
    clip-path: inset(0 0 0 0);
    transition: none;
  }
  .byq-gem--curtain-image-reveal-01 .byq-gem--curtain-image-reveal-01__img {
    transform: none;
    transition: none;
  }
  .byq-gem--curtain-image-reveal-01 .byq-gem--curtain-image-reveal-01__caption {
    opacity: 1;
    transform: none;
    transition: none;
  }
}