/* A single reading-order controller owns all entrances. Ambient motion is unchanged. */
.ordered-item,.ordered-stage,.ordered-photo-frame,.ordered-letter{transform-box:fill-box;transform-origin:center}
.motion-on .ordered-item:not(.revealed){opacity:0}
.motion-on.art-ready .ordered-item.revealed{animation:ordered-enter .45s cubic-bezier(.16,1,.3,1) both}
@keyframes ordered-enter{0%{opacity:0;translate:0 26px}50%{opacity:1}100%{opacity:1;translate:0 0}}
.motion-on.art-ready .ordered-item.revealed .ordered-letter{animation:ordered-letter .45s cubic-bezier(.175,.885,.32,1.275) calc(var(--letter-delay,0s)*.65) both}
@keyframes ordered-letter{0%{opacity:0;translate:0 35px;scale:.88}45%{opacity:1}65%{translate:0 -5px;scale:1.025}100%{opacity:1;translate:0 0;scale:1}}
.motion-on.art-ready .ordered-item.revealed .ordered-stage[data-stage=spring]{animation:stage-spring .7s ease-out both}
.motion-on.art-ready .ordered-item.revealed .ordered-stage[data-stage=script]{animation:script-land .6s cubic-bezier(.175,.885,.32,1.275) both}
.motion-on.art-ready .ordered-item.revealed .ordered-photo-frame{animation:ordered-photo .6s ease-out both}
@keyframes ordered-photo{0%{scale:.985}65%{scale:1.006}100%{scale:1}}
.ordered-item.settled,.ordered-item.settled .ordered-letter,.ordered-item.settled .ordered-stage,.ordered-item.settled .ordered-photo-frame{animation:none!important;opacity:1;translate:0 0;scale:1;rotate:0deg}
body.motion-off .ordered-item,body.motion-off .ordered-letter,body.motion-off .ordered-stage,body.motion-off .ordered-photo-frame{animation:none!important;opacity:1;translate:0 0;scale:1;rotate:0deg}
@media(prefers-reduced-motion:reduce){.ordered-item,.ordered-letter,.ordered-stage,.ordered-photo-frame{animation:none!important;opacity:1!important;translate:0 0!important;scale:1!important;rotate:0deg!important}}

/* Prepare sections just before they enter the viewport. */
.scene-gate.open .leaf{animation-duration:.8s}