/* Patjhad v51: two leaves, one story; then a small garden picture theatre.
   The guest's photographs stay intact. Only independent botanical artwork
   and the optical lantern light move; body.js owns all visibility clocks. */

#invitation-page :is(#story,#gallery) {
  --middle-play: paused;
  --middle-forest: #233c2d;
  --middle-sage: #dbe0ca;
  --middle-copper: #8f6739;
  --middle-gold: #d4b879;
}
#invitation-page :is(#story,#gallery).cinema-running { --middle-play: running; }

/* A quiet clearing. The join in the silk belongs below the portrait, so
   nothing assumes that an uploaded photograph contains water or scenery. */
#invitation-page #story.canopy-story {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 0;
  overflow: clip;
  padding: 10rem max(28px,7vw) 3.75rem;
  background: #dbe0ca;
  color: #2c4331;
}
#invitation-page #story.canopy-story::before {
  background: linear-gradient(#22362b 0, #738574 76px, #c4cfb7 125px, transparent 190px),
    radial-gradient(ellipse at 18% 39%,#eee6cf99,transparent 52%),
    linear-gradient(110deg,transparent 47%,#8b9d7630);
}
#invitation-page #story.canopy-story::after {
  inset: 12% -12% 1% -15%;
  background: url('assets/bough-still-v23.webp') 101% 69%/min(85%,620px) auto no-repeat;
  opacity: .065;
  filter: blur(8px) saturate(.35);
  transform: rotate(-16deg);
}
#invitation-page #story .portrait-keepsake {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  transform: none;
  perspective: none;
  transition: none;
}
#invitation-page #story .portrait-reveal {
  position: relative;
  z-index: 2;
  transform: none;
  opacity: 1;
  padding: 0;
}
#invitation-page #story .portrait-reveal::before {
  content: '';
  position: absolute;
  inset: 9% -12% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse,#ead8ad5c,transparent 66%);
  pointer-events: none;
}
#invitation-page #story .story-portrait {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  border: 0;
}
#invitation-page #story .story-portrait img {
  width: 100%;
  height: auto;
  max-height: clamp(290px,104vw,510px);
  aspect-ratio: auto 2 / 3;
  object-fit: contain;
  object-position: center;
  border-radius: 2px;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 17px 15px rgb(32 54 33/.17));
  animation: none!important;
  transform: none!important;
}
#invitation-page #story .portrait-bough {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 3;
}
#invitation-page #story .portrait-bough-far {
  width: 57%;
  right: -34%;
  top: -10%;
  transform: rotate(23deg);
  opacity: .8;
  filter: saturate(.66) drop-shadow(0 8px 7px rgb(41 58 28/.14));
}
#invitation-page #story .portrait-bough-near {
  width: 48%;
  left: -32%;
  top: 29%;
  transform: scaleX(-1) rotate(26deg);
  opacity: .95;
  filter: saturate(.69) drop-shadow(0 8px 6px rgb(41 58 28/.19));
}
#invitation-page #story .portrait-bough img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 67% 18%;
  animation: middle-leaf-breeze 7.4s ease-in-out infinite alternate;
  animation-play-state: var(--middle-play);
}
#invitation-page #story .portrait-bough-near img { animation-duration: 8.8s; animation-delay: -3.4s; }
#invitation-page #story .portrait-vow {
  position: relative;
  z-index: 5;
  width: 93%;
  height: clamp(100px,32vw,135px);
  margin: -28px auto -13px;
  pointer-events: none;
  transform-origin: 50% 36%;
}
#invitation-page #story .portrait-vow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(.82) drop-shadow(0 7px 4px rgb(53 56 31/.15));
  animation: middle-vow-breathe 6.5s ease-in-out infinite alternate;
  animation-play-state: var(--middle-play);
}
#invitation-page #story .canopy-names {
  position: relative;
  z-index: 6;
  gap: .05em .27em;
  padding: 0;
  margin: 0;
  font-family: 'Pinyon Script',cursive;
  font-size: clamp(2.8rem,11.7vw,4.2rem);
  font-style: normal;
  line-height: 1.26;
  color: #2c4331;
  text-shadow: 0 1px rgb(255 248 220/.5);
}
#invitation-page #story .canopy-names em {
  font-family: 'Cormorant Garamond',serif;
  font-size: .51em;
  font-weight: 500;
  color: #87653b;
}
#invitation-page #story .story-copy {
  width: 100%;
  max-width: 470px;
  padding: 2.7rem 0 0;
  margin: 0 auto;
  text-align: center;
  transform: none!important;
}
#invitation-page #story .story-copy h2 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: clamp(2.6rem,10.4vw,4.45rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #2c4331;
  margin: 0 auto 1.4rem;
  text-wrap: balance;
}
#invitation-page #story .story-copy>p[data-bind] {
  color: #44553e;
  font-size: .89rem;
  line-height: 1.94;
  max-width: 42ch;
  margin-inline: auto;
  text-wrap: pretty;
}
#invitation-page #story .story-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem 1.3rem;
  margin-top: 1.7rem;
  color: #79603d;
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
}
#invitation-page #story .story-tags>span { position: relative; padding-left: 17px; }
#invitation-page #story .story-tags>span::before {
  content: '';
  position: absolute;
  left: 0;
  top: .29em;
  width: 12px;
  height: 14px;
  background: url('assets/entry-maple-russet-v3.webp') center/contain no-repeat;
  opacity: .65;
}
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-reveal { opacity: .76; transform: none; }
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-bough-far { transform: translate(-18%,9%) rotate(10deg); }
#invitation-page #story.cinema-enhanced:not(.cinema-ready) .portrait-bough-near { transform: translate(22%,-4%) scaleX(-1) rotate(11deg); }
#invitation-page #story.cinema-enhanced:not(.cinema-ready) :is(.portrait-vow,.canopy-names) { opacity: 0; }
#invitation-page #story.cinema-ready .portrait-reveal { animation: middle-photo-arrives 2.3s ease both; animation-play-state: var(--middle-play); }
#invitation-page #story.cinema-ready .portrait-bough-far { animation: middle-bough-parts-right 3.4s cubic-bezier(.23,.67,.25,1) both; animation-play-state: var(--middle-play); }
#invitation-page #story.cinema-ready .portrait-bough-near { animation: middle-bough-parts-left 3.7s .08s cubic-bezier(.23,.67,.25,1) both; animation-play-state: var(--middle-play); }
#invitation-page #story.cinema-ready .portrait-vow { animation: middle-vow-settles 2.1s .6s ease both; animation-play-state: var(--middle-play); }
#invitation-page #story.cinema-ready .canopy-names { animation: middle-names-arrive 1.8s 1s ease both; animation-play-state: var(--middle-play); }
#invitation-page #story .portrait-reveal::after { display: none; }

