.scroll-progress { position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.portrait-depth { width: 100%; height: 100%; transform: translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0) rotateX(var(--portrait-rx,0deg)) rotateY(var(--portrait-ry,0deg)); transform-origin: 50% 60%; }
.reveal-ready { transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.reveal-pending { opacity: 0; transform: translateY(16px); }
@media(prefers-reduced-motion:reduce) {
  .portrait-depth { transform: none; }
  .reveal-pending { opacity: 1; transform: none; }
  .scroll-progress { display: none; }
}