/* Painted petals: sharp middle distance, soft near-camera silhouettes. */
.sakura-plane {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  overflow: clip;
  contain: layout paint;
}
.sakura-plane--far { z-index: 1; }
.sakura-plane--near { z-index: 5; }
.sakura-mote {
  position: absolute;
  left: var(--petal-left);
  top: var(--petal-top);
  width: var(--petal-size);
  aspect-ratio: 1;
  opacity: var(--petal-alpha);
  filter: blur(var(--petal-blur)) saturate(1.2);
  transform: translate3d(calc(var(--sakura-x,0px) * var(--petal-depth)),calc(var(--sakura-y,0px) * var(--petal-depth)),0) rotate(var(--petal-angle));
}
.sakura-mote img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: var(--petal-motion,sakura-drift-arc) var(--petal-duration) linear infinite;
  animation-delay: var(--petal-phase);
  animation-play-state: paused;
}
.sakura-in-view .sakura-mote img { animation-play-state: running; }
@keyframes sakura-drift-arc {
  0% { transform: translate3d(calc(var(--petal-sway) * -1),calc(var(--petal-drift) * -.5),0) rotate(-20deg) rotateY(-18deg); opacity: 0; }
  15% { opacity: 1; }
  38% { transform: translate3d(calc(var(--petal-sway) * .55),calc(var(--petal-drift) * -.12),0) rotate(4deg) rotateY(28deg); }
  68% { transform: translate3d(calc(var(--petal-sway) * .9),calc(var(--petal-drift) * .18),0) rotate(19deg) rotateY(8deg); }
  82% { opacity: 1; }
  100% { transform: translate3d(var(--petal-sway),calc(var(--petal-drift) * .5),0) rotate(32deg) rotateY(-14deg); opacity: 0; }
}
@keyframes sakura-drift-sway {
  0% { transform: translate3d(calc(var(--petal-sway) * -.5),calc(var(--petal-drift) * -.5),0) rotate(14deg) rotateY(22deg); opacity: 0; }
  15% { opacity: 1; }
  32% { transform: translate3d(var(--petal-sway),calc(var(--petal-drift) * -.18),0) rotate(-8deg) rotateY(-12deg); }
  64% { transform: translate3d(calc(var(--petal-sway) * -.3),calc(var(--petal-drift) * .14),0) rotate(-20deg) rotateY(30deg); }
  82% { opacity: 1; }
  100% { transform: translate3d(calc(var(--petal-sway) * .65),calc(var(--petal-drift) * .5),0) rotate(-6deg) rotateY(6deg); opacity: 0; }
}
@keyframes sakura-drift-turn {
  0% { transform: translate3d(0,calc(var(--petal-drift) * -.5),0) rotate(-30deg) rotateY(-26deg); opacity: 0; }
  15% { opacity: 1; }
  42% { transform: translate3d(calc(var(--petal-sway) * .85),calc(var(--petal-drift) * -.08),0) rotate(8deg) rotateY(34deg); }
  72% { transform: translate3d(calc(var(--petal-sway) * -.2),calc(var(--petal-drift) * .22),0) rotate(28deg) rotateY(-8deg); }
  82% { opacity: 1; }
  100% { transform: translate3d(calc(var(--petal-sway) * -.6),calc(var(--petal-drift) * .5),0) rotate(42deg) rotateY(-30deg); opacity: 0; }
}
/* Confine the closing petals to the artwork, above the painted arch. */
.download-scene .sakura-plane--near { z-index: 5; }
@media (max-width:719px) {
  .sakura-mote { left: var(--petal-mobile-left,var(--petal-left)); top: var(--petal-mobile-top,var(--petal-top)); width: calc(var(--petal-size) * .7); }
  .sakura-wide-only { display: none; }
}
.motion-reduced .sakura-mote { transform: rotate(var(--petal-angle)); }
.motion-reduced .sakura-mote img { animation: none; }
@media (prefers-reduced-motion:reduce) {
  html:not(.motion-standard) .sakura-mote { transform: rotate(var(--petal-angle)); }
  html:not(.motion-standard) .sakura-mote img { animation: none; }
}