/* An arrival, the passing of time, a lantern grove, and one final candle.
   Only the photographic layers animate. Section geometry and live type stay still. */
#invitation-page .finale-scene {
  --finale-play: paused;
}
#invitation-page .finale-scene.finale-running { --finale-play: running; }
#invitation-page .finale-scene .finale-entrance { --finale-play: paused; }
#invitation-page .finale-scene .finale-entrance.finale-art-running { --finale-play: running; }

/* The path is first seen clearly; its wooden wayfinders sit in the shade below. */
#invitation-page #travel.finale-scene .travel-stilllife {
  height: min(740px, 115vw); min-height: 480px; inset: 0 0 auto;
}
#invitation-page #travel.finale-scene .travel-stilllife img {
  opacity: .93; filter: saturate(.79) brightness(.9); object-position: 56% 45%;
  transform-origin: 65% 46%;
  animation: finale-arrival-camera 12s ease-in-out infinite alternate;
  animation-play-state: var(--finale-play);
}
#invitation-page #travel.finale-scene .travel-stilllife::after {
  background: linear-gradient(#1c2d22 0%,transparent 14%,transparent 41%,rgb(28 45 34/.49) 65%,#223529 98%);
}
#invitation-page #travel .travel-stilllife.finale-armed:not(.finale-arriving) {
  opacity: .55; transform: translate3d(0,22px,0) scale(1.14);
}
#invitation-page #travel .travel-stilllife.finale-arriving {
  transform-origin: 59% 51%;
  animation: finale-path-arrive 3.6s cubic-bezier(.18,.65,.21,1) both;
  animation-play-state: var(--finale-play);
}
#invitation-page #travel.finale-scene .travel-content { padding-top: clamp(23rem,67vw,34rem); }
#invitation-page #travel.finale-scene .travel-content header {
  position: relative; text-shadow: 0 2px 18px rgb(7 20 11/.65);
}
#invitation-page #travel .arrival-lamplight {
  position: absolute; z-index: -1; top: 10%; left: 66%; width: 20%; height: 14%;
  pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse,rgb(236 172 75/.18),transparent 65%);
  mix-blend-mode: screen;
  animation: finale-door-light 7.4s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}
#invitation-page #travel.finale-scene .guest-note-toggle::before {
  transform-origin: 43% 50%;
  animation: finale-wayfinder 8.8s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}
#invitation-page #travel.finale-scene .guest-note:nth-child(even) .guest-note-toggle::before {
  animation-name: finale-wayfinder-reverse; animation-delay: -3.3s; transform-origin: 50% 50%;
}
#invitation-page #travel.finale-scene .guest-note:nth-child(even) .guest-note-toggle {
  padding-inline: clamp(3.5rem,7vw,5rem) 2.2rem;
}
#invitation-page #travel.finale-scene .guest-note:nth-child(3) .guest-note-toggle::before { animation-delay: -5.5s; }
#invitation-page #travel.finale-scene .guest-note-toggle:is(:hover,:focus-visible)::before { animation-play-state: paused; }

