/* Patjhad / the journey home, v32.
   Photography carries the scene. Guest content always stays on a steady plane.
   Forest #25372d · parchment #efe5cb · candle #b68c51 · ink #394333.
   Existing Finale lifecycle pauses every living layer outside the viewport. */

#invitation-page :is(#travel,#countdown,#rsvp,#closing) {
  --finale-forest: #25372d;
  --finale-paper: #efe5cb;
  --finale-honey: #b68c51;
  --finale-ink: #394333;
}

/* Arrival is an approach to a real estate, with its information collected in
   one quiet folio below. No bobbing wayfinder signs or disconnected cards. */
#invitation-page #travel.finale-scene {
  background: var(--finale-forest);
  padding: 0;
  overflow: clip;
}
#invitation-page #travel.finale-scene .travel-stilllife {
  position: absolute;
  inset: 0 0 auto;
  height: clamp(610px,88svh,910px);
  min-height: 0;
  margin: 0;
  z-index: 0;
  opacity: 1;
  transform: none;
}
#invitation-page #travel.finale-scene .travel-stilllife img,
#invitation-page #travel.finale-scene .travel-stilllife.finale-arriving img {
  display: block;
  width: 100%; height: 100%;
  opacity: 1;
  object-fit: cover;
  object-position: 60% 45%;
  filter: saturate(.78) brightness(.9);
  transform-origin: 69% 41%;
  animation: cinema32-estate-breeze 26s ease-in-out infinite alternate;
  animation-play-state: var(--finale-play);
}
#invitation-page #travel.finale-scene .travel-stilllife::after {
  inset: 0;
  background: linear-gradient(180deg,rgb(37 55 45/.2),transparent 20%,rgb(37 55 45/.04) 45%,rgb(37 55 45/.63) 69%,#25372d 100%);
}
#invitation-page #travel.finale-scene .travel-stilllife.finale-armed:not(.finale-arriving) {
  opacity: 1; transform: none;
}
#invitation-page #travel.finale-scene .travel-stilllife.finale-arriving {
  animation: finale-path-arrive 3.6s ease-out both;
  animation-play-state: var(--finale-play);
}
#invitation-page #travel.finale-scene .travel-stilllife.finale-armed:not(.finale-arriving) img {
  transform: scale(1.035);
}
#invitation-page #travel.finale-scene .travel-content {
  position: relative; z-index: 2;
  max-width: 1020px;
  margin: 0 auto;
  padding: clamp(360px,53svh,565px) 25px 4.8rem;
}
#invitation-page #travel.finale-scene .travel-content header {
  max-width: 38rem; margin: 0 auto;
  text-align: center;
  text-shadow: 0 2px 22px rgb(17 27 21/.3);
}
#invitation-page #travel.finale-scene .chapter-note { display: none; }
#invitation-page #travel.finale-scene .travel-content h2 {
  color: #fff2d8;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.65rem,9.2vw,4.45rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
