.pf-image-open {
  --pf-dur: 900ms;
  --pf-delay: 100ms;
  --pf-ease: cubic-bezier(0.34, 1.3, 0.64, 1);
  --pf-radius: 12px;
  --pf-zoom: 1.12;
  clip-path: inset(100% 0 0 0 round var(--pf-radius));
  scale: var(--pf-zoom);
}
.pf-image-open.is-on {
  clip-path: inset(0 0 0 0 round var(--pf-radius));
  scale: 1;
  animation: pf-image-open var(--pf-dur) var(--pf-ease) var(--pf-delay) both;
}
@keyframes pf-image-open {
  from { clip-path: inset(100% 0 0 0 round var(--pf-radius)); scale: var(--pf-zoom); }
  to   { clip-path: inset(0 0 0 0 round var(--pf-radius)); scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-image-open, .pf-image-open.is-on { clip-path: inset(0 0 0 0 round var(--pf-radius)); scale: 1; animation: none; }
}