/* =====================================================================
   Illustrated scenes (hero, path of memories, courtyard, wishing garden, finale)
   Art layers are positioned inside their own scene and never lay out text.
   ===================================================================== */

/* ---------------------------------------------------------------- 01 · hero (mobile first) */
.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  overflow: hidden;
}
@supports (overflow: clip) { .hero { overflow: clip; } }
.hero__wash { position: absolute; inset: 0; z-index: -3; }
.hero__wash-a { width: 150vw; height: 125vw; left: -38vw; top: 14vw; --wash-opacity: 0.55; }
.hero__wash-b { width: 120vw; height: 100vw; right: -50vw; top: 70vw; --wash-mask: url('../assets/textures/wash-3.webp'); --wash-opacity: 0.45; }
.hero__wash-c { width: 80vw; height: 60vw; left: 10vw; top: -16vw; --wash-opacity: 0.28; }

.hero__canopy { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__wisteria, .hero__garland, .hero__banana { position: absolute; }
.hero__wisteria .art, .hero__garland .art, .hero__banana .art { position: relative; width: 100%; }
.hero__wisteria--l { left: -7vw; top: -4vw; width: 84vw; }
.hero__wisteria--r { right: -14vw; top: -7vw; width: 72vw; transform: scaleX(-1); }
.hero__garland { display: none; }
.hero__banana { right: -10vw; bottom: 43vw; width: 42vw; }

.hero__content {
  position: relative; z-index: 2;
  padding: calc(33vw + 32px + env(safe-area-inset-top)) 7vw 0;
  text-align: center;
}
.hero__overline {
  max-width: 28ch; margin-inline: auto;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.24em; line-height: 1.7; text-transform: uppercase; color: var(--gold-deep);
  text-wrap: balance;
}
@media (min-width: 700px) { .hero__overline { max-width: 32ch; letter-spacing: 0.3em; } }
.hero__names {
  margin-top: 0.3em;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-script); font-weight: 400; color: var(--green-deep);
  font-size: clamp(3.3rem, 14.6vw, 8.5rem); line-height: 0.98;
  outline: none;
}
.hero__name { display: block; width: 100%; overflow-wrap: normal; padding-inline: 0.12em; }
.hero__name.is-placeholder { color: rgba(73, 87, 64, 0.72); font-style: normal; }
.hero__amp { font-family: var(--font-serif); font-style: italic; font-size: 0.4em; line-height: 1.1; color: var(--gold-deep); }
.hero__headline {
  max-width: 22ch; margin: 0.7em auto 0;
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem); line-height: 1.35; color: var(--ink-soft);
  text-wrap: balance;
}
.hero__orn { margin-top: 14px; width: 150px; }
.hero__date {
  margin-top: 10px;
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem); letter-spacing: 0.04em; color: var(--green-deep);
}
.hero__date.is-placeholder { font-weight: 500; }

.hero__stage { position: relative; flex: none; height: 102vw; margin-top: -10vw; pointer-events: none; }
.hero__stage .art { position: absolute; }
.hero__stage .hero__banana .art { position: relative; }
.hero__palm      { left: -15vw; bottom: 21vw; width: 44vw; transform-origin: 50% 100%; }
.hero__rail--l   { left: -3vw; bottom: 25vw; width: 64vw; }
.hero__rail--r   { display: none; }
.hero__urn       { left: 37vw; bottom: 25vw; width: 13vw; }
.hero__pavilion  { right: -17vw; bottom: 25vw; width: 72vw; }
.hero__peacock   { right: 3vw; bottom: 17vw; width: 36vw; z-index: 1; }
.hero__lotus { z-index: 1; }
.hero__shrub     { left: 10vw; bottom: 15vw; width: 50vw; }
.hero__pond      { position: absolute; left: -12vw; bottom: 0.5vw; width: 124vw; }
.hero__pond .art { position: relative; width: 100%; }
.hero__lotus { transform-origin: 50% 100%; }
.hero__lotus--leaf-a { left: -2vw; bottom: 1vw; width: 24vw; }
.hero__lotus--bloom  { left: 8vw; bottom: 5vw; width: 15vw; }
.hero__lotus--tall   { left: 55vw; bottom: 3vw; width: 12vw; }
.hero__lotus--small  { right: 5vw; bottom: 7vw; width: 8vw; }
.hero__lotus--float  { left: 36vw; bottom: 3vw; width: 19vw; }
.hero__lotus--bud    { left: 75vw; bottom: 9vw; width: 5.5vw; }
.hero__lotus--leaf-b { right: -5vw; bottom: 0; width: 22vw; }

.ripple { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.75); opacity: 0; pointer-events: none; }
.hero__pond .ripple--a { left: 30%; top: 66%; width: 11%; aspect-ratio: 3 / 1; }
.hero__pond .ripple--b { left: 62%; top: 72%; width: 8%; aspect-ratio: 3 / 1; }