/* A photographed glass vessel gives the countdown a physical centre. */
#invitation-page #countdown.finale-scene { padding-top: 3.5rem; padding-bottom: 5.7rem; }
#invitation-page #countdown.has-living-hourglass>.gif-canopy { display: none; }
#invitation-page #countdown.finale-scene>h2 { grid-row: 1; margin-bottom: .2rem; }
#invitation-page #countdown.finale-scene>.gif-canopy { grid-row: 2; align-self: center; margin: 0; }
#invitation-page #countdown .autumn-hourglass {
  display: block; position: relative; grid-column: 1; grid-row: 2; width: min(54vw,210px);
  margin: .9rem auto .1rem; aspect-ratio: 3/4; pointer-events: none; z-index: 2; perspective: 850px;
}
#invitation-page #countdown .hourglass-glass { position: relative; width: 100%; height: 100%; visibility: hidden; transform-origin: 50% 93%; }
#invitation-page #countdown .hourglass-glass.asset-ready { visibility: visible; }
#invitation-page #countdown .hourglass-glass.finale-armed:not(.finale-arriving) {
  opacity: 0; transform: translate3d(0,34px,0) rotateY(-26deg) rotateZ(-14deg) scale(.9);
}
#invitation-page #countdown .hourglass-glass.finale-arriving {
  animation: finale-hourglass-settle 3.25s cubic-bezier(.16,.7,.23,1) both;
  animation-play-state: var(--finale-play);
}
#invitation-page #countdown .hourglass-portrait {
  position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(7px 14px 12px rgb(3 16 7/.4));
}
#invitation-page #countdown .hourglass-contact {
  position: absolute; bottom: 1%; left: 14%; width: 72%; height: 8%; z-index: -1;
  background: radial-gradient(ellipse,rgb(5 15 8/.68),transparent 67%); transform: scaleX(1.1);
}
#invitation-page #countdown.has-living-hourglass::before {
  background: radial-gradient(ellipse at 50% 36%,rgb(138 102 48/.18),transparent 50%);
}
#invitation-page #countdown.finale-scene .countdown-values { margin-top: .85rem; row-gap: 1.3rem; }
#invitation-page #countdown.finale-scene .countdown-values>div:first-child span { font-size: clamp(5.6rem,21vw,8rem); }

/* Real hanging lantern cutouts share the light and perspective of the grove. */
#invitation-page #rsvp.finale-scene .rsvp-art :is(img,.scene-film) {
  transform-origin: 50% 30%; animation: finale-grove-camera 16s ease-in-out infinite alternate;
  animation-play-state: var(--finale-play);
}
#invitation-page #rsvp.finale-scene .gif-grove-embers { opacity: .46; }
#invitation-page #rsvp .wish-lantern {
  position: absolute; z-index: 1; top: 9%; left: 12%; width: clamp(104px,29vw,178px);
  aspect-ratio: 2/3; pointer-events: none; opacity: 0; transform-origin: 50% -35%;
}
#invitation-page #rsvp .wish-lantern-swing {
  position: relative; width: 100%; height: 100%; transform-origin: 50% -35%;
  animation: finale-lantern-near 6.8s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}
#invitation-page #rsvp .wish-lantern.asset-ready { opacity: .97; }
#invitation-page #rsvp .wish-lantern.finale-armed:not(.finale-arriving) {
  opacity: 0; transform: translate3d(0,-108px,0) rotate(-6deg) scale(.94);
}
#invitation-page #rsvp .wish-lantern.finale-arriving {
  animation: finale-lantern-lower 3.6s cubic-bezier(.16,.72,.24,1) both;
  animation-play-state: var(--finale-play);
}
#invitation-page #rsvp .wish-lantern-far {
  top: 6%; left: auto; right: 9%; width: clamp(64px,18vw,108px);
  filter: brightness(.9);
}
#invitation-page #rsvp .wish-lantern-far.finale-arriving { animation-duration: 3.15s; animation-delay: .38s; }
#invitation-page #rsvp .wish-lantern-far .wish-lantern-swing {
  animation-name: finale-lantern-far; animation-duration: 5.9s; animation-delay: -2.1s;
}
#invitation-page #rsvp .wish-lantern-portrait {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(3px 9px 7px rgb(3 15 8/.28));
}
#invitation-page #rsvp .wish-lantern-cord {
  position: absolute; width: 1px; left: 50%; bottom: 92%; height: 210px;
  background: linear-gradient(transparent,#8c7249 30%,#524e31);
}
#invitation-page #rsvp .wish-lantern-light {
  position: absolute; left: -35%; top: 19%; width: 170%; height: 96%;
  background: radial-gradient(ellipse,rgb(239 164 58/.23),rgb(228 153 56/.05) 39%,transparent 67%);
  mix-blend-mode: screen; animation: finale-candle-breathe 4.7s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}