#invitation-page #travel.finale-scene .travel-content header>p[data-bind='travel.intro'] {
  margin: 1.2rem auto .9rem;
  max-width: 29rem;
  font-size: .91rem; line-height: 1.9;
  color: #eee4ce;
}
#invitation-page #travel.finale-scene .travel-address {
  color: #dfc8a0; font-size: .84rem; line-height: 1.9;
}
#invitation-page #travel.finale-scene .text-link {
  min-height: 48px; padding: .7rem .2rem;
  color: #f4dfb8; font-size: .85rem;
  text-decoration-thickness: 1px; text-underline-offset: 5px;
}
#invitation-page #travel.finale-scene #guest-guide {
  display: block;
  max-width: 720px;
  margin: 2.6rem auto 0;
  padding: .55rem clamp(1.25rem,5vw,2.7rem);
  background: var(--finale-paper);
  color: var(--finale-ink);
  border-radius: 2px;
  box-shadow: 0 15px 40px rgb(13 25 17/.14);
}
#invitation-page #travel.finale-scene .guest-note,
#invitation-page #travel.finale-scene .guest-note:nth-child(even) {
  display: block;
  width: 100%; max-width: none;
  margin: 0; padding: 0;
  border: 0;
  border-bottom: 1px solid rgb(114 99 69/.23);
}
#invitation-page #travel.finale-scene .guest-note:last-child { border-bottom: 0; padding: 0; }
#invitation-page #travel.finale-scene :is(.guest-note-number,.guest-illustration) { display: none; }
#invitation-page #travel.finale-scene .guest-note-copy h3 {
  margin: 0; color: var(--finale-ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem,5.3vw,1.95rem);
  line-height: 1.25;
}
#invitation-page #travel.finale-scene .guest-note-toggle,
#invitation-page #travel.finale-scene .guest-note:nth-child(even) .guest-note-toggle {
  min-height: 80px;
  padding: 1.2rem 0;
  text-shadow: none;
  color: var(--finale-ink);
  background: none;
  border: 0;
  transition: color .2s ease;
}
#invitation-page #travel.finale-scene .guest-note-toggle::before { content: none; animation: none; }
#invitation-page #travel.finale-scene .guest-note-toggle::after { color: #857049; font-size: 1.25rem; }
#invitation-page #travel.finale-scene .guest-note-toggle:hover { color: #8a643a; }
#invitation-page #travel.finale-scene .guest-note-toggle:focus-visible { outline: 2px solid #8a643a; outline-offset: 4px; }
#invitation-page #travel.finale-scene .guest-note-panel { padding: 0 1rem 1.6rem 0; }
#invitation-page #travel.finale-scene .guest-note-panel p {
  color: #59614e;
  font-size: .87rem; line-height: 1.95;
  max-width: 38rem;
}
#invitation-page #travel.finale-scene .arrival-lamplight {
  z-index: 1;
  top: clamp(160px,24svh,255px);
  left: 63%; width: 23%; height: 130px;
  opacity: .55;
  background: radial-gradient(ellipse,rgb(238 177 96/.16),transparent 66%);
  animation: cinema32-candle-warmth 7.6s ease-in-out infinite;
  animation-play-state: var(--finale-play);
}

/* Time has a physical scale: a small glass vessel beside the live countdown.
   Real rendered sand continues gently; the numbers never rotate or breathe. */
#invitation-page #countdown.finale-scene {
  display: grid;
  grid-template-columns: minmax(92px,150px) minmax(0,210px);
  justify-content: center; align-items: center; justify-items: center;
  column-gap: clamp(.4rem,3vw,1.7rem);
  padding: 1.4rem 25px 4.8rem;
  background: var(--finale-forest);
  color: #efe5cb;
}
#invitation-page #countdown.finale-scene::before {
  inset: 3rem 0 5rem;
  background: radial-gradient(ellipse at 35% 52%,rgb(188 150 83/.065),transparent 58%);
}
#invitation-page #countdown.finale-scene>.gif-canopy { display: none; }
#invitation-page #countdown.finale-scene>h2 {
  grid-column: 1/-1; grid-row: 1;
  margin: 0 0 2rem;
  font-size: clamp(2.5rem,8.8vw,4.15rem);
  line-height: 1.1; letter-spacing: -.025em;
  color: #f3e7cc;
}
#invitation-page #countdown.finale-scene .autumn-hourglass {
  grid-column: 1; grid-row: 2;
  width: 100%; max-width: 165px;
  margin: 0;
  aspect-ratio: 3/4;
}
#invitation-page #countdown.finale-scene .hourglass-portrait {
  filter: saturate(.8) drop-shadow(4px 9px 8px rgb(6 21 11/.32));
}
#invitation-page #countdown.finale-scene .hourglass-glass.finale-armed:not(.finale-arriving) {
  opacity: .35; transform: none;
}
#invitation-page #countdown.finale-scene .hourglass-glass.finale-arriving {
  animation: finale-hourglass-settle 2.6s ease-out both;
  animation-play-state: var(--finale-play);
}
#invitation-page #countdown.finale-scene .countdown-values {
  grid-column: 2; grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1.4rem .55rem;
  width: 100%; max-width: 230px;
  margin: 0;
}
#invitation-page #countdown.finale-scene .countdown-values>div:first-child {
  grid-column: 1/-1;
  flex-direction: column; align-items: center;
  gap: .45rem;
}
#invitation-page #countdown.finale-scene .countdown-values>div:first-child span {
  font-size: clamp(4.15rem,17vw,6.6rem);
  line-height: .9;
  color: #ecd7ac;
  text-shadow: none;
}
#invitation-page #countdown.finale-scene .countdown-values span {
  color: #e9d7b8;
  font-size: clamp(1.65rem,6.2vw,2.3rem);
  letter-spacing: -.045em;
}
#invitation-page #countdown.finale-scene .countdown-values small,
#invitation-page #countdown.finale-scene .countdown-values>div:first-child small {
  font-family: var(--font-body);
  font-size: .64rem; font-style: normal;
  letter-spacing: 0;
  color: #cab99a;
}
#invitation-page #countdown.finale-scene .countdown-values>div:first-child small { font-size: .78rem; font-style: italic; }
#invitation-page #countdown.finale-scene>p {
  grid-column: 1/-1; grid-row: 3;
  margin-top: 1.6rem;
  color: #e2d1ad; font-size: .92rem;
}
#invitation-page #countdown.finale-scene .calendar-actions {
  grid-column: 1/-1; grid-row: 4;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .2rem 1.35rem;
  margin-top: .45rem;
  font-size: .73rem;
}
#invitation-page #countdown.finale-scene .calendar-actions a { min-height: 48px; color: #d9c199; }