/* tablet & desktop: stage becomes a full-bleed layer around a centred reading lane */
@media (min-width: 700px) {
  .hero { justify-content: center; min-height: max(100vh, 700px); }
  .hero__content { padding: clamp(178px, calc(17vh + 48px), 248px) 0 clamp(230px, 29vh, 320px); width: min(64vw, 620px); margin-inline: auto; }
  .hero__names { font-size: clamp(4rem, min(9vw, 11vh), 7rem); }
  .hero__headline { max-width: 30ch; }
  .hero__overline { font-size: 0.75rem; }
  .hero__stage { position: absolute; inset: 0; height: auto; margin: 0; }

  .hero__wisteria--l { left: -5vw; top: -3vw; width: 57vw; }
  .hero__wisteria--r { right: -5vw; top: -3.6vw; width: 57vw; }
  .hero__banana { right: -4vw; bottom: 7vh; width: 26vw; }
  .hero__pavilion { right: -6vw; bottom: 6vh; width: 46vw; }
  .hero__peacock { right: 28vw; bottom: 4vh; width: 17vw; }
  .hero__palm { left: -6vw; bottom: 6vh; width: 34vw; }
  .hero__urn { left: 22vw; bottom: 7vh; width: 10vw; }
  .hero__rail--l { left: -2vw; bottom: 7vh; width: 52vw; }
  .hero__shrub { left: 4vw; bottom: 2vh; width: 30vw; }
  .hero__pond { left: 18vw; bottom: -3vh; width: 64vw; }
  .hero__lotus--leaf-a { left: 0; bottom: -1vh; width: 15vw; }
  .hero__lotus--bloom { left: 9vw; bottom: 1vh; width: 9vw; }
  .hero__lotus--tall { left: 70vw; bottom: 0; width: 7vw; }
  .hero__lotus--small { right: 3vw; bottom: 3vh; width: 5vw; }
  .hero__lotus--float { left: 42vw; bottom: 0; width: 11vw; }
  .hero__lotus--bud { left: 84vw; bottom: 4vh; width: 3.4vw; }
  .hero__lotus--leaf-b { right: -2vw; bottom: -2vh; width: 13vw; }
}
@media (min-width: 1024px) {
  .hero__overline { max-width: none; }
  .hero__content { width: min(46vw, 660px); padding-top: clamp(164px, calc(16vh + 48px), 228px); padding-bottom: clamp(190px, 26vh, 280px); }
  .hero__names { font-size: clamp(4rem, min(7vw, 11vh), 7rem); }
  .hero__wisteria--l { left: -3vw; top: -2.4vw; width: 40vw; }
  .hero__wisteria--r { right: -3vw; top: -2.4vw; width: 40vw; }
  .hero__garland { display: block; left: 31vw; top: -3.2vw; width: 38vw; transform: scaleX(-1); }
  .hero__banana { right: -3vw; bottom: 5vw; width: 20vw; }
  .hero__pavilion { right: 2vw; bottom: 5vw; width: 30vw; }
  .hero__peacock { right: 25.5vw; bottom: 3.6vw; width: 12vw; }
  .hero__palm { left: -2vw; bottom: 4.6vw; width: 21vw; }
  .hero__urn { left: 16.5vw; bottom: 5.4vw; width: 6.6vw; }
  .hero__rail--l { left: -1vw; bottom: 5.4vw; width: 35vw; }
  .hero__rail--r { display: block; left: 50vw; bottom: 5.4vw; width: 26vw; }
  .hero__shrub { left: 8vw; bottom: 1.4vw; width: 19vw; }
  .hero__pond { left: 27vw; bottom: -2.6vw; width: 46vw; }
  .hero__lotus--leaf-a { left: 1vw; bottom: -1vw; width: 11vw; }
  .hero__lotus--bloom { left: 23vw; bottom: 0.6vw; width: 6.4vw; }
  .hero__lotus--tall { left: 68vw; bottom: 0; width: 5vw; }
  .hero__lotus--small { right: 2vw; bottom: 1.6vw; width: 3.6vw; }
  .hero__lotus--float { left: 44vw; bottom: 0.2vw; width: 8vw; }
  .hero__lotus--bud { left: 80vw; bottom: 2.6vw; width: 2.4vw; }
  .hero__lotus--leaf-b { right: 10vw; bottom: -1.4vw; width: 9vw; }
  .hero__wash-a { width: 90vw; height: 70vw; left: 5vw; top: -6vw; }
  .hero__wash-b { width: 60vw; height: 50vw; right: -14vw; top: 16vw; }
  .hero__wash-c { width: 50vw; height: 38vw; left: -10vw; top: 30vw; }
}