/* A missing upload is still a complete story: the joined leaves sit above
   the live names, without a zero-height photo observer holding them back. */
#invitation-page #story:has(.story-portrait[hidden]) :is(.portrait-reveal,.portrait-bough) { display: none; }
#invitation-page #story:has(.story-portrait[hidden]) :is(.portrait-vow,.canopy-names) {
  opacity: 1;
  animation: none;
  transform: none;
}
#invitation-page #story:has(.story-portrait[hidden]) .portrait-vow {
  width: min(100%,250px);
  height: 145px;
  margin: 0 auto -.3rem;
}

/* The carved screen is one fixed physical object. The original rail slides
   behind its transparent aperture, with captions and controls below it. */
#invitation-page #gallery.projection-section {
  --memory-stage-width: min(90vw,480px);
  --memory-stage-height: calc(var(--memory-stage-width)*1.25);
  --tender-photo-height: var(--memory-stage-height);
  padding: 0 0 5rem;
  background: #233c2d;
  color: #f1e6ca;
}
#invitation-page #gallery.projection-section::before {
  background: linear-gradient(#dbe0ca 0,#829079 50px,#233c2d 120px,transparent 220px),
    radial-gradient(ellipse at 55% 57%,#8b87562b,transparent 57%);
}
#invitation-page #gallery.projection-section::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 160px 0 0;
  opacity: .055;
  background: url('assets/autumn-clearing-mobile-v32.webp') center/cover;
  pointer-events: none;
}
#invitation-page #gallery>.section-intro {
  max-width: 700px;
  padding: 8.5rem 1.4rem 2.1rem;
  margin: 0 auto;
}
#invitation-page #gallery h2 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: clamp(3rem,11.5vw,5rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.035em;
  color: #f1e6ca;
}
#invitation-page #gallery .section-intro>p {
  color: #c5c5a6;
  font-size: .86rem;
  line-height: 1.7;
  margin: .9rem auto 0;
}
#invitation-page #gallery .memory-projection {
  --projector-width: clamp(150px,43vw,210px);
  --projector-left: -1%;
  --projector-bottom: 0;
  position: relative;
  width: var(--memory-stage-width);
  max-width: none;
  margin: 0 auto;
  padding: 0 0 145px;
  isolation: isolate;
}
#invitation-page #gallery #gallery-list {
  --memory-inset: 0px;
  --memory-gap: 0px;
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  gap: 0;
  padding: 0;
  scroll-padding: 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: auto;
  overflow-y: hidden;
}
#invitation-page #gallery .memory,
#invitation-page #gallery .memory:nth-child(even) {
  width: 100%;
  flex: 0 0 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  scroll-snap-align: center;
  transform: none!important;
}
#invitation-page #gallery .memory-projection .memory img,
#invitation-page #gallery .memory-projection .memory.is-current img,
#invitation-page #gallery .memory-projection.is-projecting .memory.is-current img {
  box-sizing: border-box;
  width: 100%;
  height: var(--memory-stage-height);
  max-height: none;
  aspect-ratio: 4/5;
  padding: calc(var(--memory-stage-height)*.1) calc(var(--memory-stage-width)*.13) calc(var(--memory-stage-height)*.12);
  object-fit: contain;
  object-position: center;
  background: radial-gradient(ellipse,#bfb88a14,transparent 68%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  transform: none!important;
  animation: none;
}
#invitation-page #gallery .memory-projection.is-projecting .memory.is-current img {
  animation: middle-memory-exposure 1.9s ease both;
  animation-play-state: var(--middle-play);
}
#invitation-page #gallery .memory-screen-mount {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--memory-stage-height);
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 15px 13px rgb(3 17 8/.35));
}
#invitation-page #gallery .memory-caption {
  min-height: 0;
  padding: .8rem 1.1rem 0;
  margin: 0;
  font-family: 'Cormorant Garamond',Georgia,serif;
  color: #ddcda9;
  font-size: 1.07rem;
  line-height: 1.5;
  font-style: italic;
}
#invitation-page #gallery .memory-projection .memory::after { display: none; }
#invitation-page #gallery .projection-lamp {
  left: var(--projector-left);
  bottom: var(--projector-bottom);
  width: var(--projector-width);
  z-index: 3;
  transform: rotate(-8deg);
  opacity: 1;
  filter: saturate(.76);
}
#invitation-page #gallery .projection-lamp img { filter: drop-shadow(0 9px 8px rgb(6 20 10/.4)); }
#invitation-page #gallery .projection-lamp::after {
  animation: middle-lantern-filament 6.8s ease-in-out infinite;
  animation-play-state: var(--middle-play);
}
#invitation-page #gallery .projection-beam,
#invitation-page #gallery .memory-projection.is-projecting .projection-beam {
  z-index: 1;
  left: 8%;
  bottom: 72px;
  width: 87%;
  height: calc(var(--memory-stage-height) + 108px);
  opacity: .42;
  clip-path: none;
  background: conic-gradient(from -12deg at 12% 96%,transparent 0deg,#efd59a32 13deg,#f2daa63d 27deg,#f0d9a510 39deg,transparent 51deg,transparent 360deg);
  -webkit-mask-image: radial-gradient(ellipse at 12% 96%,#000 4%,#000a 46%,transparent 78%);
  mask-image: radial-gradient(ellipse at 12% 96%,#000 4%,#000a 46%,transparent 78%);
  filter: blur(9px);
  transform: none;
  animation: middle-projector-breath 7.2s ease-in-out infinite;
  animation-play-state: var(--middle-play);
}
#invitation-page #gallery .gallery-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: .75rem;
  row-gap: .2rem;
  margin: .85rem 0 0;
  color: #cdbc92;
  font-size: .77rem;
}
#invitation-page #gallery .gallery-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: .4rem;
  border: 1px solid #c5a76c55;
  border-radius: 50%;
  color: #ebd6a5;
  background: #142c1e40;
  font-size: 1.3rem;
}
#invitation-page #gallery .gallery-controls .projection-playback {
  flex-basis: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: .5rem 0;
  border: 0;
  border-radius: 0;
  font-family: 'Lora',Georgia,serif;
  font-size: .73rem;
  color: #c7c5a4;
  background: none;
}
#invitation-page #gallery .gallery-controls button:focus-visible,
#invitation-page #gallery .memory:focus-visible { outline: 2px solid #e0c287; outline-offset: -4px; }
#invitation-page #gallery .gallery-controls button:disabled { opacity: .3; }
#invitation-page #gallery .album-help {
  position: relative;
  z-index: 3;
  margin: .3rem 24px 0;
  color: #c0c3a5;
  font-size: .74rem;
  line-height: 1.8;
}

