/* Photo movement continues after the scene's arrival transition finishes. */
.stage .photo-layer > img {
  --photo-angle: 0deg;
  animation: photo-breathe 6s ease-in-out infinite alternate;
  will-change: transform;
}
.stage .slide-scene > img,
.stage .wipe-scene > img {
  animation-name: photo-travel;
}
.stage .zoom-scene > img,
.stage .dissolve-scene > img,
.stage .monochrome-scene > img {
  animation-name: photo-cinema;
  animation-duration: 7s;
}
.stage .collage-scene > img,
.stage .heart-scene > img,
.stage .scrapbook-scene > img {
  animation-name: photo-float;
}
.stage .scrapbook-scene > img { --photo-angle: -3deg; }
.stage .cube-scene > img,
.stage .page-scene > img {
  animation-name: photo-tilt;
  animation-duration: 7s;
}
.stage .drift-scene > img { animation-name: camera-drift; }
.stage .stack-card {
  --card-angle: 0deg;
  animation: card-arrive 1.2s cubic-bezier(.22,.61,.36,1) both,
             card-sway 5s 1.2s ease-in-out infinite alternate;
  will-change: transform;
}
.stage .stack-card:first-child { --card-angle: -13deg; }
.stage .stack-card:nth-child(2) { --card-angle: 12deg; animation-delay: .18s, 1.38s; }
.stage .stack-card:nth-child(3) { animation-delay: .36s, 1.56s; }
.stage .circle-tile {
  animation: circle-arrive 1s cubic-bezier(.22,.61,.36,1) both,
             circle-float 4s 1s ease-in-out infinite alternate;
}
.stage .circle-tile:nth-child(2) { animation-delay: .15s, 1.15s; }
.stage .circle-tile:nth-child(3) { animation-delay: .3s, 1.3s; }
.stage .circle-tile:nth-child(4) { animation-delay: .45s, 1.45s; }
.stage .split-panel {
  --panel-side: -1;
  animation: panel-arrive 1.2s ease-out both,
             panel-float 5s 1.2s ease-in-out infinite alternate;
}
.stage .split-panel:nth-child(2) { --panel-side: 1; animation-delay: .2s, 1.4s; }
.stage .scrapbook-scene .paper-heart {
  animation: heart-pulse 3s ease-in-out infinite;
}
.stage .scrapbook-scene .paper-word {
  animation: memory-caption 4s ease-in-out infinite alternate;
}
.stage .heart-scene .heart-float { animation-name: heart-rise; animation-duration: 5s; }
.stage .sparkles-scene .sparkle { animation-name: star-drift; }
.stage.motion-paused .photo-layer,
.stage.motion-paused .photo-layer *,
.stage.motion-paused .photo-layer::after {
  animation-play-state: paused !important;
}

@keyframes photo-breathe {
  from { transform: scale(.96) rotate(var(--photo-angle)); }
  to { transform: scale(1.025) rotate(var(--photo-angle)); }
}
@keyframes photo-travel {
  from { transform: translate(-2%, 1%) scale(.97); }
  to { transform: translate(2%, -1%) scale(1.02); }
}
@keyframes photo-cinema {
  from { transform: translate(1%, 1%) scale(.96); }
  to { transform: translate(-1%, -1%) scale(1.04); }
}
@keyframes photo-float {
  from { transform: translateY(4px) rotate(calc(var(--photo-angle) - 1deg)) scale(.98); }
  to { transform: translateY(-4px) rotate(calc(var(--photo-angle) + 1deg)) scale(1.01); }
}
@keyframes photo-tilt {
  from { transform: perspective(650px) rotateY(-5deg) rotateZ(-.5deg) scale(.96); }
  to { transform: perspective(650px) rotateY(5deg) rotateZ(.5deg) scale(1.01); }
}
@keyframes card-arrive {
  from { transform: translate(-50%, -20%) rotate(calc(var(--card-angle) + 8deg)) scale(.8); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(var(--card-angle)) scale(.98); opacity: 1; }
}
@keyframes card-sway {
  from { transform: translate(-50%, -49%) rotate(calc(var(--card-angle) - 1deg)) scale(.98); }
  to { transform: translate(-50%, -52%) rotate(calc(var(--card-angle) + 1deg)) scale(1.01); }
}
@keyframes circle-arrive {
  from { transform: translateY(18px) scale(.72); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes circle-float {
  from { transform: translateY(3px) scale(.98); }
  to { transform: translateY(-3px) scale(1.02); }
}
@keyframes panel-arrive {
  from { transform: translateX(calc(var(--panel-side) * 20px)); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes panel-float {
  from { transform: translateY(calc(var(--panel-side) * 3px)) scale(.98); }
  to { transform: translateY(calc(var(--panel-side) * -3px)) scale(1.01); }
}
@keyframes heart-pulse {
  0%,100% { transform: scale(.9) rotate(-5deg); opacity: .65; }
  50% { transform: scale(1.15) rotate(5deg); opacity: 1; }
}
@keyframes heart-rise {
  0%,100% { transform: translateY(10px) rotate(-8deg) scale(.85); opacity: .4; }
  50% { transform: translateY(-10px) rotate(8deg) scale(1.1); opacity: .95; }
}
@keyframes star-drift {
  0%,100% { transform: translateY(7px) scale(.65) rotate(-10deg); opacity: .15; }
  50% { transform: translateY(-7px) scale(1.15) rotate(20deg); opacity: .95; }
}
@keyframes memory-caption {
  from { transform: translateY(2px) rotate(-4deg); opacity: .7; }
  to { transform: translateY(-2px) rotate(-2deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .photo-layer,
  .stage .photo-layer *,
  .stage .photo-layer::after { animation: none !important; }
}