/* Sage paper composition — white paper texture with alternating watercolor fields. */
:root {
  --sage-paper: url("../assets/images/sage-paper/white-paper-texture-v1.webp");
  --sage-wash-vertical: url("../assets/images/sage-paper/sage-wash-vertical-v1.webp");
  --sage-wash-diagonal: url("../assets/images/sage-paper/sage-wash-diagonal-v1.webp");
  --sage-block: rgba(223, 231, 218, .82);
  --sage-block-soft: rgba(232, 238, 228, .74);
}

html,
body,
.phone-shell,
.invite {
  background-color: #fff !important;
}

html body .invite {
  background-image:
    linear-gradient(rgba(255, 255, 255, .58), rgba(255, 255, 255, .58)),
    var(--sage-paper) !important;
  background-position: center, center top !important;
  background-repeat: repeat-y !important;
  background-size: cover, 100% auto !important;
}

html body .invite > .section,
html body .invite > .paper-section,
html body .invite > .sweet-invitation-section,
html body .invite > .sweet-transition-strip,
html body .invite > .ending-card {
  background-color: transparent !important;
}

/* Alternate the two extracted watercolor washes so long sections do not repeat mechanically. */
html body .invite .family-section,
html body .invite .family-section.family-showcase {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)),
    var(--sage-wash-vertical) !important;
  background-position: center, 104% 54% !important;
  background-repeat: no-repeat !important;
  background-size: cover, 94% auto !important;
}

html body .invite .interview-section,
html body .invite .interview-section.paper-section {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)),
    var(--sage-wash-diagonal), var(--sage-wash-vertical) !important;
  background-position: center, -24% 16%, 122% 76% !important;
  background-repeat: no-repeat !important;
  background-size: cover, 126% auto, 78% auto !important;
}

html body .invite .wedding-logistics-section,
html body .invite .wedding-logistics-section.paper-section {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)),
    var(--sage-wash-vertical), var(--sage-wash-diagonal) !important;
  background-position: center, -48% 9%, 22% 83% !important;
  background-repeat: no-repeat !important;
  background-size: cover, 92% auto, 128% auto !important;
}

html body .invite .wedding-logistics-section .ceremony-card--editorial {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background-color: rgba(255, 255, 255, .48) !important;
}

html body .invite .wedding-logistics-section .ceremony-card--editorial::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(360px, 88vw);
  aspect-ratio: 1.75 / 1;
  background: url("../assets/images/decor/heart-ecg-transparent-v1.webp") center / contain no-repeat;
  opacity: .12;
  pointer-events: none;
}

html body .invite .wedding-logistics-section .ceremony-card--editorial > * {
  position: relative;
  z-index: 1;
}

/* Keep the absolutely positioned route buttons above the following ceremony card
   without changing their original geometry or the document flow. */
html body .invite .wedding-logistics-section .journey-road-block {
  z-index: 2 !important;
}

html body .invite .wedding-logistics-section .journey-route-actions {
  z-index: 30 !important;
}

html body .invite .wedding-logistics-section .side-route-button {
  z-index: 31 !important;
}

body.landing-active .petal-layer[data-effect-zone="landing"] {
  display: block !important;
}

.petal-layer[data-effect-renderer="gif"] {
  opacity: 1 !important;
  filter: none !important;
}

.petal-gif {
  position: absolute;
  inset: -3%;
  display: block;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  opacity: var(--gif-effect-opacity, .5);
  will-change: transform;
  animation: wedding-gif-effect-drift var(--gif-drift-duration, 18s) ease-in-out infinite alternate;
}

.petal-gif--floating-butterflies,
.petal-gif--snowflakes,
.petal-gif--stardust,
.petal-gif--starfall {
  filter: sepia(.28) saturate(.72) hue-rotate(322deg) brightness(.9);
}

.petal-gif--pink-petals {
  filter: saturate(.92) brightness(.98);
}

.petal-gif--white-shimmer {
  filter: sepia(.18) saturate(.55) hue-rotate(325deg) brightness(.98);
}

@keyframes wedding-gif-effect-drift {
  from { transform: translate3d(-1.2%, -1%, 0) scale(var(--gif-effect-scale, 1.4)); }
  to { transform: translate3d(1.2%, 1%, 0) scale(var(--gif-effect-scale-end, 1.44)); }
}