@keyframes middle-photo-arrives { from { opacity: .76; } to { opacity: 1; } }
@keyframes middle-bough-parts-right { from { transform: translate(-18%,9%) rotate(10deg); } to { transform: rotate(23deg); } }
@keyframes middle-bough-parts-left { from { transform: translate(22%,-4%) scaleX(-1) rotate(11deg); } to { transform: scaleX(-1) rotate(26deg); } }
@keyframes middle-leaf-breeze { from { transform: rotate(-1.8deg); } to { transform: rotate(2.2deg) translateY(3px); } }
@keyframes middle-vow-settles { from { opacity: 0; transform: translate3d(-9px,-7px,0) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes middle-vow-breathe { from { transform: rotate(-1.1deg) translateY(-2px); } to { transform: rotate(1.2deg) translateY(2px); } }
@keyframes middle-names-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes middle-memory-exposure { from { opacity: .74; } 44% { opacity: .95; } to { opacity: 1; } }
@keyframes middle-projector-breath { 0%,100% { opacity: .35; } 56% { opacity: .6; } }
@keyframes middle-lantern-filament { 0%,100% { opacity: .39; } 44% { opacity: .66; } 73% { opacity: .52; } }

@media(min-width:760px) {
  #invitation-page #story.canopy-story {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: center;
    gap: clamp(60px,10vw,150px);
    padding: 12.5rem max(8vw,calc((100vw - 1100px)/2)) 3.75rem;
  }
  #invitation-page #story .portrait-keepsake { max-width: 420px; }
  #invitation-page #story .story-portrait img { height: auto; max-height: clamp(390px,47vw,525px); }
  #invitation-page #story .portrait-vow { height: 142px; margin-top: -35px; }
  #invitation-page #story .canopy-names { font-size: clamp(3.3rem,4.8vw,4.7rem); }
  #invitation-page #story .story-copy { padding: 0 0 3rem; text-align: left; }
  #invitation-page #story .story-copy h2 { margin-left: 0; font-size: clamp(3.1rem,4.7vw,4.75rem); }
  #invitation-page #story .story-copy>p[data-bind] { margin-left: 0; font-size: .94rem; line-height: 2; }
  #invitation-page #story .story-tags { justify-content: flex-start; margin-top: 2rem; font-size: 1.12rem; }
  #invitation-page #gallery.projection-section { --memory-stage-width: min(51vw,530px); padding-bottom: 6rem; }
  #invitation-page #gallery>.section-intro { padding-top: 10rem; padding-bottom: 2.3rem; }
  #invitation-page #gallery .memory-projection { --projector-width: 240px; --projector-left: -25%; padding-bottom: 160px; }
  #invitation-page #gallery .projection-beam { left: -10%; width: 112%; bottom: 82px; }
  #invitation-page #gallery .memory-caption { font-size: 1.2rem; padding-top: .7rem; }
  #invitation-page #gallery .gallery-controls { gap: 1.1rem; }
  #invitation-page #gallery .gallery-controls .projection-playback { flex-basis: auto; margin-left: .5rem; }
  #invitation-page #gallery .album-help { margin-top: -.8rem; font-size: .8rem; }
}
@media(max-width:359px) {
  #invitation-page #story.canopy-story { padding-inline: 23px; padding-top: 9.2rem; }
  #invitation-page #story .story-copy h2 { font-size: 2.55rem; }
  #invitation-page #story .story-copy>p[data-bind] { font-size: .86rem; }
  #invitation-page #story .canopy-names { font-size: 2.75rem; }
  #invitation-page #story .portrait-vow { height: 100px; }
  #invitation-page #gallery .memory-caption { font-size: 1rem; }
  #invitation-page #gallery .memory-projection { padding-bottom: 130px; }
}
@media(prefers-reduced-motion:reduce) {
  #invitation-page :is(#story,#gallery) *,
  #invitation-page :is(#story,#gallery) *::before,
  #invitation-page :is(#story,#gallery) *::after { animation: none!important; transition: none!important; }
  #invitation-page #story.cinema-enhanced :is(.portrait-reveal,.portrait-vow,.canopy-names) { opacity: 1!important; transform: none!important; }
  #invitation-page #story.cinema-enhanced .portrait-bough-far { transform: rotate(23deg)!important; }
  #invitation-page #story.cinema-enhanced .portrait-bough-near { transform: scaleX(-1) rotate(26deg)!important; }
  #invitation-page #gallery #gallery-list { scroll-behavior: auto; }
  #invitation-page #gallery .memory-projection .memory img { opacity: 1!important; filter: none!important; }
}
.card-preview #invitation-page :is(#story,#gallery) *,
.card-preview #invitation-page :is(#story,#gallery) *::before,
.card-preview #invitation-page :is(#story,#gallery) *::after { animation: none!important; transition: none!important; }
.card-preview #invitation-page #story :is(.portrait-reveal,.portrait-vow,.canopy-names) { opacity: 1!important; transform: none!important; }
.is-backgrounded #invitation-page :is(#story,#gallery) *,
.is-backgrounded #invitation-page :is(#story,#gallery) *::before,
.is-backgrounded #invitation-page :is(#story,#gallery) *::after { animation-play-state: paused!important; }