/* One evening film invites the guest to take their place. Its moving candlelight
   remains the motion source, without another camera transform on top of it. */
#invitation-page #rsvp.finale-scene {
  min-height: max(750px,100svh);
  align-items: flex-end;
  background: #202d25;
}
#invitation-page #rsvp.finale-scene .rsvp-art {
  inset: 0;
  filter: saturate(.78) brightness(.95);
}
#invitation-page #rsvp.finale-scene .rsvp-art :is(img,.scene-film),
#invitation-page #rsvp.finale-scene:has(.wish-lantern-near.finale-arriving) .rsvp-art :is(img,.scene-film) {
  object-position: center 46%;
  transform: none;
  animation: none;
}
#invitation-page #rsvp.finale-scene .rsvp-art::after { content: none; }
#invitation-page #rsvp.finale-scene::after {
  background: linear-gradient(#25372d 0%,rgb(37 55 45/.2) 11%,transparent 27%,rgb(27 40 30/.23) 45%,rgb(27 40 30/.84) 74%,#1b281e 100%);
}
#invitation-page #rsvp.finale-scene :is(.wish-lantern,.gif-grove-embers,.wish-branch) { display: none; }
#invitation-page #rsvp.finale-scene .rsvp-copy {
  width: 100%; max-width: 680px;
  padding: 27rem 27px 5rem;
  text-shadow: 0 2px 18px rgb(15 24 18/.35);
}
#invitation-page #rsvp.finale-scene .rsvp-copy>.chapter-note { display: none; }
#invitation-page #rsvp.finale-scene .rsvp-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem,9.8vw,4.5rem);
  line-height: 1.1; letter-spacing: -.025em;
  color: #fff0d5; text-wrap: balance;
}
#invitation-page #rsvp.finale-scene .rsvp-copy>p[data-bind] {
  max-width: 29rem;
  margin: 1.4rem auto 1.8rem;
  font-size: .91rem; line-height: 1.95;
  color: #e7d9bd;
}
#invitation-page #rsvp.finale-scene .rsvp-copy .button {
  min-height: 54px;
  padding: .9rem 2rem;
  border-radius: 2px;
  border: 1px solid #d4bb8f;
  background: #e8d7b4;
  color: #27372d;
  box-shadow: 0 6px 22px rgb(13 24 16/.16);
  text-shadow: none;
  font-size: .9rem;
  transform: none;
  transition: background .25s ease;
}
#invitation-page #rsvp.finale-scene .rsvp-copy .button:hover { background: #f1e3c6; transform: none; }
#invitation-page #rsvp.finale-scene .rsvp-copy .button:focus-visible { outline: 2px solid #f7e5c1; outline-offset: 5px; }
#invitation-page #rsvp.finale-scene .rsvp-copy #rsvp-note { color: #d6c3a3; font-size: .76rem; }

/* The closing rests at candle height; the actual flame clip carries the final
   movement while the editable couple's signature stays beautifully readable. */
