/* The paper, silk and foreground canopy share a gentle breeze.
   Moving assets have their own real rendered loops; the layout never moves. */
#invitation-page #invitation .roots-art { inset: -2% -3%; }
#invitation-page #invitation .roots-art>img {
  transform-origin: 50% 45%; animation: letter-grove-camera 13s ease-in-out infinite alternate paused;
}
#invitation-page #invitation.cinema-running .roots-art>img { animation-play-state: running; }
#invitation-page #invitation .letter-near-bough {
  position: absolute; z-index: 4; width: 245px; height: auto;
  top: -155px; left: -110px; margin: 0; opacity: .86; pointer-events: none;
  transform: rotate(-22deg); filter: drop-shadow(0 10px 14px rgb(5 15 8/.22));
}
#invitation-page #invitation .letter-near-bough img,
#invitation-page #story .portrait-bough img,
#invitation-page #family-letter .letter-silk img,
#invitation-page #story .portrait-silk img { display: block; width: 100%; height: auto; }
#invitation-page #family-letter { margin-block: .7rem 2rem; }
#invitation-page #invitation.cinema-enhanced #family-letter:not(.is-open) .invitation-turn {
  transform: translateY(22px) rotateY(-205deg) rotateZ(-4deg);
}
#invitation-page #family-letter .invitation-rest {
  position: relative; z-index: 2; transform-style: preserve-3d;
  animation: letter-in-the-breeze 9s ease-in-out 3.4s infinite paused;
}
#invitation-page #invitation.cinema-running #family-letter.is-open .invitation-rest { animation-play-state: running; }
#invitation-page #family-letter .letter-silk {
  position: absolute; z-index: 0; width: 178%; height: auto; left: -39%; top: 33%;
  margin: 0; transform: rotate(-24deg); pointer-events: none;
  filter: drop-shadow(3px 15px 12px rgb(8 24 14/.3));
}
#invitation-page #family-letter .letter-content::before {
  display: block; content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('assets/keepsake-bough-v18.webp') -5rem -6rem/72% auto no-repeat;
  mix-blend-mode: multiply; filter: blur(7px) saturate(0); opacity: .07;
  animation: letter-canopy-shadow 7s ease-in-out infinite alternate paused;
}
#invitation-page #invitation.cinema-running .letter-content::before { animation-play-state: running; }
#invitation-page #invitation .letter-near-bough img {
  transform-origin: 12% 8%; animation: letter-living-bough 7s ease-in-out infinite alternate paused;
}
#invitation-page #invitation.cinema-running .letter-near-bough img { animation-play-state: running; }

/* The couple's photograph stays intact, with a foreground at a different depth.
   Silk crosses only the lower edge; it does not assume anything inside a photo. */
