/* Returning to the forest: recognition, connection, then a readable hold.
   Each reveal is driven by the existing actual-artwork observer. */
#invitation-page #invitation .grove-intro h2 { font-size: clamp(2.65rem,10vw,4.7rem); }
#invitation-page #invitation .grove-intro { padding-bottom: 3.2rem; }
#invitation-page #family-grove .parent-line { font-size: .81rem; line-height: 1.8; color: #eee0c4; }
#invitation-page #family-grove .grove-invite { color: #eadfc9; }
#invitation-page #invitation .grove-landscape img { animation-name: tender-clearing-breath; animation-duration: 24s; }
#invitation-page #invitation .grove-sunlight { opacity: .24; animation: none; }
#invitation-page #invitation.cinema-ready .grove-sunlight {
  animation: tender-clearing-warms 3.2s ease both; animation-play-state: var(--grove-play);
}

/* The branch tips share one light. Its arrival follows their meeting, not an
   unrelated repeating flare. The blessing is readable before the gesture. */
#invitation-page #family-grove .grove-joining { isolation: isolate; }
#invitation-page #family-grove .grove-joining::after {
  content: ''; position: absolute; z-index: 0; left: 27%; top: 2%; width: 46%; height: 97%;
  background: radial-gradient(ellipse,rgb(247 210 140/.23),rgb(219 175 98/.065) 42%,transparent 71%);
  pointer-events: none; opacity: .3; transform: scale(.8);
}
#invitation-page #invitation.cinema-enhanced:not(.cinema-ready) #family-grove .grove-blessing { opacity: 1!important; }
#invitation-page #invitation.cinema-enhanced:not(.cinema-ready) #family-grove .grove-joining::after { opacity: 0; }
#invitation-page #invitation.cinema-ready #family-grove .grove-blessing { animation: none; opacity: 1; }
#invitation-page #invitation.cinema-enhanced:not(.cinema-ready) .grove-bough-left { opacity: .3; transform: translate3d(-18%,10px,0) rotate(-8deg); }
#invitation-page #invitation.cinema-enhanced:not(.cinema-ready) .grove-bough-right { opacity: .3; transform: translate3d(18%,5px,0) scaleX(-1) rotate(9deg); }
#invitation-page #invitation.cinema-ready .grove-bough-left { animation: tender-family-left 2.05s .1s cubic-bezier(.2,.62,.22,1) both; }
#invitation-page #invitation.cinema-ready .grove-bough-right { animation: tender-family-right 2.05s .28s cubic-bezier(.2,.62,.22,1) both; }
#invitation-page #invitation.cinema-ready .grove-person-bride h3 { animation: tender-family-name 1.55s .3s ease both; }
#invitation-page #invitation.cinema-ready .grove-person-bride .parent-line { animation: tender-family-name 1.55s .5s ease both; }
#invitation-page #invitation.cinema-ready .grove-person-groom h3 { animation: tender-family-name 1.55s .48s ease both; }
#invitation-page #invitation.cinema-ready .grove-person-groom .parent-line { animation: tender-family-name 1.55s .68s ease both; }
#invitation-page #invitation.cinema-ready .grove-and { animation: tender-family-name 1.1s 1.4s ease both; }
#invitation-page #invitation.cinema-ready .grove-promise { animation: tender-family-name 1.3s 1.85s ease both; }
#invitation-page #invitation.cinema-ready #family-grove .grove-joining::after { animation: tender-family-contact 2.3s 1.1s ease both; animation-play-state: var(--grove-play); }
#invitation-page #invitation.cinema-ready #family-grove :is(.grove-bough,.grove-person h3,.parent-line,.grove-and,.grove-promise) { animation-play-state: var(--grove-play); }
@keyframes tender-family-left {
  0% { opacity: .3; transform: translate3d(-18%,10px,0) rotate(-8deg); }
  38% { opacity: 1; }
  80% { transform: translate3d(1%,-1px,0) rotate(4.5deg); }
  100% { opacity: 1; transform: rotate(4deg); }
}
@keyframes tender-family-right {
  0% { opacity: .3; transform: translate3d(18%,5px,0) scaleX(-1) rotate(9deg); }
  38% { opacity: 1; }
  80% { transform: translate3d(-1%,1px,0) scaleX(-1) rotate(-5.5deg); }
  100% { opacity: 1; transform: scaleX(-1) rotate(-5deg); }
}
@keyframes tender-family-name { from { opacity: 0; transform: translateY(5px); filter: none; } to { opacity: 1; transform: none; filter: none; } }
@keyframes tender-family-contact { 0% { opacity: 0; transform: scale(.7); } 52% { opacity: .92; transform: scale(1); } 100% { opacity: .5; transform: scale(.94); } }
@keyframes tender-clearing-warms { 0% { opacity: .16; } 70% { opacity: .48; } 100% { opacity: .35; } }
@keyframes tender-clearing-breath { from { transform: scale(1.02); } to { transform: scale(1.065) translateY(-.35%); } }