#invitation-page #closing.finale-scene {
  padding: .6rem 25px 6.4rem;
  background: #1b281e;
  color: #e9d6b5;
}
#invitation-page #closing.finale-scene .gif-lantern {
  width: min(56vw,210px);
  margin: -1.6rem auto .25rem;
  opacity: .88;
}
#invitation-page #closing.finale-scene>p[data-bind] {
  max-width: 29rem; margin-inline: auto;
  color: #d3c3a7;
  font-size: .85rem; line-height: 1.9;
}
#invitation-page #closing.finale-scene .closing-names {
  color: #efe1c5;
  font-family: 'Pinyon Script',var(--font-display);
  font-size: clamp(2.9rem,10vw,4.5rem);
  font-weight: 400; line-height: 1.24; letter-spacing: 0;
  margin: 1.35rem auto .8rem;
  gap: .4rem .9rem;
  overflow-wrap: anywhere;
}
#invitation-page #closing.finale-scene .closing-names em { color: #ba955e; font-size: .65em; }
#invitation-page #closing.finale-scene .closing-hashtag { font-size: .75rem; color: #bea981; }
#invitation-page #closing.finale-scene>button {
  min-height: 48px;
  margin-top: 1.8rem;
  padding: .5rem .1rem;
  color: #dcc399;
  font-size: .78rem;
  border-bottom-color: rgb(220 195 153/.35);
}

/* Entrance names are retained for Finale's one-shot lifecycle completion. */
@keyframes finale-path-arrive {
  from { opacity: .68; transform: none; }
  to { opacity: 1; transform: none; }
}
@keyframes finale-hourglass-settle {
  from { opacity: .35; transform: none; }
  to { opacity: 1; transform: none; }
}
@keyframes cinema32-estate-breeze {
  from { transform: scale(1.025) translate3d(-.25%,.2%,0); }
  to { transform: scale(1.065) translate3d(.35%,-.35%,0); }
}
@keyframes cinema32-candle-warmth {
  0%,100% { opacity: .48; }
  28% { opacity: .61; }
  47% { opacity: .52; }
  73% { opacity: .66; }
}

@media(min-width:760px) {
  #invitation-page #travel.finale-scene .travel-stilllife { height: 940px; }
  #invitation-page #travel.finale-scene .travel-stilllife img { object-position: 50% 44%; }
  #invitation-page #travel.finale-scene .travel-content { padding: 38rem 40px 5.5rem; }
  #invitation-page #travel.finale-scene #guest-guide { margin-top: 3rem; }
  #invitation-page #travel.finale-scene .travel-content header>p[data-bind='travel.intro'] { font-size: 1rem; }
  #invitation-page #travel.finale-scene .guest-note-panel p { font-size: .92rem; }
  #invitation-page #travel.finale-scene .arrival-lamplight { top: 16rem; left: 65%; width: 15%; }
  #invitation-page #countdown.finale-scene { grid-template-columns: 185px 255px; column-gap: 2.6rem; padding-block: 1.7rem 6rem; }
  #invitation-page #countdown.finale-scene .autumn-hourglass { max-width: 185px; }
  #invitation-page #countdown.finale-scene .countdown-values { max-width: 250px; }
  #invitation-page #countdown.finale-scene .countdown-values small { font-size: .72rem; }
  #invitation-page #rsvp.finale-scene { min-height: 950px; }
  #invitation-page #rsvp.finale-scene .rsvp-art :is(img,.scene-film) { object-position: center 53%; }
  #invitation-page #rsvp.finale-scene .rsvp-copy { padding: 31rem 40px 6rem; }
  #invitation-page #closing.finale-scene { padding-bottom: 7rem; }
}
@media(max-width:359px) {
  #invitation-page #travel.finale-scene .travel-content { padding-inline: 20px; }
  #invitation-page #travel.finale-scene #guest-guide { padding-inline: 1.15rem; }
  #invitation-page #countdown.finale-scene { padding-inline: 19px; grid-template-columns: 104px minmax(0,1fr); gap: 0 .4rem; }
  #invitation-page #countdown.finale-scene .countdown-values { column-gap: .3rem; }
  #invitation-page #countdown.finale-scene .countdown-values small { font-size: .6rem; }
  #invitation-page #rsvp.finale-scene .rsvp-copy { padding-inline: 22px; }
}
@media(prefers-reduced-motion:reduce) {
  #invitation-page :is(#travel,#countdown,#rsvp,#closing) *,
  #invitation-page :is(#travel,#countdown,#rsvp,#closing) *::before,
  #invitation-page :is(#travel,#countdown,#rsvp,#closing) *::after { animation: none!important; }
  #invitation-page #travel.finale-scene .travel-stilllife,
  #invitation-page #countdown.finale-scene .hourglass-glass { opacity: 1!important; transform: none!important; }
}