/* The last scene ends at candle height, with the real flame footage in focus. */
#invitation-page #closing.finale-scene { isolation: isolate; padding-top: 3rem; overflow: clip; }
#invitation-page #closing.finale-scene .gif-lantern {
  position: relative; z-index: 1; width: min(64vw,240px); margin: -2rem auto .8rem; opacity: 1;
  mask-image: radial-gradient(ellipse at 50% 46%,#000 28%,rgb(0 0 0/.9) 43%,transparent 73%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 46%,#000 28%,rgb(0 0 0/.9) 43%,transparent 73%);
}
#invitation-page #closing .gif-lantern.finale-armed:not(.finale-arriving) {
  opacity: .3; filter: blur(5px); transform: translate3d(0,20px,0) scale(.9);
}
#invitation-page #closing .gif-lantern.finale-arriving {
  transform-origin: 50% 67%;
  animation: finale-candle-focus 3.1s cubic-bezier(.22,.65,.22,1) both;
  animation-play-state: var(--finale-play);
}
#invitation-page #closing .closing-hearth {
  position: absolute; z-index: -1; inset: -5% 0 25%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%,rgb(181 119 49/.15),transparent 60%);
  animation: finale-candle-breathe 5.3s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}

@keyframes finale-path-arrive {
  0% { opacity: .55; transform: translate3d(0,22px,0) scale(1.14); }
  50% { opacity: .94; }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes finale-hourglass-settle {
  0% { opacity: 0; transform: translate3d(0,34px,0) rotateY(-26deg) rotateZ(-14deg) scale(.9); }
  24% { opacity: 1; }
  66% { transform: translate3d(0,-3px,0) rotateY(5deg) rotateZ(2.8deg) scale(1.012); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1); }
}
@keyframes finale-lantern-lower {
  0% { opacity: 0; transform: translate3d(0,-108px,0) rotate(-6deg) scale(.94); }
  28% { opacity: .97; }
  72% { transform: translate3d(0,5px,0) rotate(1.5deg) scale(1); }
  100% { opacity: .97; transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}
@keyframes finale-candle-focus {
  0% { opacity: .3; filter: blur(5px); transform: translate3d(0,20px,0) scale(.9); }
  45% { opacity: .87; filter: blur(1.2px); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0,0,0) scale(1); }
}
@keyframes finale-arrival-camera { from { transform: scale(1.03) translate3d(-.7%,.4%,0); } to { transform: scale(1.14) translate3d(1.2%,-1.6%,0); } }
@keyframes finale-door-light { 0%,100% { opacity: .45; } 35% { opacity: .83; } 57% { opacity: .63; } 72% { opacity: .91; } }
@keyframes finale-wayfinder { 0%,100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.5deg); } }
@keyframes finale-wayfinder-reverse { 0%,100% { transform: scaleX(-1) rotate(-1.35deg); } 50% { transform: scaleX(-1) rotate(1.1deg); } }
@keyframes finale-grove-camera { from { transform: scale(1.035) translate3d(-.6%,0,0); } to { transform: scale(1.13) translate3d(.9%,-.8%,0); } }
@keyframes finale-lantern-near { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(4.7deg); } }
@keyframes finale-lantern-far { 0%,100% { transform: rotate(4.7deg); } 50% { transform: rotate(-4.3deg); } }
@keyframes finale-candle-breathe { 0%,100% { opacity: .62; } 29% { opacity: .9; } 46% { opacity: .71; } 63% { opacity: 1; } 79% { opacity: .76; } }

@media(min-width:760px) {
  #invitation-page #travel.finale-scene .travel-stilllife { height: 870px; }
  #invitation-page #travel.finale-scene .travel-stilllife img { object-position: 50% 51%; }
  #invitation-page #travel.finale-scene .travel-content { padding-top: 36rem; }
  #invitation-page #countdown .autumn-hourglass { width: 245px; margin-block: 1.3rem .6rem; }
  #invitation-page #rsvp .wish-lantern-near { left: 18%; top: 10%; }
  #invitation-page #rsvp .wish-lantern-far { right: 18%; top: 12%; }
}
@media(prefers-reduced-motion:reduce) {
  #invitation-page .finale-scene *,#invitation-page .finale-scene *::before { animation: none!important; }
  #invitation-page .finale-scene .finale-entrance { transform: none!important; filter: none!important; }
}