@media (prefers-reduced-motion: reduce) {
  .petal-gif { animation: none !important; }
}

html body .invite .wedding-logistics-section .ceremony-card--editorial.bride::before {
  right: -8%;
  bottom: -10%;
  transform: rotate(-7deg);
}

html body .invite .wedding-logistics-section .ceremony-card--editorial.groom::before {
  top: -8%;
  left: -8%;
  transform: rotate(7deg) scaleX(-1);
}

html body .invite .gallery-section.album-story-v3 {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)),
    var(--sage-wash-diagonal), var(--sage-wash-vertical), var(--sage-wash-diagonal) !important;
  background-position: center, -28% 9%, 126% 48%, -24% 87% !important;
  background-repeat: no-repeat !important;
  background-size: cover, 132% auto, 82% auto, 124% auto !important;
}

html body .invite .wedding-day-timeline-section,
html body .invite .sweet-invitation-section {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, .28)),
    var(--sage-wash-vertical) !important;
  background-position: center, 122% 52% !important;
  background-repeat: no-repeat !important;
  background-size: cover, 86% auto !important;
}

html body .invite .lightbox-album-section {
  background-color: #5d744f !important;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .13), transparent 34%),
    linear-gradient(155deg, #718663 0%, #5d744f 52%, #4e6544 100%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Remove the remaining legacy white islands so the paper/watercolor layer is continuous. */
html body .invite .interview-poem-card,
html body .invite .wedding-logistics-section .arch-calendar-card,
html body .invite .wedding-logistics-section .arch-calendar-frame,
html body .invite .gift-panel.gift-present-panel,
html body .invite .gift-present-panel .gift-present-button,
html body .invite .lightbox-album-heading {
  background: transparent !important;
  box-shadow: none !important;
}

/* RSVP glass card: soft pink labels, luminous blurred edge and no opaque island. */
html body .invite .rsvp-card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(221, 105, 139, .38) !important;
  background: rgba(255, 255, 255, .66) !important;
  box-shadow:
    0 20px 54px rgba(92, 65, 75, .16),
    0 0 28px rgba(241, 153, 181, .2),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
}

html body .invite .rsvp-card h4,
html body .invite .rsvp-card .rsvp-field > label:not(.rsvp-radio),
html body .invite .rsvp-card .rsvp-label {
  color: #d65f83 !important;
}

/* Restore the original green album identity independently from the paper theme. */
html body .invite .lightbox-album-heading {
  background: #fffaf2 !important;
  color: #36513b !important;
}

html body .invite .lightbox-album-heading em {
  color: #252125 !important;
}

html body .invite .lightbox-album-stage {
  box-shadow: none !important;
}

html body .invite .gift-panel.gift-present-panel {
  border-color: transparent !important;
}

html body .invite .gift-present-panel .gift-present-button {
  border-color: rgba(143, 164, 130, .34) !important;
}

/* Offset sage squares travel with each existing ZenLove motion target. */
html body .invite .family-section .couple-portrait--groom .couple-portrait__frame,
.family-section .photo-card.left-card,
.story-timeline-item-left .story-timeline-photo,
.album-photo--opening-left,
.album-photo--best,
.album-photo--landscape,
.album-photo--final-left {
  box-shadow: -14px 15px 0 var(--sage-block), 0 12px 26px rgba(74, 91, 69, .08) !important;
}

html body .invite .family-section .couple-portrait--bride .couple-portrait__frame,
.family-section .photo-card.right-card,
.story-timeline-item-right .story-timeline-photo,
.album-photo--opening-right,
.album-photo--opening-wide,
.album-photo--final-main,
.album-photo--final-right {
  box-shadow: 14px 15px 0 var(--sage-block-soft), 0 12px 26px rgba(74, 91, 69, .08) !important;
}

.album-photo-pair .album-photo:first-child {
  box-shadow: -10px 11px 0 var(--sage-block) !important;
}

.album-photo-pair .album-photo:last-child {
  box-shadow: 10px 11px 0 var(--sage-block-soft) !important;
}

.lightbox-album-stage {
  box-shadow: 16px 17px 0 var(--sage-block-soft), 0 14px 30px rgba(74, 91, 69, .08) !important;
}

html body .invite .wedding-logistics-section .arch-calendar-photo {
  box-shadow: none !important;
}

.ending-card-after-sweet {
  margin-top: 0 !important;
  box-shadow: -14px -14px 0 var(--sage-block), 0 14px 30px rgba(74, 91, 69, .1) !important;
}

/* Sage backplates and photographs now enter as separate layers. */
.sage-motion-host {
  position: relative !important;
  isolation: isolate;
}

.sage-motion-backplate {
  position: absolute !important;
  z-index: 0 !important;
  display: block;
  pointer-events: none;
}

.sage-motion-backplate--left {
  background: var(--sage-block) !important;
  margin-top: 15px;
  margin-left: -14px;
}

.sage-motion-backplate--right {
  background: var(--sage-block-soft) !important;
  margin-top: 15px;
  margin-left: 14px;
}

.sage-motion-subject {
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 12px 26px rgba(74, 91, 69, .08) !important;
}

html body .invite .calendar-orb .calendar,
html body .invite .calendar-orb .calendar-grid,
html body .invite .calendar-orb .calendar-grid > span,
html body .invite .arch-calendar-script,
html body .invite .arch-calendar-quote {
  color: #d1262f !important;
}

html body .invite .lightbox-album-section {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html body .invite .lightbox-album-thumbs {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 600px) {
  html body .invite .wedding-editorial-photo {
    width: 100vw !important;
    max-width: none !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw - 2px) !important;
  }
}

/* Keep the final photograph crisp from its very first pixel. */
html body .invite .ending-card-after-sweet::before,
html body .invite .ending-card-after-sweet::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body .invite .ending-card-after-sweet > img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-filter: saturate(.98) !important;
  filter: saturate(.98) !important;
}