/* ---------------------------------------------------------------- 02 · date section wash */
.date-section { overflow-x: clip; }
.date-section__wash { width: 130vw; height: 90vw; max-width: 1500px; max-height: 1000px; left: 50%; top: 50%; transform: translate(-50%, -50%); --wash-mask: url('../assets/textures/wash-2.webp'); --wash-opacity: 0.32; z-index: -1; }
.date-section, .note-section, .gallery-section, .venue-section, .video-section, .rsvp-section { isolation: isolate; }

/* ---------------------------------------------------------------- 04 · story scene decor */
.story-scene { overflow-x: clip; }
.story-scene__wash-a { width: 120vw; height: 90vw; left: -40vw; top: 10%; }
.story-scene__wash-b { width: 100vw; height: 80vw; right: -40vw; top: 55%; }
.story-scene__wisteria { position: absolute; right: -12vw; top: -9vw; width: 54vw; transform: scaleX(-1); }
.story-scene__wisteria .art { position: relative; width: 100%; }
.story-scene__palm { left: -16vw; bottom: 0; width: 48vw; opacity: 0.95; }
.story-scene__shrub { right: -10vw; bottom: -2vw; width: 44vw; }
@media (min-width: 1024px) {
  .story-scene__wisteria { width: 30vw; right: -3vw; top: -3vw; }
  .story-scene__palm { left: -3vw; width: 20vw; }
  .story-scene__shrub { right: 2vw; width: 18vw; }
  .story-scene__wash-a { width: 60vw; height: 46vw; left: -14vw; }
  .story-scene__wash-b { width: 56vw; height: 44vw; right: -16vw; }
}

/* ---------------------------------------------------------------- 05 · gallery wash */
.gallery-section { overflow-x: clip; }
.gallery-section__wash { width: 120vw; height: 90vw; max-width: 1600px; max-height: 1100px; left: 50%; top: 30%; transform: translateX(-50%); z-index: -1; --wash-opacity: 0.26; }

/* ---------------------------------------------------------------- 06 · courtyard decor */
.courtyard { overflow-x: clip; padding-top: calc(var(--section-pad) + 12vw); padding-bottom: calc(var(--section-pad) + 18vw); }
.courtyard__wash-a { width: 120vw; height: 90vw; left: -30vw; top: 20%; }
.courtyard__wash-b { width: 110vw; height: 80vw; right: -40vw; top: 50%; --wash-opacity: 0.4; }
.courtyard__garland { position: absolute; top: -2vw; width: 74vw; }
.courtyard__garland .art { position: relative; width: 100%; }
.courtyard__garland--l { left: -12vw; transform: scaleX(-1); }
.courtyard__garland--r { right: -12vw; }
.courtyard__urn { bottom: 9vw; width: 21vw; z-index: 1; }
.courtyard__urn--l { left: 1vw; }
.courtyard__urn--r { right: 1vw; }
.courtyard__rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 21vw;
  background: url('../assets/optimized/art/balustrade-950.webp') left bottom / auto 100% repeat-x;
  opacity: 0.95;
}
@media (min-width: 1024px) {
  .courtyard { padding-top: calc(var(--section-pad) + 5vw); padding-bottom: calc(var(--section-pad) + 8vw); }
  .courtyard__garland { width: 56vw; top: -3.4vw; }
  .courtyard__garland--l { left: -4vw; }
  .courtyard__garland--r { right: -4vw; }
  .courtyard__urn { width: 8vw; bottom: 5.4vw; }
  .courtyard__urn--l { left: 4vw; }
  .courtyard__urn--r { right: 4vw; }
  .courtyard__rail { height: 8.4vw; background-size: auto 100%; }
  .courtyard__wash-a { width: 70vw; height: 54vw; left: -14vw; }
  .courtyard__wash-b { width: 60vw; height: 46vw; right: -16vw; }
}

/* ---------------------------------------------------------------- 09 · wishing garden decor */
.wishing-garden { overflow-x: clip; }
.wishing-garden__wash-a { width: 130vw; height: 100vw; left: -20vw; top: 0; }
.wishing-garden__wash-b { width: 90vw; height: 70vw; right: -30vw; top: 35%; }
.wishing-garden__wash-c { width: 100vw; height: 70vw; left: -30vw; bottom: 5%; }
@media (min-width: 1024px) {
  .wishing-garden__wash-a { width: 80vw; height: 56vw; left: 10vw; top: 6%; }
  .wishing-garden__wash-b { width: 50vw; height: 40vw; right: -10vw; }
  .wishing-garden__wash-c { width: 50vw; height: 36vw; left: -10vw; }
}

