/* =====================================================================
   Ambient "living painting" motion — slow, small, compositor-only.
   Loops only run with no-preference motion and pause when their scene is offscreen.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .sway { animation: sway-hang 9s var(--ease-soft) infinite alternate; transform-origin: 50% 0; will-change: transform; }
  .sway--leaf { animation-name: sway-leaf; animation-duration: 7.5s; transform-origin: 40% 100%; }
  .sway--stem { animation-name: sway-stem; animation-duration: 6s; transform-origin: 50% 100%; }
  .sway--late { animation-delay: -3.2s; }
  .sway--slow { animation-duration: 12s; }
  .bob { animation: bob 6.5s var(--ease-soft) infinite alternate; }
  .bob--late { animation-delay: -2.4s; }
  /* More visible floating in the opening pond, with independent rhythms. */
  .hero__lotus.bob { animation-name: garden-float; animation-duration: 4.8s; }
  .hero__lotus.sway--stem { animation-name: garden-stem; animation-duration: 5s; }
  .hero__lotus.hero__lotus--bloom { animation-delay: -0.8s; }
  .hero__lotus.hero__lotus--small { animation-delay: -1.7s; animation-duration: 5.8s; }
  .hero__lotus.hero__lotus--bud { animation-duration: 6.6s; }
  .hero__lotus.hero__lotus--leaf-b { animation-duration: 6.2s; }
  .ripple { animation: ripple 7s ease-out infinite; }
  .ripple--b { animation-delay: -3.5s; }
  .wish-note { animation: note-sway 7s var(--ease-soft) infinite alternate; }
  .wish-note:nth-child(2n) { animation-duration: 8.5s; animation-delay: -2s; }
  .wish-note:nth-child(3n) { animation-duration: 6.2s; animation-delay: -4s; }

  /* pause loops while their scene is not on screen (toggled by IntersectionObserver) */
  .is-offscreen .sway, .is-offscreen .bob, .is-offscreen .ripple, .is-offscreen .wish-note,
  .is-hidden-tab .sway, .is-hidden-tab .bob, .is-hidden-tab .ripple, .is-hidden-tab .wish-note { animation-play-state: paused; }
}

@keyframes sway-hang { from { transform: rotate(-0.7deg); } to { transform: rotate(0.8deg); } }
@keyframes sway-leaf { from { transform: rotate(-1.2deg) skewX(-0.4deg); } to { transform: rotate(1deg) skewX(0.5deg); } }
@keyframes sway-stem { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
@keyframes bob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-3px) rotate(1deg); } }
@keyframes garden-float {
  from { transform: translate(-3px, 0) rotate(-2deg); }
  to { transform: translate(3px, -12px) rotate(2deg); }
}
@keyframes garden-stem {
  from { transform: translateY(2px) rotate(-4deg); }
  to { transform: translateY(-5px) rotate(4deg); }
}
@keyframes note-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes ripple {
  0% { opacity: 0; transform: scale(0.4); }
  15% { opacity: 0.8; }
  60%, 100% { opacity: 0; transform: scale(2.2); }
}

/* ink-reveal for the couple's names: a soft brush edge sweeps across real, selectable text */
@property --ink { syntax: '<percentage>'; inherits: false; initial-value: 130%; }
.ink {
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--ink) - 18%), rgba(0, 0, 0, 0.4) calc(var(--ink) - 6%), transparent var(--ink));
          mask-image: linear-gradient(100deg, #000 calc(var(--ink) - 18%), rgba(0, 0, 0, 0.4) calc(var(--ink) - 6%), transparent var(--ink));
}

/* one-shot bloom when a blessing is hung */
@keyframes bloom-open {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-30deg); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1) rotate(0deg); }
}
.bloom { animation: bloom-open 1100ms var(--ease-out) forwards; }

/* Continuous, slow watercolor petal rain after the invitation opens. */
.petal-rain { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; contain: strict; }
.falling-petal { position: absolute; left: var(--petal-x); top: -24px; width: var(--petal-width); height: calc(var(--petal-width) * 1.6); background: #b88425; -webkit-mask: url('../assets/optimized/art/petal-falling-64.webp') center / contain no-repeat; mask: url('../assets/optimized/art/petal-falling-64.webp') center / contain no-repeat; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .falling-petal { animation: petal-rain var(--petal-duration) linear var(--petal-delay) infinite; }
  html:not(.intro-done) .falling-petal, .is-hidden-tab .falling-petal, html:has(dialog[open]) .falling-petal { animation-play-state: paused; }
}
html:not(.intro-done) .petal-rain, html:has(dialog[open]) .petal-rain { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .petal-rain { display: none; } }
@keyframes petal-rain {
  0% { transform: translate3d(0, -24px, 0) rotate(var(--petal-turn)) rotateY(0); opacity: 0; }
  3% { opacity: 0.8; }
  25% { transform: translate3d(calc(var(--petal-drift) * 0.7), 25svh, 0) rotate(calc(var(--petal-turn) + 45deg)) rotateY(35deg); }
  55% { transform: translate3d(var(--petal-drift), 55svh, 0) rotate(calc(var(--petal-turn) + 110deg)) rotateY(-25deg); }
  80% { transform: translate3d(var(--petal-end), 80svh, 0) rotate(calc(var(--petal-turn) + 160deg)) rotateY(40deg); }
  97% { opacity: 0.7; }
  100% { transform: translate3d(var(--petal-end), calc(100svh + 48px), 0) rotate(calc(var(--petal-turn) + var(--petal-spin))) rotateY(-30deg); opacity: 0; }
}