/* The photograph continues into a colored canvas, with a ticket floating in front. */
body[data-mode=before] {
  --photo-backdrop: #a23429;
  --photo-on-backdrop: #fffaf5;
  --photo-muted-backdrop: #f1e7dd;
  background-color: var(--photo-backdrop);
  transition: background-color .8s ease;
}
body[data-mode=before][data-photo-theme=slate] { --photo-backdrop: #426577; }
body[data-mode=before][data-photo-theme=sage] { --photo-backdrop: #426c55; }
body[data-mode=before][data-photo-theme=amber] { --photo-backdrop: #866038; }
body[data-mode=before][data-photo-theme=pearl] { --photo-backdrop: #6d6177; }

#invite {
  --photo-duration: .8s;
  --ticket-overlap: 24cqw;
  --wedding-red: #ce382c;
  --wedding-red-ink: #c6322c;
  --wedding-red-line: #efb4ac;
  --wedding-red-soft: #fff0eb;
  --photo-surface: #fff3ee;
  --photo-soft: #f9e1d7;
  --photo-line: #ebd7cd;
  --photo-accent: #c94132;
  --photo-ink: #9d3025;
  background-color: var(--photo-backdrop);
  transition: background-color var(--photo-duration) ease;
}
#invite[data-photo-theme=slate] {
  --photo-surface: #f0f5f7;
  --photo-soft: #dfeaf0;
  --photo-line: #d5e2e8;
  --photo-accent: #476b7c;
  --photo-ink: #385667;
}
#invite[data-photo-theme=sage] {
  --photo-surface: #f0f6f1;
  --photo-soft: #dfebdf;
  --photo-line: #d4e2d6;
  --photo-accent: #376c56;
  --photo-ink: #2d5946;
}
#invite[data-photo-theme=amber] {
  --photo-surface: #fbf4e9;
  --photo-soft: #f2e4cd;
  --photo-line: #e7dbc7;
  --photo-accent: #8c6034;
  --photo-ink: #79512c;
}
#invite[data-photo-theme=pearl] {
  --photo-surface: #f5f3f7;
  --photo-soft: #eae5ef;
  --photo-line: #dfd9e6;
  --photo-accent: #6b6275;
  --photo-ink: #5e536a;
}

#invite .hero-edition { background-color: var(--photo-backdrop); color: var(--photo-on-backdrop); }
#invite .hero-edition i { color: var(--photo-on-backdrop); }
#invite .hero-edition .hero-edition-mark {
  color: var(--wedding-red-ink);
  background-color: #fffaf5;
  border-radius: 9px;
}
#invite .hero-edition-date { color: var(--photo-muted-backdrop); }
#invite #hero-carousel .hero-carousel-controls { bottom: calc(var(--ticket-overlap) + 14px); }
#hero-carousel[data-controls-occluded=true] .hero-carousel-controls { visibility: hidden; pointer-events: none; }
#invite .invite-paper {
  --home-surface: var(--photo-backdrop);
  margin-top: calc(-22cqw - var(--ticket-overlap));
  padding-top: 0;
  background-color: transparent;
  color: var(--photo-on-backdrop);
  box-shadow: none;
  isolation: isolate;
  pointer-events: none;
}
#invite .invite-paper > :not(.paper-curl) { pointer-events: auto; }
/* The transparent top reveals the photo beside the ticket; the canvas travels with it. */
#invite .invite-paper::before {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  inset: 0;
  height: auto;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: normal;
  background-image: none;
  background-color: var(--photo-backdrop);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--ticket-overlap));
  mask-image: linear-gradient(180deg, transparent, #000 var(--ticket-overlap));
}
#invite .hero-edition,
#invite .invite-paper,
#invite .invite-paper::before,
#invite .ticket-perforation::before,
#invite .ticket-perforation::after {
  transition: background-color var(--photo-duration) ease, border-color var(--photo-duration) ease, color var(--photo-duration) ease;
}