#invitation-page #story { padding-top: 7rem; }
#invitation-page #story .portrait-keepsake { perspective: 1400px; isolation: isolate; }
#invitation-page #story .portrait-reveal { position: relative; z-index: 2; transform-origin: 50% 60%; }
#invitation-page #story .portrait-bough { position: absolute; height: auto; margin: 0; pointer-events: none; }
#invitation-page #story .portrait-bough-far { z-index: 0; width: 78%; right: -39%; top: -15%; transform: rotate(27deg); opacity: .54; filter: blur(.3px); }
#invitation-page #story .portrait-bough-near { z-index: 5; width: 56%; left: -33%; top: 4%; transform: scaleX(-1) rotate(21deg); opacity: .98; filter: drop-shadow(0 8px 12px rgb(0 10 3/.2)); }
#invitation-page #story .portrait-silk { position: absolute; z-index: 4; width: 139%; left: -20%; bottom: -2%; height: auto; margin: 0; pointer-events: none; transform: rotate(8deg); filter: drop-shadow(0 6px 9px rgb(1 14 6/.2)); }
#invitation-page #story .story-portrait img { animation: portrait-camera-presence 9s ease-in-out infinite alternate paused; }
#invitation-page #story.cinema-running .story-portrait img { animation-play-state: running; }
#invitation-page #story .canopy-names { padding-top: 2.4rem; position: relative; z-index: 6; }
/* The photograph comes through a parting autumn bough. This is one timed
   sequence triggered by the photograph reaching the viewport, never scroll-scrubbed. */
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-reveal {
  opacity: .15; transform: translate3d(0,34px,0) rotateY(-17deg) rotateZ(-2deg) scale(.89);
}
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-bough-far { transform: translate(-25%,27%) rotate(6deg) scale(1.12); }
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-bough-near { transform: translate(34%,18%) scaleX(-1) rotate(-4deg); }
#invitation-page #story.cinema-enhanced:not(.cinema-ready) :is(.portrait-silk,.canopy-names) { opacity: 0; }
#invitation-page #story.cinema-ready .portrait-reveal { animation: portrait-autumn-arrival 3.8s cubic-bezier(.2,.68,.2,1) both paused; }
#invitation-page #story.cinema-ready .portrait-bough-far { animation: portrait-bough-part-far 3.8s cubic-bezier(.2,.68,.2,1) both paused; }
#invitation-page #story.cinema-ready .portrait-bough-near { animation: portrait-bough-part-near 3.3s cubic-bezier(.2,.68,.2,1) both paused; }
#invitation-page #story.cinema-ready .portrait-silk { animation: portrait-silk-unfurl 3.6s .35s cubic-bezier(.2,.68,.2,1) both paused; }
#invitation-page #story.cinema-ready .canopy-names { animation: portrait-names-reveal 1.8s 1.4s ease both paused; }
#invitation-page #story.cinema-running :is(.portrait-reveal,.portrait-bough-far,.portrait-bough-near,.portrait-silk,.canopy-names) { animation-play-state: running; }
#invitation-page #story .portrait-bough img { transform-origin: 70% 18%; animation: portrait-bough-wind 6.5s ease-in-out infinite alternate paused; }
#invitation-page #story .portrait-bough-near img { animation-duration: 7.8s; animation-delay: -2.6s; }
#invitation-page #story.cinema-running .portrait-bough img { animation-play-state: running; }
#invitation-page #story .portrait-reveal::after {
  content: ''; position: absolute; inset: -6%; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg,transparent 22%,rgb(255 226 164/.27) 46%,transparent 70%);
  mix-blend-mode: screen; opacity: 0;
}
#invitation-page #story.cinema-ready .portrait-reveal::after { animation: portrait-sun-pass 4.2s ease both paused; }
#invitation-page #story.cinema-running .portrait-reveal::after { animation-play-state: running; }
@keyframes letter-grove-camera { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.105) translateY(-.8%); } }
@keyframes letter-in-the-breeze {
  0%,100% { transform: translate3d(0,0,0) rotateX(2deg) rotateY(-5deg) rotateZ(-.7deg); }
  50% { transform: translate3d(0,-14px,0) rotateX(-1.5deg) rotateY(5deg) rotateZ(.85deg); }
}
@keyframes letter-canopy-shadow { from { transform: translate(-13px,0) rotate(-5deg); opacity: .07; } to { transform: translate(23px,12px) rotate(5deg); opacity: .15; } }
@keyframes letter-living-bough { from { transform: rotate(-4deg) translateY(-3px); } to { transform: rotate(4deg) translateY(8px); } }
@keyframes portrait-camera-presence { from { transform: scale(.96) translateY(5px) rotate(-.45deg); } to { transform: scale(1) translateY(-4px) rotate(.45deg); } }
@keyframes portrait-autumn-arrival {
  from { opacity: .15; transform: translate3d(0,34px,0) rotateY(-17deg) rotateZ(-2deg) scale(.89); }
  70% { opacity: 1; transform: translate3d(0,-3px,0) rotateY(2deg) rotateZ(.3deg) scale(1); }
  to { opacity: 1; transform: none; }
}
@keyframes portrait-bough-part-far { from { transform: translate(-25%,27%) rotate(6deg) scale(1.12); } to { transform: rotate(27deg); } }
@keyframes portrait-bough-part-near { from { transform: translate(34%,18%) scaleX(-1) rotate(-4deg); } to { transform: scaleX(-1) rotate(21deg); } }
@keyframes portrait-silk-unfurl { from { opacity: 0; transform: translate(-20%,15%) rotate(-12deg) scale(.78); } to { opacity: 1; transform: rotate(8deg); } }
@keyframes portrait-names-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes portrait-bough-wind { from { transform: rotate(-3.5deg) translateY(-4px); } to { transform: rotate(3.5deg) translateY(7px); } }
@keyframes portrait-sun-pass { 0% { opacity: 0; transform: translateX(-60%); } 38% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
@media(min-width:760px) {
  #invitation-page #invitation .letter-near-bough { width: 420px; left: -150px; top: -180px; }
  #invitation-page #family-letter .letter-silk { width: 210%; left: -55%; }
  #invitation-page #story .portrait-silk { bottom: -2%; }
}
@media(prefers-reduced-motion:reduce) {
  #invitation-page #invitation .roots-art>img,#invitation-page #family-letter .invitation-rest,
  #invitation-page #family-letter .letter-content::before,#invitation-page #story .story-portrait img { animation: none; transform: none; }
  #invitation-page #story.cinema-enhanced .portrait-reveal { opacity: 1; transform: none; }
  #invitation-page #story.cinema-enhanced :is(.portrait-silk,.canopy-names) { opacity: 1; }
  #invitation-page #story.cinema-enhanced .portrait-bough-far { transform: rotate(27deg); }
  #invitation-page #story.cinema-enhanced .portrait-bough-near { transform: scaleX(-1) rotate(21deg); }
}
.card-preview #invitation-page #family-letter .invitation-rest,
.card-preview #invitation-page #invitation .roots-art>img,
.card-preview #invitation-page #family-letter .letter-content::before,
.card-preview #invitation-page #story .story-portrait img { animation: none; transform: none; }