/* Landscape closing photograph with the thank-you copy centred like the reference. */
html body .invite .ending-card-after-sweet {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
}

html body .invite .ending-card-after-sweet > figcaption {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: clamp(22px, 7vw, 42px) !important;
  color: #fff !important;
  text-align: center !important;
  background: linear-gradient(180deg, rgba(18, 24, 19, .06), rgba(18, 24, 19, .34)) !important;
}

html body .invite .ending-card-after-sweet > figcaption h2 {
  margin: 0 0 8px !important;
  color: #fff !important;
  font: 400 clamp(34px, 10vw, 54px)/1 "SVN Wedding Signature", "Great Vibes", cursive !important;
  text-align: center !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .46) !important;
}

html body .invite .ending-card-after-sweet > figcaption p {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  color: #fff !important;
  font: 600 clamp(12px, 3.4vw, 17px)/1.48 "Cormorant Garamond", serif !important;
  text-align: center !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .62) !important;
}

html body .invite .gift-present-panel .gift-title {
  margin-bottom: 16px !important;
  font: 400 clamp(38px, 11vw, 58px)/1.08 "SVN Wedding Signature", "Great Vibes", cursive !important;
  letter-spacing: 0 !important;
}

@media (max-width: 380px) {
  html body .invite .family-section .couple-portrait--groom .couple-portrait__frame,
  .family-section .photo-card.left-card,
  .story-timeline-item-left .story-timeline-photo {
    box-shadow: -10px 11px 0 var(--sage-block), 0 10px 22px rgba(74, 91, 69, .07) !important;
  }

  html body .invite .family-section .couple-portrait--bride .couple-portrait__frame,
  .family-section .photo-card.right-card,
  .story-timeline-item-right .story-timeline-photo {
    box-shadow: 10px 11px 0 var(--sage-block-soft), 0 10px 22px rgba(74, 91, 69, .07) !important;
  }
}

html body .invite .sage-motion-subject {
  box-shadow: 0 12px 26px rgba(74, 91, 69, .08) !important;
}

@media (prefers-reduced-motion: reduce) {
  .family-section .couple-portrait__frame,
  .story-timeline-photo,
  .album-photo,
  .arch-calendar-photo,
  .lightbox-album-stage,
  .ending-card-after-sweet {
    transition: none !important;
  }
}