/* Reusable Image Reveal: scoped media motion/theme. Host owns all geometry. */
.image-reveal {
  --reveal-ease: cubic-bezier(.22, 1, .36, 1);
  /* Reuse accepted Yuanze shared tokens; isolated preview fallbacks match them. */
  --yz-ir-panel-bg: var(--yz-green-900, #0d3b31);
  --yz-ir-title-color: var(--yz-ivory-100, #f4f0e5);
  --yz-ir-body-color: color-mix(in srgb, var(--yz-ir-title-color) 78%, transparent);
  --yz-ir-accent-color: var(--yz-champagne-500, #c9ad72);
  --yz-ir-divider-color: color-mix(in srgb, var(--yz-ir-accent-color) 65%, transparent);
  --yz-ir-replay-border: var(--yz-border-light, color-mix(in srgb, var(--yz-ir-title-color) 42%, transparent));
  --yz-ir-replay-text: var(--yz-ir-title-color);
  background-color: var(--yz-ir-panel-bg);
  color: var(--yz-ir-title-color);
}
.image-reveal > .image-reveal__media,
.image-reveal > .image-reveal__copy { background-color: var(--yz-ir-panel-bg); }
.image-reveal > .image-reveal__copy > h2 { color: var(--yz-ir-title-color); }
.image-reveal > .image-reveal__copy > p { color: var(--yz-ir-body-color); }
.image-reveal > .image-reveal__copy > .image-reveal__eyebrow { color: var(--yz-ir-accent-color); }
.image-reveal > .image-reveal__replay {
  background-color: transparent;
  border-color: var(--yz-ir-replay-border);
  color: var(--yz-ir-replay-text);
}
.image-reveal > .image-reveal__replay:hover {
  background-color: color-mix(in srgb, var(--yz-ir-panel-bg) 90%, var(--yz-ir-title-color));
  border-color: var(--yz-ir-divider-color);
}
.image-reveal > .image-reveal__replay:focus-visible { outline-color: var(--yz-ir-accent-color); }
.image-reveal .reveal-demo-manual { color: var(--yz-ir-body-color); }
.image-reveal .reveal-demo-manual label { color: var(--yz-ir-accent-color); }
.image-reveal .reveal-demo-manual select,
.image-reveal .reveal-demo-manual button {
  background-color: var(--yz-ir-panel-bg);
  color: var(--yz-ir-title-color);
  border-color: var(--yz-ir-replay-border);
}
.image-reveal > .image-reveal__media > img { clip-path: none; opacity: 1; transform: none; }
.image-reveal > .image-reveal__media > .image-reveal__curtain {
  position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: var(--yz-ir-curtain-bg, var(--yz-ir-panel-bg)); transform: translateX(101%);
}
/* Replay is explicitly development-only, never a production default. */
.image-reveal > .image-reveal__replay { display: none; }
.image-reveal[data-reveal-development="true"] > .image-reveal__replay { display: inline-flex; }
/* IR-01: original internal viewport mask, unchanged keyframes/timing. */
.image-reveal--mask.is-playing > .image-reveal__media {
  animation: reveal-mask-from-edge 900ms var(--reveal-ease) both;
}
@keyframes reveal-mask-from-edge {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
/* IR-02: original material curtain, unchanged keyframes/timing. */
.image-reveal--curtain.is-playing > .image-reveal__media > .image-reveal__curtain {
  animation: reveal-material-curtain 1150ms var(--reveal-ease) both;
}
@keyframes reveal-material-curtain {
  0% { transform: translateX(-101%); }
  45% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}
/* IR-03: original controlled scale, unchanged keyframes/timing. */
.image-reveal--scale.is-playing > .image-reveal__media > img {
  animation: reveal-controlled-scale 1200ms var(--reveal-ease) both;
}
@keyframes reveal-controlled-scale {
  from { transform: scale(1.1); opacity: .3; }
  to { transform: scale(1); opacity: 1; }
}
/* IR-04: one image, center opening; no duplicated halves or translation. */
.image-reveal--split.is-playing > .image-reveal__media > img {
  animation: reveal-split 960ms var(--reveal-ease) both;
}
@keyframes reveal-split {
  from { clip-path: inset(0 50% 0 50%); opacity: .65; transform: scale(1.015); }
  to { clip-path: inset(0 0 0 0); opacity: 1; transform: scale(1); }
}
/* IR-05: process progression, 28px / 1.02 maximum. */
.image-reveal--glide.is-playing > .image-reveal__media > img {
  animation: reveal-glide 1040ms var(--reveal-ease) both;
}
@keyframes reveal-glide {
  from { opacity: 0; transform: translateX(28px) scale(1.02); clip-path: inset(0 0 0 10%); }
  to { opacity: 1; transform: translateX(0) scale(1); clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .image-reveal > .image-reveal__media,
  .image-reveal > .image-reveal__media > img,
  .image-reveal > .image-reveal__media > .image-reveal__curtain {
    animation: none !important; clip-path: none !important;
    transform: none !important; opacity: 1 !important;
  }
  .image-reveal > .image-reveal__media > .image-reveal__curtain { display: none; }
}