/* A photograph encountered through the canopy. Only foreground and light
   change depth; an arbitrary uploaded photograph remains whole and still. */
#invitation-page #story .portrait-keepsake { transform: none; perspective: none; transition: none; }
#invitation-page #story .portrait-reveal { transform: none; }
#invitation-page #story .story-portrait img { animation: none!important; transform: none!important; object-fit: contain; }
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-reveal { opacity: .58; transform: none; }
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-bough-far { transform: translate(-13%,13%) rotate(14deg); }
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-bough-near { transform: translate(19%,4%) scaleX(-1) rotate(10deg); }
#invitation-page #story .portrait-bough-far { opacity: .6; }
#invitation-page #story .portrait-bough-near { width: 51%; left: -31%; filter: drop-shadow(0 5px 8px rgb(0 10 3/.17)); }
#invitation-page #story .portrait-silk { width: 124%; left: -12%; bottom: -1%; }
#invitation-page #story.cinema-ready .portrait-reveal { animation: tender-portrait-recognition 2.5s ease both paused; }
#invitation-page #story.cinema-ready .portrait-bough-far { animation: tender-canopy-far 2.9s cubic-bezier(.25,.6,.2,1) both paused; }
#invitation-page #story.cinema-ready .portrait-bough-near { animation: tender-canopy-near 2.65s .12s cubic-bezier(.25,.6,.2,1) both paused; }
#invitation-page #story.cinema-ready .portrait-silk { animation: tender-silk-settles 2.4s .85s ease both paused; }
#invitation-page #story.cinema-ready .canopy-names { animation: tender-couple-names 1.65s 1.05s ease both paused; }
#invitation-page #story .portrait-reveal::after {
  background: linear-gradient(118deg,transparent 29%,rgb(255 226 173/.15) 48%,transparent 68%);
}
#invitation-page #story.cinema-ready .portrait-reveal::after { animation: tender-recognition-light 3s .2s ease both paused; }
#invitation-page #story.cinema-running :is(.portrait-reveal,.portrait-bough-far,.portrait-bough-near,.portrait-silk,.canopy-names),
#invitation-page #story.cinema-running .portrait-reveal::after { animation-play-state: running; }
#invitation-page #story .portrait-bough img { animation-duration: 10s; }
#invitation-page #story .portrait-bough-near img { animation-duration: 11.4s; }
@keyframes tender-portrait-recognition { from { opacity: .58; } 70% { opacity: 1; } to { opacity: 1; } }
@keyframes tender-canopy-far { from { transform: translate(-13%,13%) rotate(14deg); } to { transform: rotate(27deg); } }
@keyframes tender-canopy-near { from { transform: translate(19%,4%) scaleX(-1) rotate(10deg); } to { transform: scaleX(-1) rotate(21deg); } }
@keyframes tender-silk-settles { from { opacity: 0; transform: translate3d(-4%,7px,0) rotate(2deg); } to { opacity: 1; transform: rotate(8deg); } }
@keyframes tender-couple-names { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes tender-recognition-light { 0% { opacity: 0; transform: translateX(-30%); } 38% { opacity: .8; } 100% { opacity: 0; transform: translateX(35%); } }
@media(min-width:760px) {
  #invitation-page #family-grove .parent-line { font-size: .89rem; }
}
@media(prefers-reduced-motion:reduce) {
  #invitation-page #invitation.grove-invitation .grove-joining::after { animation: none!important; opacity: .4!important; transform: none!important; }
  #invitation-page #story.cinema-enhanced .portrait-reveal { opacity: 1!important; animation: none!important; transform: none!important; }
  #invitation-page #story.cinema-enhanced :is(.portrait-silk,.canopy-names) { opacity: 1!important; animation: none!important; }
  #invitation-page #story.cinema-enhanced .portrait-bough-far { transform: rotate(27deg)!important; }
  #invitation-page #story.cinema-enhanced .portrait-bough-near { transform: scaleX(-1) rotate(21deg)!important; }
  #invitation-page #story .portrait-reveal::after { animation: none!important; opacity: 0!important; }
}