/* ---------------------------------------------------------------- 11 · finale */
.finale { position: relative; isolation: isolate; overflow: hidden; padding: var(--section-pad) var(--gutter) 0; text-align: center; }
@supports (overflow: clip) { .finale { overflow: clip; } }
.finale__wash { width: 140vw; height: 110vw; max-width: 1500px; max-height: 1100px; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; --wash-opacity: 0.5; }
.finale__monogram { position: relative; width: min(76vw, 380px); aspect-ratio: 1; margin: 0 auto; }
.finale__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.finale__initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-script); font-size: clamp(3.6rem, 17vw, 6.4rem); line-height: 1; color: var(--green-deep);
  padding-top: 4%;
}
.finale__initials .amp { font-family: var(--font-serif); font-style: italic; font-size: 0.42em; color: var(--gold-deep); margin-inline: 0.12em; }
.finale__initials .amp--solo { font-size: 1.05em; }
.finale__title { max-width: 22ch; margin: 28px auto 0; font-family: var(--font-serif); font-weight: 500; font-style: italic; font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem); line-height: 1.2; color: var(--green-deep); text-wrap: balance; }
.finale__names { margin-top: 10px; font-family: var(--font-script); font-size: clamp(2rem, 1.6rem + 2vw, 3rem); color: var(--lilac-deep); line-height: 1.1; }
.finale__date { margin-top: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); }
.finale__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 28px; }
.finale__mode { margin-top: 18px; font-size: 0.75rem; color: var(--ink-soft); }
.finale__garden { position: relative; height: 74vw; margin-top: 24px; pointer-events: none; }
.finale__garden .art, .finale__garden > div { position: absolute; }
.finale__garden > div .art { position: relative; width: 100%; }
.finale__rail { left: 10vw; bottom: 30vw; width: 80vw; }
.finale__palm { right: -16vw; bottom: 18vw; width: 50vw; }
.finale__peacock { left: -2vw; bottom: 18vw; width: 36vw; transform: scaleX(-1); z-index: 1; }
.finale__pond { left: -12vw; bottom: 0; width: 124vw; }
.finale__pond .ripple--a { left: 40%; top: 70%; width: 10%; aspect-ratio: 3 / 1; }
.finale__lotus { transform-origin: 50% 100%; z-index: 1; }
.finale__lotus--a { left: 4vw; bottom: 4vw; width: 16vw; }
.finale__lotus--b { right: 14vw; bottom: 3vw; width: 12vw; }
.finale__lotus--c { left: 34vw; bottom: 0; width: 20vw; }
.finale__lotus--d { left: 60vw; bottom: 2vw; width: 16vw; }
.finale__lotus--e { right: 4vw; bottom: 6vw; width: 5vw; }
@media (min-width: 1024px) {
  .finale__garden { height: 24vw; margin-top: 10px; }
  .finale__rail { left: 24vw; bottom: 12.5vw; width: 52vw; }
  .finale__palm { right: 8vw; bottom: 5vw; width: 18vw; }
  .finale__peacock { left: 16vw; bottom: 5.6vw; width: 11vw; }
  .finale__pond { left: 24vw; bottom: -2vw; width: 52vw; }
  .finale__lotus--a { left: 21vw; bottom: 1vw; width: 6vw; }
  .finale__lotus--b { right: 22vw; bottom: 1vw; width: 4.6vw; }
  .finale__lotus--c { left: 36vw; bottom: -0.4vw; width: 7vw; }
  .finale__lotus--d { left: 58vw; bottom: 0.4vw; width: 6vw; }
  .finale__lotus--e { right: 18vw; bottom: 2.4vw; width: 2vw; }
}

/* ---------------------------------------------------------------- shortcut navigation */
.garden-nav {
  position: fixed; z-index: 60; left: 50%; top: max(10px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background-color: rgba(252, 249, 241, 0.96); background-image: var(--tex-paper); background-size: 256px;
  border: var(--hairline); border-radius: 4px;
  box-shadow: 0 10px 24px -14px rgba(61, 73, 53, 0.55);
  transform: translate(-50%, calc(-100% - 24px)); visibility: hidden;
  transition: transform 380ms var(--ease-out), visibility 0s linear 380ms;
}
.garden-nav.is-visible { transform: translate(-50%, 0); visibility: visible; transition: transform 380ms var(--ease-out), visibility 0s; }
.js:not(.intro-done) .garden-nav { display: none; }
.garden-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); border-radius: 3px; white-space: nowrap;
}
.garden-nav__link:hover { background: rgba(233, 219, 185, 0.5); }
.garden-nav__link--wide { display: none; }
.garden-nav__link--rsvp { background: var(--green-deep); color: #FBF8EF; }
.garden-nav__link--rsvp:hover { background: #3F4C37; }
@media (min-width: 820px) { .garden-nav__link--wide { display: inline-flex; } }