/* White ticket and modules retain their clarity in all five palettes. */
#invite .wedding-ticket,
#invite .ticket-perforation::before,
#invite .ticket-perforation::after { border-color: var(--photo-line); }
#invite .ticket-perforation { border-color: var(--photo-line); }
#invite .ticket-couple i,
#invite .wedding-ticket #wedding-info time > strong,
#invite .wedding-ticket .venue-map-action { color: var(--wedding-red-ink); }
#invite .ticket-label,
#invite .ticket-seal { color: var(--wedding-red-ink); }
#invite .wedding-ticket #wedding-info time > strong > span { color: var(--wedding-red); }
#invite .ticket-seal { border-color: var(--wedding-red-line); outline-color: var(--wedding-red-soft); }
#invite .wedding-ticket .venue-map-action { border-color: var(--wedding-red-line); }
#invite .wedding-ticket .venue-map:active { background-color: var(--wedding-red-soft); }
#invite .home-actions #write-rsvp { background-color: #fff; box-shadow: 0 6px 22px #20181614; }
#invite .home-actions #write-rsvp #rsvp-button-text { color: var(--wedding-red-ink); }
#invite .home-actions #write-rsvp .home-action-copy > span { color: #6f6a66; }
#invite #write-rsvp .home-action-arrow { color: #fff; background-color: var(--wedding-red); }
#invite .craft-envelope { background-color: var(--wedding-red-soft); border-color: #fff; }
#invite .craft-wax-seal { color: var(--wedding-red-ink); background-color: var(--wedding-red-soft); }
#invite .guest-extras .guest-extra-action,
#invite .hometown-entry,
#invite .interaction-hosts > span { border-color: var(--photo-line); }
#invite .module-action-label i,
#invite .hometown-entry-arrow,
#invite .hometown-entry-copy small,
#invite .reply-edit,
#invite .rsvp-shortcut { color: var(--wedding-red-ink); }
#invite .module-action-label i,
#invite .reply-edit,
#invite .rsvp-shortcut { border-color: var(--wedding-red-line); }
#invite .module-action-label i { background-color: var(--wedding-red-soft); }
#invite .module-letter-art svg { stroke: var(--wedding-red); }
#invite .module-letter-art b,
#invite .fortune-entry-art { background-color: var(--wedding-red); }
#invite .wish-entry-art { border-color: var(--wedding-red-line); box-shadow: 3px 3px 0 var(--wedding-red-soft); }
#invite .wish-entry-art::before,
#invite .fortune-entry-art i { background-color: var(--wedding-red-soft); }
#invite .wish-entry-art b { color: var(--wedding-red-ink); }
#invite .wish-entry-art i { background-color: var(--wedding-red-line); }
#invite .hero-falling-piece:nth-child(3n+2) { color: var(--wedding-red); }
#invite .invite-paper .rsvp-module-heading h2,
#invite .guest-interactions-heading h2,
#invite .clear-signature > span,
#invite .clear-signature i,
#invite .clear-rsvp .reply-kept h3,
#invite .clear-rsvp .reply-from,
#invite .clear-rsvp .reply-kept-status,
#invite .clear-rsvp .reply-kept-count { color: var(--photo-on-backdrop); }
#invite .rsvp-module-heading > span,
#invite .guest-interactions-heading p,
#invite .home-help-link,
#invite .clear-rsvp .reply-kept-note { color: var(--photo-muted-backdrop); }
#invite .wedding-ticket { box-shadow: 0 9px 28px #1b100f22, 0 1px 3px #1b100f0f; }
body[data-mode=before] .preview-tools,
body[data-mode=before] .preview-tools .utility-bar,
body[data-mode=before] .preview-label { color: var(--photo-muted-backdrop); }
#invite .guest-extras .guest-extra-action:active { background-color: var(--wedding-red-soft); border-color: var(--wedding-red-line); }
#invite .guest-extras .guest-extra-action:focus-visible,
#invite .hometown-entry:focus-visible,
#invite .rsvp-shortcut:focus-visible,
#invite .home-actions #write-rsvp:focus-visible,
#invite .home-help-link:focus-visible,
#invite .reply-edit:focus-visible { outline-color: var(--photo-on-backdrop); }
#invite .wedding-ticket .venue-map:focus-visible { outline-color: var(--wedding-red-ink); }

#invite .wish-entry-art::before,
#invite :is(.ticket-label,.ticket-couple i,.ticket-seal,.ticket-perforation,
.ticket-date-note,.venue-map-action,.module-action-label i,.hometown-entry-arrow,
.hometown-entry-copy small,.module-letter-art b,.fortune-entry-art,.wish-entry-art,
.wish-entry-art b,.wish-entry-art i,.fortune-entry-art i,
.craft-envelope,.craft-wax-seal,.reply-edit,.reply-kept-status,.rsvp-shortcut),
#invite .wedding-ticket #wedding-info time > strong,
#invite .wedding-ticket #wedding-info time > strong > span,
#invite .home-actions #write-rsvp {
  transition: background-color var(--photo-duration) ease, border-color var(--photo-duration) ease, color var(--photo-duration) ease, box-shadow var(--photo-duration) ease;
}
#invite .guest-extras .guest-extra-action {
  transition: transform .18s ease, border-color var(--photo-duration) ease, box-shadow .18s ease, background-color var(--photo-duration) ease;
}
@media (hover:hover) and (pointer:fine) {
  #invite .guest-extras .guest-extra-action:hover { border-color: var(--wedding-red); }
  #invite .wedding-ticket .venue-map:hover .venue-map-action { border-color: var(--wedding-red); }
}
@media (prefers-reduced-motion:reduce) {
  body[data-mode=before] { transition: none; }
  #invite { --photo-duration: 0s; }
  #invite .invite-paper { margin-top: calc(-1 * var(--ticket-overlap)); }
  #invite .guest-extras .guest-extra-action { transition: none; }
}