/* Entrance motion uses translate, so the pointer-driven 3D transform stays independent. */
.scroll-reveal {
  --reveal-distance: 20px;
  opacity: 1;
  translate: 0 0;
  transition: opacity .65s ease, translate .65s cubic-bezier(.2,.75,.25,1), transform .18s ease-out, border-color .24s ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}
.scroll-reveal.reveal-pending { opacity: 1; translate: 0 var(--reveal-distance); pointer-events: auto; }
.scroll-reveal.reveal-immediate,
.scroll-reveal:focus-within { opacity: 1; translate: 0 0; pointer-events: auto; transition: transform .18s ease-out, border-color .24s ease; }
.photo-entering { animation: photo-zoom-out 1.1s cubic-bezier(.2,.7,.3,1) both; }
@keyframes photo-zoom-out {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}
.sweep-ready:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 55%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, #ffe00000 20%, #ffe00016 50%, #ffe00000 80%);
}
.sweep-ready.sweep-played:after { animation: yellow-light-sweep 1.4s ease-in-out .18s both; }
@keyframes yellow-light-sweep {
  0% { transform: translateX(0) skewX(-12deg); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateX(310%) skewX(-12deg); opacity: 0; }
}
@media(max-width:640px) {
  .scroll-reveal { --reveal-distance: 14px; }
}
@media(prefers-reduced-motion:reduce), print {
  .scroll-reveal, .scroll-reveal.reveal-pending { opacity: 1; translate: none; pointer-events: auto; transition: none; }
  .photo-entering { animation: none; transform: none; }
  .sweep-ready:after { display: none; animation: none; }
}