@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: block;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: block;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 900;
  font-display: block;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 800;
  font-display: block;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: block;
}

:root {
  --font-display: "Playfair Display", Georgia, serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  color-scheme: light;
  font-family: var(--font-sans);
  background: #f9f6f0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  cursor: none;
}

body {
  background: #f9f6f0;
  color: #1a1a1a;
}

.display-root {
  --theme-primary: #d4af37;
  --theme-background: #f9f6f0;
  --theme-text: #1a1a1a;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--theme-text);
  background: var(--theme-background);
}

.display-root::after {
  position: absolute;
  z-index: 12;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.startup-shell,
.scene-unconfigured {
  display: grid;
  height: 100%;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 3.5rem);
  text-align: center;
}

.welcome-scene,
.wall-scene,
.slideshow-scene,
.paused-scene,
.thank-you-scene {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Scene changes use one visual veil; entering the mural earns a short ceremonial beat. */
.scene-transition {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  color: #271b19;
  background:
    radial-gradient(circle at 16% 18%, rgb(189 126 109 / 25%), transparent 26%),
    radial-gradient(circle at 84% 82%, rgb(120 143 109 / 18%), transparent 29%),
    #f6eee5;
  isolation: isolate;
  animation: transition-veil-enter 700ms cubic-bezier(.22, .61, .36, 1) both;
}

.scene-transition::before,
.scene-transition::after {
  position: absolute;
  z-index: -1;
  width: min(52vw, 52rem);
  height: min(52vw, 52rem);
  border: 1px solid rgb(155 107 88 / 16%);
  border-radius: 50%;
  content: "";
}

.scene-transition::before {
  top: -32vw;
  left: -16vw;
  box-shadow: 0 0 0 5vw rgb(255 255 255 / 15%), 0 0 0 11vw rgb(173 139 119 / 5%);
}

.scene-transition::after {
  right: -18vw;
  bottom: -34vw;
  box-shadow: 0 0 0 6vw rgb(255 255 255 / 17%), 0 0 0 13vw rgb(120 143 109 / 5%);
}

.transition-copy {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  padding: 4vh 7vw;
  text-align: center;
}

.transition-kicker {
  color: #5f4941;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 3.4rem);
  font-style: italic;
  animation: transition-copy-enter 750ms 520ms cubic-bezier(.22, .61, .36, 1) both;
}

.transition-title {
  max-width: 14ch;
  margin-top: .08em;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8.2vw, 11rem);
  font-weight: 550;
  letter-spacing: -.065em;
  line-height: .84;
  text-wrap: balance;
  animation: transition-title-enter 900ms 650ms cubic-bezier(.16, .76, .3, 1) both;
}

.transition-ornament {
  margin-top: clamp(1.4rem, 3vh, 3rem);
  color: #b2624e;
  font-size: clamp(1.4rem, 2vw, 2.6rem);
  animation: transition-ornament 1.4s 900ms ease-in-out both;
}

.transition-memories {
  position: absolute;
  inset: 0;
  opacity: .36;
}

.transition-memory {
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: clamp(.3rem, .45vw, .65rem);
  background: #fffaf4;
  box-shadow: 0 2vw 5vw rgb(73 49 40 / 21%);
}

.transition-memory-1 {
  top: 9vh;
  left: -3vw;
  width: 25vw;
  height: 43vh;
  transform: rotate(-5deg);
  animation: transition-photo-left 1.1s 160ms cubic-bezier(.22, .61, .36, 1) both;
}

.transition-memory-2 {
  top: -4vh;
  right: 8vw;
  width: 22vw;
  height: 31vh;
  transform: rotate(4deg);
  animation: transition-photo-top 1.1s 260ms cubic-bezier(.22, .61, .36, 1) both;
}

.transition-memory-3 {
  right: -2vw;
  bottom: -5vh;
  width: 28vw;
  height: 45vh;
  transform: rotate(-3deg);
  animation: transition-photo-right 1.1s 360ms cubic-bezier(.22, .61, .36, 1) both;
}

.transition-memory-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) sepia(.04);
}

.is-transitioning > :not(.scene-transition):not(.display-debug-overlay) {
  animation: scene-leave 900ms cubic-bezier(.4, 0, .2, 1) both;
}

.is-scene-entering > :not(.display-debug-overlay) {
  animation: scene-arrive 850ms cubic-bezier(.16, .76, .3, 1) both;
}

/* Story and mixed walls share a silk veil so their DOM swap never reads as a flash. */
.wall-mode-transition {
  position: absolute;
  z-index: 24;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(circle at 50% 46%, rgb(255 235 218 / 34%), transparent 17%),
    radial-gradient(circle at 18% 24%, rgb(216 151 140 / 28%), transparent 33%),
    radial-gradient(circle at 82% 76%, rgb(166 184 151 / 20%), transparent 35%),
    linear-gradient(118deg, rgb(73 45 43 / 96%), rgb(126 81 75 / 95%) 50%, rgb(65 43 40 / 97%));
  box-shadow: inset 0 0 12vw rgb(31 18 17 / 30%);
  pointer-events: none;
  isolation: isolate;
  animation: wall-mode-veil-in 650ms cubic-bezier(.4, 0, .2, 1) both;
}

.wall-mode-transition::before,
.wall-mode-transition::after {
  position: absolute;
  z-index: -1;
  width: min(66vw, 72rem);
  height: min(66vw, 72rem);
  border: 1px solid rgb(255 236 220 / 15%);
  border-radius: 50%;
  content: "";
}

.wall-mode-transition::before {
  top: -45vw;
  left: -19vw;
  box-shadow: 0 0 0 7vw rgb(255 255 255 / 4%), 0 0 0 15vw rgb(255 221 205 / 3%);
}

.wall-mode-transition::after {
  right: -24vw;
  bottom: -48vw;
  box-shadow: 0 0 0 8vw rgb(255 255 255 / 4%), 0 0 0 17vw rgb(173 197 159 / 3%);
}

.wall-mode-transition.is-to-mixed {
  background:
    radial-gradient(circle at 50% 46%, rgb(255 241 222 / 34%), transparent 17%),
    radial-gradient(circle at 18% 24%, rgb(205 157 135 / 24%), transparent 33%),
    radial-gradient(circle at 82% 76%, rgb(167 186 151 / 24%), transparent 35%),
    linear-gradient(118deg, rgb(69 48 43 / 96%), rgb(119 89 76 / 95%) 50%, rgb(62 47 40 / 97%));
}

.wall-mode-transition.is-revealing {
  animation: wall-mode-veil-out 800ms cubic-bezier(.16, .76, .3, 1) both;
}

.wall-mode-transition-ornament {
  color: #f5dac5;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 5rem);
  text-shadow: 0 0 2.4rem rgb(255 222 198 / 46%);
  animation: wall-mode-ornament 650ms cubic-bezier(.22, .61, .36, 1) both;
}

.wall-mode-transition.is-revealing .wall-mode-transition-ornament {
  animation: wall-mode-ornament-out 620ms cubic-bezier(.4, 0, .2, 1) both;
}

.is-wall-mode-leaving > :not(.wall-mode-transition):not(.display-debug-overlay) {
  animation: wall-mode-content-out 650ms cubic-bezier(.4, 0, .2, 1) both;
}

.is-wall-mode-entering > :not(.wall-mode-transition):not(.display-debug-overlay) {
  animation: wall-mode-content-in 800ms cubic-bezier(.16, .76, .3, 1) both;
}

/* Same-wall recompositions keep the canvas stable while shared photos move to their next position. */
::view-transition-group(*) {
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

::view-transition-image-pair(*) {
  isolation: isolate;
}

::view-transition-old(*) {
  mix-blend-mode: normal;
}

::view-transition-new(*) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  opacity: 0;
  animation: none;
}

::view-transition-new(root) {
  animation: none;
}

/* Persistent wall chrome stays above the photo snapshots during a same-wall recomposition. */
::view-transition-group(wall-identity),
::view-transition-group(wall-qr),
::view-transition-group(wall-counter) {
  z-index: 1000;
  animation: none;
}

::view-transition-old(wall-identity),
::view-transition-old(wall-qr),
::view-transition-old(wall-counter) {
  opacity: 1;
  animation: none;
}

::view-transition-new(wall-identity),
::view-transition-new(wall-qr),
::view-transition-new(wall-counter) {
  opacity: 0;
  animation: none;
}

.thank-you-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
}

p {
  margin: 0;
}

.event-date,
.photo-counter,
.wall-event-date,
.wall-event-name,
.welcome-countdown,
.paused-kicker,
.spotlight-label {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* Welcome follows the supplied editorial reference while retaining real display state. */
.welcome-scene {
  display: grid;
  place-items: center;
  padding: 13vh 9vw 8vh;
  background:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 76%), transparent 38%),
    radial-gradient(circle at 85% 12%, rgb(219 177 158 / 24%), transparent 24%),
    radial-gradient(circle at 8% 85%, rgb(155 174 143 / 18%), transparent 26%),
    #f8f2ea;
  color: #211916;
}

.welcome-scene::before,
.welcome-scene::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.welcome-scene::before {
  z-index: 0;
  background: center / cover no-repeat url("images/welcome-editorial-background.png");
  opacity: .2;
}

.welcome-scene::after {
  z-index: 1;
  background:
    linear-gradient(rgb(194 107 84 / 32%), rgb(194 107 84 / 32%)) left 3vw top 3vh / 2.5rem 1px no-repeat,
    linear-gradient(rgb(194 107 84 / 32%), rgb(194 107 84 / 32%)) left 3vw top 3vh / 1px 2.5rem no-repeat,
    linear-gradient(rgb(194 107 84 / 32%), rgb(194 107 84 / 32%)) right 3vw top 3vh / 2.5rem 1px no-repeat,
    linear-gradient(rgb(194 107 84 / 32%), rgb(194 107 84 / 32%)) right 3vw top 3vh / 1px 2.5rem no-repeat,
    linear-gradient(rgb(194 107 84 / 32%), rgb(194 107 84 / 32%)) left 3vw bottom 3vh / 2.5rem 1px no-repeat,
    linear-gradient(rgb(194 107 84 / 32%), rgb(194 107 84 / 32%)) left 3vw bottom 3vh / 1px 2.5rem no-repeat,
    linear-gradient(rgb(194 107 84 / 32%), rgb(194 107 84 / 32%)) right 3vw bottom 3vh / 2.5rem 1px no-repeat,
    linear-gradient(rgb(194 107 84 / 32%), rgb(194 107 84 / 32%)) right 3vw bottom 3vh / 1px 2.5rem no-repeat,
    linear-gradient(90deg, rgb(253 251 247 / 72%), rgb(248 244 236 / 28%) 52%, rgb(253 251 247 / 66%));
}

.welcome-brand {
  position: absolute;
  z-index: 3;
  top: 4.5vh;
  left: 50%;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  justify-content: center;
  column-gap: clamp(.35rem, .8vw, 1rem);
  margin: 0;
  color: #211916;
  font-family: var(--font-display);
  line-height: .86;
  text-align: center;
  text-shadow: 0 .2rem 1.2rem rgb(255 252 247 / 90%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.welcome-brand-name {
  font-size: clamp(3rem, 5vw, 6.8rem);
  font-weight: 600;
  letter-spacing: -.035em;
}

.welcome-brand-ampersand {
  color: #b2624e;
  font-family: var(--font-accent);
  font-size: clamp(3.6rem, 5.5vw, 7.5rem);
  font-style: italic;
  font-weight: 400;
  transform: rotate(-8deg) translateY(.08em);
}

.welcome-content {
  position: relative;
  z-index: 2;
  display: grid;
  box-sizing: border-box;
  grid-template-areas:
    "instructions qr"
    "instructions qr"
    "footer footer";
  grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 24vw);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  width: min(82vw, 82rem);
  min-width: 0;
  min-height: 79vh;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 6rem);
  row-gap: clamp(1rem, 2.1vh, 2rem);
  padding: clamp(1.5rem, 3vh, 3rem) clamp(.5rem, 2vw, 2rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  backdrop-filter: none;
  animation: editorial-enter 650ms 140ms cubic-bezier(.22, .61, .36, 1) both;
}

.welcome-timing {
  align-self: end;
  display: grid;
  justify-items: start;
  gap: clamp(.45rem, 1vh, .85rem);
}

.welcome-kicker {
  color: rgb(33 25 22 / 68%);
  font-size: clamp(.72rem, 1vw, 1.22rem);
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.welcome-countdown-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(.8rem, 1.5vw, 2rem);
  color: #110d0b;
}

.welcome-content .welcome-countdown {
  font-size: clamp(2.25rem, 3.65vw, 4.75rem);
}

.welcome-content .welcome-countdown-unit {
  font-size: clamp(1.25rem, 1.9vw, 2.45rem);
}

.event-date {
  color: color-mix(in srgb, var(--theme-text) 68%, var(--theme-primary));
  font-size: clamp(.82rem, 1.05vw, 1.3rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.welcome-countdown {
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(4.9rem, 8.3vw, 11.2rem);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .92;
}

.welcome-countdown-unit {
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 5.3vw, 7.3rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .92;
}

.countdown-complete,
.countdown-unavailable {
  color: inherit;
}

.message-copy {
  max-width: 31ch;
  font-size: clamp(1.05rem, 1.45vw, 1.85rem);
  line-height: 1.35;
}

.welcome-memory-prompt {
  justify-self: end;
  align-self: end;
  max-width: 32ch;
  color: rgb(33 25 22 / 84%);
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  font-weight: 620;
  letter-spacing: .015em;
  line-height: 1.25;
  text-align: right;
}

.welcome-memory-prompt-count {
  color: #ae5e49;
  font-family: var(--font-display);
  font-size: 1.12em;
  font-weight: 700;
}

.welcome-footer {
  grid-area: footer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 5rem);
  padding-top: clamp(.85rem, 2.1vh, 1.75rem);
  border-top: 1px solid rgb(134 83 66 / 28%);
}

.welcome-instructions {
  grid-area: instructions;
  align-self: center;
  max-width: 50rem;
}

.welcome-instructions-title {
  max-width: 16ch;
  color: #211916;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.3vw, 7.15rem);
  font-weight: 520;
  letter-spacing: -.025em;
  line-height: .88;
  text-wrap: balance;
}

.welcome-instructions-title-main,
.welcome-instructions-title-accent {
  display: block;
}

.welcome-instructions-title-accent {
  color: #b2624e;
  font-style: italic;
  font-weight: 440;
}

.welcome-steps {
  display: grid;
  gap: clamp(.8rem, 1.5vh, 1.5rem);
  margin: clamp(1.5rem, 3.1vh, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.welcome-step {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(.7rem, 1.15vw, 1.25rem);
}

.welcome-step-number {
  color: #b2624e;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.55vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}

.welcome-step-title {
  color: #211916;
  font-size: clamp(1.2rem, 1.85vw, 1.95rem);
  font-weight: 690;
  letter-spacing: 0;
  line-height: 1.15;
}

/* QR cards are always on a solid, high-contrast surface. */
.qr-card {
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: max-content;
  text-align: center;
  align-items: center;
  gap: clamp(.55rem, 1vw, 1.2rem);
  box-sizing: border-box;
  max-width: min(31vw, 29rem);
  padding: clamp(.6rem, 1vw, 1.2rem);
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 .7vw 2vw rgb(26 26 26 / 18%);
  font-family: var(--font-sans);
}

.qr-image {
  width: clamp(7rem, 11vw, 15rem);
  height: clamp(7rem, 11vw, 15rem);
  flex: 0 0 auto;
  background: #fff;
}

.welcome-qr,
.thank-you-content .qr-card {
  position: relative;
  right: auto;
  bottom: auto;
  max-width: min(100%, 29rem);
  margin-top: 0;
}

.welcome-qr {
  grid-area: qr;
  align-self: center;
  justify-self: end;
  display: grid;
  justify-items: center;
  width: min(100%, 23rem);
  max-width: none;
  gap: clamp(.65rem, 1.25vh, 1.15rem);
  padding: clamp(1rem, 1.9vw, 1.55rem);
  border: 1px solid rgb(178 98 78 / 22%);
  border-radius: clamp(1.25rem, 2vw, 1.5rem);
  background: #fff;
  color: #211916;
  box-shadow: 0 1.25rem 3.2rem rgb(69 47 38 / 12%);
  text-align: center;
}

.welcome-qr .qr-image {
  box-sizing: border-box;
  width: clamp(12rem, 19vw, 20rem);
  height: clamp(12rem, 19vw, 20rem);
  padding: clamp(.55rem, 1vw, .9rem);
  border: 1px solid rgb(178 98 78 / 18%);
  border-radius: 1rem;
  background: #fdfbf7;
}

/* Live wall: warm paper, botanical color and full-frame photos make it feel like a wedding album. */
.wall-scene {
  --wall-ink: #2c211e;
  --wall-accent: #a05f4e;
  --wall-secondary: #6a4d44;
  --wall-paper: #eee4d9;
  --wall-card: #fffaf3;
  --wall-media: #eee7df;
  --wall-shadow: rgb(84 56 46 / 18%);
  --wall-text-shadow: rgb(255 251 246 / 72%);
  --wall-chrome: rgb(255 250 243 / 94%);
  background: var(--wall-background, var(--wall-paper));
  color: var(--wall-ink);
  contain: layout paint;
  transition: background 800ms ease, color 600ms ease;
}

.wall-scene::before {
  position: absolute;
  z-index: 0;
  top: -21vw;
  right: -12vw;
  width: 42vw;
  height: 42vw;
  border: 1px solid rgb(160 95 78 / 24%);
  border: 1px solid color-mix(in srgb, var(--wall-accent) 24%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 5vw rgb(255 255 255 / 10%),
    0 0 0 11vw rgb(160 95 78 / 8%);
  box-shadow:
    0 0 0 5vw rgb(255 255 255 / 10%),
    0 0 0 11vw color-mix(in srgb, var(--wall-accent) 8%, transparent);
  content: "";
  pointer-events: none;
}

.wall-scene::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--wall-pattern, linear-gradient(120deg, rgb(255 255 255 / 20%), transparent 42%));
  content: "";
  pointer-events: none;
}

.wall-scene.moment-theme-look {
  --wall-ink: #3b171d;
  --wall-accent: #a13f53;
  --wall-secondary: #733746;
  --wall-paper: #ead9d6;
  --wall-background:
    radial-gradient(circle at 8% 10%, rgb(174 52 76 / 22%), transparent 25%),
    radial-gradient(circle at 94% 82%, rgb(255 240 223 / 55%), transparent 28%),
    linear-gradient(118deg, #f3e7df, #e6cfd0 68%, #d8bcc0);
  --wall-pattern: repeating-linear-gradient(112deg, transparent 0 12vw, rgb(126 34 53 / 4%) 12vw 12.12vw);
}

.wall-scene.moment-theme-ceremonia {
  --wall-ink: #302923;
  --wall-accent: #8b6e5c;
  --wall-secondary: #63705d;
  --wall-paper: #f2ede3;
  --wall-background:
    radial-gradient(ellipse at 12% 95%, rgb(122 151 112 / 24%), transparent 32%),
    radial-gradient(ellipse at 88% 4%, rgb(221 183 175 / 30%), transparent 30%),
    linear-gradient(135deg, #faf6ee, #eee6da);
  --wall-pattern: linear-gradient(90deg, transparent 49.7%, rgb(126 104 87 / 6%) 49.8% 50.2%, transparent 50.3%);
}

.wall-scene.moment-theme-brindis {
  --wall-ink: #392617;
  --wall-accent: #a46a2c;
  --wall-secondary: #82522b;
  --wall-paper: #ead8b5;
  --wall-background:
    radial-gradient(circle at 14% 16%, rgb(255 243 187 / 75%), transparent 23%),
    radial-gradient(circle at 90% 88%, rgb(157 85 34 / 20%), transparent 31%),
    linear-gradient(128deg, #f5e8cb, #dfc18d);
  --wall-pattern: radial-gradient(circle at center, rgb(255 255 255 / 15%) 0 1px, transparent 1.5px) 0 0 / 2.6rem 2.6rem;
}

.wall-scene.moment-theme-fiesta {
  --wall-ink: #fff4e3;
  --wall-accent: #f0bd5e;
  --wall-secondary: #efcbd8;
  --wall-paper: #241927;
  --wall-shadow: rgb(8 4 10 / 48%);
  --wall-text-shadow: rgb(13 5 14 / 70%);
  --wall-chrome: rgb(36 25 39 / 94%);
  --wall-background:
    radial-gradient(circle at 10% 18%, rgb(192 51 99 / 44%), transparent 30%),
    radial-gradient(circle at 87% 78%, rgb(59 78 176 / 42%), transparent 35%),
    linear-gradient(135deg, #2c1627, #17162c 58%, #311225);
  --wall-pattern: repeating-linear-gradient(123deg, transparent 0 10vw, rgb(255 210 115 / 7%) 10vw 10.12vw);
}

.wall-identity {
  position: absolute;
  z-index: 3;
  top: 5vh;
  left: 5vw;
  display: grid;
  gap: .2rem;
  max-width: 42vw;
  color: var(--wall-ink);
  text-shadow: 0 1px 10px var(--wall-text-shadow);
}

.wall-identity {
  z-index: 6;
  view-transition-name: wall-identity;
  box-sizing: border-box;
  max-width: min(44vw, 38rem);
  padding: clamp(.85rem, 1.3vw, 1.45rem) clamp(1rem, 1.55vw, 1.8rem);
  border: 1px solid rgb(160 95 78 / 24%);
  border: 1px solid color-mix(in srgb, var(--wall-accent) 24%, transparent);
  border-radius: clamp(.75rem, 1vw, 1.25rem);
  background: var(--wall-chrome);
  box-shadow: 0 1rem 3rem var(--wall-shadow);
  box-shadow: 0 1rem 3rem color-mix(in srgb, var(--wall-shadow) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
}

.wall-kicker {
  color: var(--wall-accent);
  font-size: clamp(.62rem, .78vw, .95rem);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wall-event-name {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 3.3rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}

.wall-moment-copy {
  max-width: 25ch;
  margin-top: clamp(.4rem, .7vh, .75rem);
  color: var(--wall-ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 2rem);
  font-style: italic;
  line-height: 1.08;
  text-wrap: balance;
  animation: wall-copy-float 5.5s ease-in-out infinite alternate;
}

.wall-event-date {
  font-size: clamp(.65rem, .8vw, 1rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.wall-marquee {
  --wall-gap: clamp(1.1rem, 1.8vw, 2.4rem);
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  contain: layout paint;
  overflow: hidden;
  padding: clamp(10rem, 21vh, 14rem) 4vw 4vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5.5%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5.5%, #000 94%, transparent 100%);
}

.wall-track {
  width: 100%;
  will-change: transform;
}

.wall-marquee.is-scrolling .wall-track {
  animation: wall-loop var(--wall-loop-duration, 60s) linear infinite;
  animation-delay: var(--wall-loop-delay, 0ms);
}

.wall-marquee.is-paused .wall-track {
  animation-play-state: paused;
}

.wall-pass {
  position: relative;
  box-sizing: border-box;
  padding: clamp(.6rem, 1.2vh, 1.2rem) clamp(.65rem, 1vw, 1.35rem) var(--wall-gap);
  column-count: var(--wall-columns, 4);
  column-gap: var(--wall-gap);
  isolation: isolate;
}

.wall-photo-card {
  position: relative;
  width: 100%;
  break-inside: avoid;
  box-sizing: border-box;
  z-index: var(--tile-z, 1);
  margin: 0 0 var(--wall-gap);
  overflow: visible;
  padding: clamp(.28rem, .42vw, .62rem) clamp(.28rem, .42vw, .62rem) clamp(.5rem, .7vw, .9rem);
  border: 1px solid rgb(105 75 63 / 8%);
  border-radius: clamp(.08rem, .18vw, .26rem);
  background: var(--wall-card);
  box-shadow:
    0 1vw 2.6vw var(--wall-shadow),
    0 .12rem .4rem rgb(84 56 46 / 8%);
  transform: translate3d(var(--tile-nudge, 0), var(--tile-stagger, 0), 0) rotate(var(--tile-angle, 0deg));
  transform-origin: 50% 42%;
  will-change: transform;
}

.wall-photo-media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--photo-ratio, 4 / 3);
  overflow: hidden;
  background: var(--wall-media);
}

.wall-marquee.is-static {
  padding-bottom: clamp(8rem, 18vh, 13rem);
}

.wall-marquee.is-static .wall-track,
.wall-marquee.is-static .wall-pass {
  height: 100%;
}

.wall-marquee.is-static .wall-pass {
  display: grid;
  grid-template-columns: repeat(var(--wall-columns, 1), minmax(0, 1fr));
  align-items: center;
  gap: var(--wall-gap);
  padding: clamp(1rem, 2vh, 2.5rem) clamp(1rem, 2vw, 3rem);
  column-count: auto;
}

.wall-marquee.is-static .wall-photo-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: center;
  justify-self: center;
  width: min(100%, 30vw);
  height: min(100%, 54vh);
  max-height: 100%;
  aspect-ratio: auto;
  margin: 0;
  overflow: visible;
  background: var(--wall-card);
  box-shadow: 0 1.4vw 3vw var(--wall-shadow);
}

.wall-marquee.is-static .wall-photo-media {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.wall-marquee.is-static .wall-photo-card.is-landscape { width: min(100%, 36vw); }
.wall-marquee.is-static .wall-photo-card.is-portrait { width: min(100%, 24vw); }
.wall-marquee.is-static .wall-pass-count-1 .wall-photo-card.is-landscape { width: min(100%, 50vw); }
.wall-marquee.is-static .wall-pass-count-1 .wall-photo-card.is-portrait { width: min(100%, 26vw); }
.wall-marquee.is-static .wall-pass-count-1 .wall-photo-card.is-square { width: min(100%, 34vw); }

.photo-tile,
.wall-photo-clone,
.slideshow-photo,
.spotlight-photo,
.feature-background,
.thank-you-background {
  width: 100%;
  height: 100%;
}

.photo-tile,
.wall-photo-clone {
  display: block;
  object-fit: contain;
  transform: translateZ(0);
}

.wall-marquee.is-static .photo-tile {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: none;
}

.feature-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #161514;
}

.feature-background {
  position: absolute;
  inset: -5%;
  object-fit: cover;
  filter: blur(36px) brightness(.48) saturate(.8);
  transform: scale(1.12);
}

.slideshow-photo,
.spotlight-photo {
  position: relative;
  z-index: 1;
  display: block;
  object-fit: contain;
}

.photo-moment-label {
  z-index: 3;
  box-sizing: border-box;
  width: fit-content;
  margin: 0;
  border: 1px solid rgb(87 58 48 / 10%);
  background: #fffaf3;
  color: #281f1c;
  font-size: clamp(.66rem, .9vw, 1.15rem);
  font-weight: 850;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 .55rem 1.5rem rgb(64 43 36 / 15%);
}

.photo-moment-label--wall {
  position: relative;
  justify-self: start;
  margin: clamp(-.2rem, -.15vw, -.08rem) 0 0 clamp(.25rem, .45vw, .7rem);
  padding: clamp(.55rem, .72vw, .9rem) clamp(.7rem, 1vw, 1.25rem);
  transform: rotate(-.35deg);
}

.wall-scene .photo-moment-label--wall {
  border-left: .24rem solid var(--wall-accent);
}

.photo-moment-label--feature {
  position: absolute;
  left: clamp(1.2rem, 3vw, 4rem);
  bottom: clamp(1.2rem, 4vh, 4rem);
  padding: clamp(.7rem, 1vw, 1.25rem) clamp(1rem, 1.5vw, 2rem);
  transform: rotate(-.5deg);
}

.slideshow-scene {
  padding: 5vh 5vw;
  background: #161514;
}

.slideshow-scene .feature-frame {
  animation: editorial-enter 750ms cubic-bezier(.22, .61, .36, 1) both;
}

.slideshow-photo {
  animation: image-settle 15s ease-in-out infinite alternate;
}

.wall-scene .qr-card,
.slideshow-scene .qr-card {
  position: absolute;
  right: 5vw;
  bottom: 5vh;
}

.wall-scene > .qr-card {
  view-transition-name: wall-qr;
}

/* The wall QR maintains its existing scan-safe 11.25rem minimum. */
.wall-scene .qr-image {
  width: clamp(11.25rem, 11vw, 15rem);
  height: clamp(11.25rem, 11vw, 15rem);
}

.photo-counter {
  view-transition-name: wall-counter;
  position: absolute;
  z-index: 6;
  isolation: isolate;
  bottom: 5vh;
  left: 5vw;
  overflow: visible;
  padding: .45rem .8rem;
  border: 1px solid rgb(113 78 66 / 10%);
  border-left: 3px solid #b2624e;
  background: rgb(255 250 244 / 94%);
  color: #332420;
  font-size: clamp(.8rem, 1.25vw, 1.6rem);
  font-weight: 700;
  animation: editorial-enter 400ms ease-out both;
}

.photo-counter-count {
  position: relative;
  z-index: 2;
  margin: 0;
}

.photo-counter.has-new-memory-preview {
  animation: none;
}

.new-memory-preview {
  position: absolute;
  z-index: 1;
  left: -1px;
  bottom: calc(100% - 1px);
  width: calc(100% + 2px);
  aspect-ratio: 1;
  box-sizing: border-box;
  overflow: hidden;
  padding: .32rem;
  border: 1px solid rgb(113 78 66 / 14%);
  border-bottom-color: transparent;
  background: rgb(255 250 244 / 98%);
  box-shadow: 0 -.9rem 2.4rem rgb(68 44 37 / 16%);
  transform-origin: bottom center;
  pointer-events: none;
  will-change: transform, opacity;
  animation: new-memory-preview-merge 5s cubic-bezier(.22, .72, .2, 1) both;
}

.new-memory-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .15rem;
}

@keyframes new-memory-preview-merge {
  0% {
    opacity: 0;
    transform: translateY(.45rem) scale(.12);
  }
  14% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100% + .45rem)) scale(.16);
  }
}

.empty-copy {
  display: grid;
  height: 100%;
  place-items: center;
  color: #3b2b26;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 5rem);
  text-align: center;
}

.empty-copy-line {
  display: block;
}

.empty-copy-moment {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  padding-inline: 7vw;
  text-align: left;
}

.wall-scene.moment-theme-fiesta .empty-copy-moment {
  color: var(--wall-ink);
}

.empty-copy-moment .empty-copy-lead {
  width: 76vw;
  font-size: min(7vw, 12vh);
  line-height: 1.05;
}

.empty-copy-moment .empty-copy-prompt {
  max-width: 76vw;
  margin-top: .5em;
  font-size: min(3.6vw, 6vh);
  line-height: 1.2;
}

/* Spotlight stays below the QR layer, so guests can keep scanning while it is on screen. */
.spotlight-overlay {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12vh 15vw;
  background: rgb(15 14 13 / 82%);
  backdrop-filter: blur(.35rem);
  animation: spotlight-backdrop 5s cubic-bezier(.22, .61, .36, 1) both;
}

.spotlight-overlay .feature-frame {
  width: min(76vw, 78rem);
  height: min(72vh, 52rem);
  border-radius: clamp(.25rem, .45vw, .65rem);
  box-shadow:
    0 2vw 6vw rgb(0 0 0 / 68%),
    0 0 0 1px rgb(255 255 255 / 12%);
  animation: spotlight-photo-flight 5s cubic-bezier(.2, .72, .24, 1) both;
}

.spotlight-label {
  position: absolute;
  z-index: 2;
  top: calc(50% - min(34vh, 24rem));
  padding: .5rem 1rem;
  background: #f9f6f0;
  color: #1a1a1a;
  font-size: clamp(.7rem, .95vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: spotlight-label-reveal 5s cubic-bezier(.22, .61, .36, 1) both;
}

.spotlight-photo {
  animation: spotlight-image-settle 5s cubic-bezier(.22, .61, .36, 1) both;
}

.paused-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.9rem, 2vh, 2rem);
  padding: 5vh 5vw;
  text-align: center;
  background:
    linear-gradient(125deg, transparent 0 44%, color-mix(in srgb, var(--theme-primary) 13%, transparent) 44% 45%, transparent 45%),
    var(--theme-background);
}

.paused-kicker {
  color: var(--theme-primary);
  font-size: clamp(.75rem, 1vw, 1.15rem);
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.thank-you-scene {
  display: grid;
  place-items: center;
  color: #fff;
  background: #1a1a1a;
}

.thank-you-scene::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(115deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 20%) 60%, rgb(0 0 0 / 50%));
}

.thank-you-background {
  position: absolute;
  inset: 0;
  object-fit: cover;
  filter: saturate(.75) contrast(1.05);
  animation: image-settle 22s ease-in-out infinite alternate;
}

.thank-you-content {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: min(85vw, 78rem);
  flex-direction: column;
  align-items: center;
  gap: clamp(.75rem, 1.8vh, 1.75rem);
  text-align: center;
  animation: editorial-enter 850ms cubic-bezier(.22, .61, .36, 1) both;
}

.thank-you-title {
  max-width: 17ch;
  font-size: clamp(3rem, 6.2vw, 8.5rem);
  line-height: .96;
}

.thank-you-content .event-date {
  color: rgb(255 255 255 / 80%);
}

.thank-you-content .photo-counter {
  position: relative;
  inset: auto;
  margin-top: .5rem;
}

.display-debug-overlay {
  position: fixed;
  z-index: 20;
  top: 1rem;
  left: 1rem;
  max-width: min(31rem, calc(100vw - 2rem));
  margin: 0;
  padding: .75rem .9rem;
  border: 1px solid rgb(255 255 255 / 70%);
  background: rgb(9 7 6 / 91%);
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(.72rem, 1vw, 1rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
}

@keyframes editorial-enter {
  from { opacity: 0; transform: translateY(1.15rem) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes transition-veil-enter {
  from { opacity: 0; clip-path: inset(50% 0 50% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes transition-copy-enter {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes transition-title-enter {
  from { opacity: 0; filter: blur(7px); transform: translateY(1.8rem) scale(.97); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes transition-ornament {
  from { opacity: 0; transform: rotate(-35deg) scale(.55); }
  55% { opacity: 1; transform: rotate(8deg) scale(1.12); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes transition-photo-left {
  from { opacity: 0; transform: translate3d(-8vw, 5vh, 0) rotate(-9deg) scale(.9); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
}

@keyframes transition-photo-top {
  from { opacity: 0; transform: translate3d(3vw, -8vh, 0) rotate(8deg) scale(.9); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(4deg) scale(1); }
}

@keyframes transition-photo-right {
  from { opacity: 0; transform: translate3d(8vw, 6vh, 0) rotate(-7deg) scale(.9); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(-3deg) scale(1); }
}

@keyframes scene-leave {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to { opacity: .35; transform: scale(1.025); filter: blur(5px); }
}

@keyframes scene-arrive {
  from { opacity: 0; filter: blur(5px); transform: scale(1.025); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes wall-mode-veil-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(12px); }
}

@keyframes wall-mode-veil-out {
  from { opacity: 1; backdrop-filter: blur(12px); }
  to { opacity: 0; backdrop-filter: blur(0); }
}

@keyframes wall-mode-content-out {
  from { opacity: 1; filter: blur(0); transform: scale(1); }
  to { opacity: .12; filter: blur(9px); transform: scale(.985); }
}

@keyframes wall-mode-content-in {
  from { opacity: .08; filter: blur(10px); transform: translateY(1rem) scale(1.012); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes wall-mode-ornament {
  from { opacity: 0; transform: rotate(-18deg) scale(.55); }
  70% { opacity: 1; transform: rotate(5deg) scale(1.08); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes wall-mode-ornament-out {
  from { opacity: 1; transform: rotate(0) scale(1); }
  to { opacity: 0; transform: rotate(18deg) scale(1.3); }
}

@keyframes wall-loop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

@keyframes image-settle {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

@keyframes spotlight-backdrop {
  0% { opacity: 0; }
  9% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes spotlight-photo-flight {
  0% { opacity: 0; transform: translate3d(0, 11vh, 0) scale(.72) rotate(-1.2deg); }
  12% { opacity: 1; transform: translate3d(0, -.8vh, 0) scale(1.018) rotate(.2deg); }
  20% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  82% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate3d(-24vw, 20vh, 0) scale(.3) rotate(-1.6deg); }
}

@keyframes spotlight-label-reveal {
  0%, 8% { opacity: 0; transform: translate3d(0, .75rem, 0); }
  16%, 78% { opacity: 1; transform: translate3d(0, 0, 0); }
  92%, 100% { opacity: 0; transform: translate3d(0, -.45rem, 0); }
}

@keyframes spotlight-image-settle {
  0%, 20% { transform: scale(1.025); }
  82%, 100% { transform: scale(1); }
}

@media (max-aspect-ratio: 4 / 3) {
  .welcome-scene {
    padding-inline: 8vw;
  }

  .welcome-content {
    width: min(84vw, 70rem);
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 28vw);
  }

  .wall-marquee {
    --wall-columns: 3 !important;
  }

  .qr-card { max-width: 42vw; }
}

@media (max-aspect-ratio: 1 / 1) {
  .welcome-scene {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14vh 5vw 4vh;
  }

  .welcome-content {
    width: 90vw;
    min-height: 82vh;
    grid-template-areas:
      "instructions"
      "qr"
      "footer";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    padding: 2rem 6vw;
  }

  .welcome-memory-prompt,
  .welcome-qr {
    justify-self: center;
    text-align: center;
  }

  .welcome-instructions {
    justify-self: center;
  }

  .welcome-timing {
    justify-items: center;
  }

  .welcome-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .welcome-memory-prompt {
    text-align: center;
  }

  .welcome-qr .qr-image {
    width: min(56vw, 20rem);
    height: min(56vw, 20rem);
  }

  .welcome-brand {
    top: 4.5vh;
    width: 90vw;
  }

  .welcome-brand-name {
    font-size: clamp(1.75rem, 6vw, 3.3rem);
  }

  .welcome-brand-ampersand {
    font-size: clamp(2.3rem, 8vw, 4.2rem);
  }

  .welcome-countdown-row {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .wall-marquee {
    --wall-columns: 2 !important;
    padding-top: 11vh;
  }

  .transition-memory-1,
  .transition-memory-2,
  .transition-memory-3 {
    width: 44vw;
    opacity: .45;
  }

  .transition-memory-1 { left: -14vw; }
  .transition-memory-2 { right: -13vw; }
  .transition-memory-3 { right: -14vw; }

  .wall-scene .qr-card,
  .slideshow-scene .qr-card {
    right: 5vw;
    bottom: 5vh;
  }

  .qr-card {
    max-width: 62vw;
    padding: .55rem;
  }

  .wall-scene .qr-image {
    width: clamp(11.25rem, 18vw, 15rem);
    height: clamp(11.25rem, 18vw, 15rem);
  }

  .spotlight-overlay { padding: 18vh 9vw; }
  .spotlight-overlay .feature-frame { width: 82vw; height: 58vh; }
}

@media (max-height: 800px) and (min-aspect-ratio: 4 / 3) {
  .welcome-scene {
    padding: 12vh 7vw 5vh;
  }

  .welcome-content {
    width: min(86vw, 76rem);
    min-height: 0;
    height: 76vh;
    column-gap: clamp(1.75rem, 4vw, 4.5rem);
    row-gap: clamp(.75rem, 1.7vh, 1.2rem);
    padding-block: clamp(.75rem, 2vh, 1.5rem);
  }

  .welcome-instructions-title {
    font-size: clamp(2.3rem, 4.9vw, 3.75rem);
  }

  .welcome-steps {
    gap: clamp(.55rem, 1.1vh, .8rem);
    margin-top: clamp(.8rem, 1.8vh, 1.25rem);
  }

  .welcome-step-title {
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  }

  .welcome-qr .qr-image {
    width: clamp(12rem, 19vw, 16rem);
    height: clamp(12rem, 19vw, 16rem);
  }

  .welcome-content .welcome-countdown {
    font-size: clamp(2rem, 3.4vw, 3.5rem);
  }

  .welcome-content .welcome-countdown-unit {
    font-size: clamp(1.1rem, 1.8vw, 1.75rem);
  }
}

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

  .spotlight-overlay .feature-frame,
  .spotlight-label,
  .spotlight-photo {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .wall-pass[aria-hidden="true"] {
    display: none;
  }

  .scene-transition,
  .transition-kicker,
  .transition-title,
  .transition-ornament,
  .transition-memory,
  .is-transitioning > :not(.scene-transition):not(.display-debug-overlay),
  .is-scene-entering > :not(.display-debug-overlay),
  .is-wall-mode-leaving > :not(.wall-mode-transition):not(.display-debug-overlay),
  .is-wall-mode-entering > :not(.wall-mode-transition):not(.display-debug-overlay) {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    animation: none !important;
  }

  .wall-mode-transition {
    animation: none !important;
  }

  .wall-mode-transition.is-revealing {
    opacity: 0 !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Wedding chapters stay inside LIVE_WALL: a cinematic veil leads each narrative beat. */
.moment-interlude {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  isolation: isolate;
  color: #fffaf4;
  background: #241917;
}

.has-moment-interlude .wall-identity,
.has-moment-interlude .wall-scene > .qr-card,
.has-moment-interlude .wall-scene > .photo-counter {
  opacity: 0;
  visibility: hidden;
}

.moment-interlude.moment-theme-look {
  --moment-glow: 174 52 76;
  --moment-deep: 58 14 26;
  --moment-final-ink: #3b171d;
  --moment-final-accent: #a13f53;
}

.moment-interlude.moment-theme-ceremonia {
  --moment-glow: 151 170 137;
  --moment-deep: 46 38 32;
  --moment-final-ink: #302923;
  --moment-final-accent: #8b6e5c;
}

.moment-interlude.moment-theme-brindis {
  --moment-glow: 219 157 67;
  --moment-deep: 70 38 17;
  --moment-final-ink: #392617;
  --moment-final-accent: #a46a2c;
}

.moment-interlude.moment-theme-fiesta {
  --moment-glow: 192 51 99;
  --moment-deep: 31 12 39;
  --moment-final-ink: #fff4e3;
  --moment-final-accent: #f0bd5e;
}

.moment-interlude-next_opening,
.moment-interlude-story_chapter,
.moment-interlude-current_moment_reminder {
  animation: moment-overlay-reveal 7s linear both;
  animation-delay: var(--moment-interlude-delay, 0ms);
}

.moment-interlude-next_opening::before,
.moment-interlude-next_opening::after,
.moment-interlude-story_chapter::before,
.moment-interlude-story_chapter::after,
.moment-interlude-current_moment_reminder::before,
.moment-interlude-current_moment_reminder::after {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 54%;
  content: "";
  background:
    radial-gradient(circle at 50% 45%, rgb(var(--moment-glow) / 34%), transparent 32%),
    linear-gradient(145deg, rgb(var(--moment-deep) / 98%), rgb(var(--moment-glow) / 74%));
  box-shadow: 0 0 6vw rgb(var(--moment-deep) / 52%);
  animation: moment-curtain-left 7s cubic-bezier(.65, 0, .25, 1) both;
  animation-delay: var(--moment-interlude-delay, 0ms);
}

.moment-interlude-next_opening::before,
.moment-interlude-story_chapter::before,
.moment-interlude-current_moment_reminder::before { left: 0; }

.moment-interlude-next_opening::after,
.moment-interlude-story_chapter::after,
.moment-interlude-current_moment_reminder::after {
  right: 0;
  animation-name: moment-curtain-right;
}

.moment-interlude.moment-theme-fiesta::before,
.moment-interlude.moment-theme-fiesta::after {
  background:
    radial-gradient(circle at 30% 35%, rgb(255 214 105 / 58%) 0 .35rem, transparent .5rem),
    radial-gradient(circle at 68% 62%, rgb(239 89 148 / 65%) 0 .42rem, transparent .58rem),
    linear-gradient(135deg, #711c53, #29174f 58%, #a93261);
  background-size: 5rem 5rem, 7rem 7rem, auto;
}

.moment-interlude-background,
.moment-interlude-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.moment-interlude-background {
  z-index: -2;
  object-fit: cover;
  filter: grayscale(.72) contrast(1.12) brightness(.72) sepia(.12);
  animation: moment-push-in 9s cubic-bezier(.22, .61, .36, 1) both;
}

.moment-interlude-next_opening .moment-interlude-background,
.moment-interlude-story_chapter .moment-interlude-background,
.moment-interlude-current_moment_reminder .moment-interlude-background {
  animation: moment-opening-background 7s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--moment-interlude-delay, 0ms);
}

.moment-interlude-veil {
  z-index: -1;
  background:
    radial-gradient(circle at 70% 24%, rgb(var(--moment-glow, 149 179 134) / 30%), transparent 30%),
    radial-gradient(circle at 17% 78%, rgb(var(--moment-glow, 133 54 47) / 24%), transparent 36%),
    linear-gradient(110deg, rgb(var(--moment-deep, 24 13 12) / 92%), rgb(var(--moment-deep, 24 13 12) / 52%) 55%, rgb(16 12 10 / 72%));
}

.moment-interlude-next_opening .moment-interlude-veil,
.moment-interlude-story_chapter .moment-interlude-veil,
.moment-interlude-current_moment_reminder .moment-interlude-veil {
  animation: moment-opening-veil 7s ease-in-out both;
  animation-delay: var(--moment-interlude-delay, 0ms);
}

.moment-interlude-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(88vw, 92rem);
  max-width: min(88vw, 92rem);
  gap: clamp(1rem, 2vh, 2.4rem);
  padding: 8vh 8vw;
  text-align: center;
}

.moment-interlude-kicker {
  color: #efd8c8;
  font-size: clamp(.62rem, .78vw, .95rem);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.moment-interlude-next_opening .moment-interlude-copy,
.moment-interlude-story_chapter .moment-interlude-copy,
.moment-interlude-current_moment_reminder .moment-interlude-copy {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  width: min(88vw, 92rem);
  max-width: min(88vw, 92rem);
  gap: clamp(.7rem, 1.4vh, 1.4rem);
  padding: 5vh 4vw;
  text-align: center;
  transform: translate(-50%, -50%);
  animation: moment-opening-copy-fade 7s cubic-bezier(.2, .72, .24, 1) both;
  animation-delay: var(--moment-interlude-delay, 0ms);
}

.moment-interlude-next_opening .moment-interlude-kicker,
.moment-interlude-story_chapter .moment-interlude-kicker,
.moment-interlude-current_moment_reminder .moment-interlude-kicker {
  color: #efd8c8;
  animation: none;
}

.moment-interlude-next_opening .moment-interlude-hashtag,
.moment-interlude-story_chapter .moment-interlude-hashtag,
.moment-interlude-current_moment_reminder .moment-interlude-hashtag {
  font-family: var(--font-display);
  font-size: clamp(.8rem, 1.25vw, 1.55rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  animation: none;
}

.moment-interlude-next_opening .moment-interlude-title,
.moment-interlude-story_chapter .moment-interlude-title,
.moment-interlude-current_moment_reminder .moment-interlude-title {
  max-width: 17ch;
  color: #fffaf4;
  font-size: clamp(3rem, 6.4vw, 8.6rem);
  font-style: normal;
  line-height: .92;
  animation: none;
}

.moment-interlude-next_opening .moment-interlude-ornament,
.moment-interlude-story_chapter .moment-interlude-ornament,
.moment-interlude-current_moment_reminder .moment-interlude-ornament {
  animation: moment-opening-ornament 7s ease both;
  animation-delay: var(--moment-interlude-delay, 0ms);
}

.moment-interlude-hashtag {
  color: #efd8c8;
  font-size: clamp(.75rem, 1.15vw, 1.4rem);
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  animation: moment-copy-enter 650ms 80ms cubic-bezier(.22, .61, .36, 1) both;
}

.moment-interlude-title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.2vw, 8.2rem);
  font-weight: 550;
  letter-spacing: -.06em;
  line-height: .9;
  text-wrap: balance;
  animation: moment-copy-enter 850ms 180ms cubic-bezier(.16, .76, .3, 1) both;
}

.moment-interlude-ornament {
  color: #d8a181;
  font-size: clamp(1.3rem, 2vw, 2.7rem);
  animation: transition-ornament 1.2s 440ms ease-in-out both;
}

/* Cinematic closure: designed to read as a final wedding photograph, not an app screen. */
.thank-you-scene {
  display: block;
  color: #fff;
  background: #171211;
}

.thank-you-scene::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 20%) 55%, rgb(0 0 0 / 60%)),
    linear-gradient(0deg, rgb(0 0 0 / 48%), transparent 36%);
}

.thank-you-background {
  filter: grayscale(1) contrast(1.14) brightness(.78);
  animation: thank-you-push-in 24s ease-out both;
}

.thank-you-branding,
.thank-you-date,
.thank-you-memory-count,
.thank-you-qr-panel,
.thank-you-closing {
  position: absolute;
  z-index: 2;
}

.thank-you-branding {
  top: 5vh;
  left: 5vw;
  display: grid;
  gap: .5rem;
  text-transform: uppercase;
}

.thank-you-branding-kicker {
  font-size: clamp(.65rem, .85vw, 1.05rem);
  font-weight: 750;
  letter-spacing: .2em;
}

.thank-you-monogram {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -.07em;
}

.thank-you-date {
  top: 5vh;
  right: 5vw;
  font-size: clamp(.72rem, 1vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .28em;
}

.thank-you-content {
  position: absolute;
  z-index: 2;
  inset: 18vh 12vw 15vh;
  display: grid;
  align-content: center;
  justify-items: center;
  max-width: none;
  gap: clamp(.8rem, 1.7vh, 1.8rem);
  animation: thank-you-reveal 1.2s cubic-bezier(.16, .76, .3, 1) both;
}

.thank-you-title {
  max-width: 17ch;
  color: #fff;
  font-size: clamp(3.8rem, 8vw, 11rem);
  font-weight: 520;
  line-height: .85;
}

.thank-you-names {
  margin-top: clamp(.8rem, 2vh, 2rem);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 6.8rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.05em;
}

.thank-you-subcopy {
  max-width: 52ch;
  color: rgb(255 255 255 / 88%);
  font-size: clamp(.9rem, 1.25vw, 1.55rem);
  font-weight: 550;
  line-height: 1.45;
}

.thank-you-memory-count {
  bottom: 7vh;
  left: 5vw;
  padding-left: 1rem;
  border-left: 2px solid #efd8c8;
  font-size: clamp(1rem, 1.6vw, 2.1rem);
  font-weight: 750;
  line-height: 1.15;
}

.thank-you-qr-panel,
.thank-you-closing {
  right: 5vw;
  bottom: 5vh;
}

.thank-you-qr-panel {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  width: max-content;
  align-items: center;
  max-width: min(30vw, 28rem);
  padding: clamp(.5rem, .75vw, .9rem);
  border: 1px solid rgb(255 255 255 / 23%);
  border-radius: .35rem;
  background: rgb(19 15 14 / 43%);
  backdrop-filter: blur(.55rem);
}

.thank-you-qr-panel .qr-image {
  width: clamp(7.5rem, 6.4vw, 9rem);
  height: clamp(7.5rem, 6.4vw, 9rem);
}

.thank-you-closing {
  max-width: 24ch;
  color: rgb(255 255 255 / 78%);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.55vw, 2rem);
  font-style: italic;
  text-align: right;
}

@keyframes moment-push-in {
  from { transform: scale(1.04); }
  to { transform: scale(1.12); }
}

@keyframes moment-copy-enter {
  from { opacity: 0; filter: blur(5px); transform: translateY(1.25rem); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes wall-copy-float {
  from { transform: translateY(-.12rem); }
  to { transform: translateY(.3rem); }
}

@keyframes moment-overlay-reveal {
  0% { background-color: transparent; }
  18%, 60% { background-color: rgb(var(--moment-deep) / 100%); }
  86%, 100% { background-color: transparent; }
}

@keyframes moment-curtain-left {
  0% { transform: translateX(-105%); }
  17%, 31% { transform: translateX(0); }
  50%, 100% { transform: translateX(-105%); }
}

@keyframes moment-curtain-right {
  0% { transform: translateX(105%); }
  17%, 31% { transform: translateX(0); }
  50%, 100% { transform: translateX(105%); }
}

@keyframes moment-opening-background {
  0%, 16% { opacity: 0; transform: scale(1.025); }
  26%, 64% { opacity: 1; transform: scale(1.08); }
  88%, 100% { opacity: 0; transform: scale(1.13); }
}

@keyframes moment-opening-veil {
  0%, 16% { opacity: 0; }
  27%, 64% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes moment-opening-copy-fade {
  0%, 18% { opacity: 0; filter: blur(5px); transform: translate(-50%, -46%); }
  30%, 72% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); }
  86%, 100% { opacity: 0; filter: blur(2px); transform: translate(-50%, -53%); }
}

@keyframes moment-opening-ornament {
  0%, 30% { opacity: 0; transform: scale(.6) rotate(-20deg); }
  42%, 67% { opacity: 1; transform: scale(1) rotate(0); }
  88%, 100% { opacity: 0; transform: scale(.7) rotate(20deg); }
}

@keyframes thank-you-push-in {
  from { transform: scale(1.01); }
  to { transform: scale(1.08); }
}

@keyframes thank-you-reveal {
  from { opacity: 0; transform: translateY(1.6rem); }
  to { opacity: 1; transform: translateY(0); }
}

/*
 * Smart TVs often expose older Chromium/WebKit compositors with small texture budgets.
 * Lite quality keeps the editorial composition and transform-based wall movement while
 * removing fullscreen blur, blend and per-card GPU layers that cause stalls or opaque fallbacks.
 */
html[data-display-quality="lite"] .display-root::after,
html[data-display-quality="lite"] .wall-scene::after {
  display: none;
}

html[data-display-quality="lite"] .wall-scene {
  transition: none;
}

html[data-display-quality="lite"] .wall-scene::before {
  z-index: 0;
  border-color: rgb(160 95 78 / 28%);
  background: transparent;
  box-shadow: none;
}

html[data-display-quality="lite"] .wall-identity,
html[data-display-quality="lite"] .welcome-content,
html[data-display-quality="lite"] .thank-you-qr-panel {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-display-quality="lite"] .wall-identity {
  background: var(--wall-chrome);
  box-shadow: 0 .65rem 1.6rem rgb(52 35 30 / 18%);
}

html[data-display-quality="lite"] .wall-marquee {
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-display-quality="lite"] .wall-gallery.is-lite-gallery-entering {
  animation: lite-gallery-in 260ms linear both;
}

html[data-display-quality="lite"] .wall-gallery.is-lite-gallery-leaving {
  pointer-events: none;
  animation: lite-gallery-out 260ms linear both;
}

html[data-display-quality="lite"] .wall-track,
html[data-display-quality="lite"] .wall-photo-card {
  will-change: auto;
}

html[data-display-quality="lite"] .wall-marquee.is-scrolling .wall-track {
  will-change: transform;
}

html[data-display-quality="lite"] .wall-photo-card {
  box-shadow: 0 .55rem 1.35rem rgb(63 43 37 / 22%);
}

html[data-display-quality="lite"] .wall-scene .qr-card {
  right: clamp(1rem, 3vw, 3rem);
  bottom: clamp(.8rem, 3vh, 2.5rem);
  max-width: min(26vw, 21rem);
  gap: clamp(.4rem, .7vw, .75rem);
  padding: clamp(.42rem, .65vw, .72rem);
  box-shadow: 0 .45rem 1.1rem rgb(26 26 26 / 16%);
}

html[data-display-quality="lite"] .wall-scene .qr-image {
  width: clamp(6rem, 8vw, 9rem);
  height: clamp(6rem, 8vw, 9rem);
}

html[data-display-quality="lite"] .photo-tile,
html[data-display-quality="lite"] .wall-photo-clone {
  transform: none;
}

html[data-display-quality="lite"] .wall-moment-copy,
html[data-display-quality="lite"] .slideshow-photo,
html[data-display-quality="lite"] .thank-you-background,
html[data-display-quality="lite"] .thank-you-content {
  animation: none;
}

html[data-display-quality="lite"] .moment-interlude-background,
html[data-display-quality="lite"] .thank-you-background {
  filter: none;
}

html[data-display-quality="lite"] .feature-background {
  display: none;
}

html[data-display-quality="lite"] .spotlight-overlay {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-display-quality="lite"] .spotlight-overlay .feature-frame {
  animation: lite-spotlight-photo 5s ease both;
}

html[data-display-quality="lite"] .is-transitioning > :not(.scene-transition):not(.display-debug-overlay) {
  animation: lite-scene-leave 900ms ease both;
}

html[data-display-quality="lite"] .is-scene-entering > :not(.display-debug-overlay) {
  animation: lite-scene-arrive 850ms ease both;
}

html[data-display-quality="lite"] .wall-mode-transition {
  box-shadow: none;
  animation: lite-wall-veil-in 650ms ease both;
}

html[data-display-quality="lite"] .wall-mode-transition.is-revealing {
  animation: lite-wall-veil-out 800ms ease both;
}

html[data-display-quality="lite"] .is-wall-mode-leaving > :not(.wall-mode-transition):not(.display-debug-overlay) {
  animation: lite-content-out 650ms ease both;
}

html[data-display-quality="lite"] .is-wall-mode-entering > :not(.wall-mode-transition):not(.display-debug-overlay) {
  animation: lite-content-in 800ms ease both;
}

html[data-display-quality="lite"] .moment-interlude::before,
html[data-display-quality="lite"] .moment-interlude::after {
  box-shadow: none;
}

html[data-display-quality="lite"] .moment-interlude-background {
  animation: lite-moment-background 7s ease both;
}

html[data-display-quality="lite"] .moment-interlude-copy,
html[data-display-quality="lite"] .moment-interlude-hashtag,
html[data-display-quality="lite"] .moment-interlude-title,
html[data-display-quality="lite"] .moment-interlude-ornament {
  filter: none;
}

html[data-display-quality="lite"] .moment-interlude-next_opening .moment-interlude-copy,
html[data-display-quality="lite"] .moment-interlude-story_chapter .moment-interlude-copy,
html[data-display-quality="lite"] .moment-interlude-current_moment_reminder .moment-interlude-copy {
  animation: lite-moment-copy 7s ease both;
}

@keyframes lite-scene-leave {
  from { opacity: 1; }
  to { opacity: .3; }
}

@keyframes lite-scene-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lite-wall-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lite-wall-veil-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes lite-content-out {
  from { opacity: 1; }
  to { opacity: .12; }
}

@keyframes lite-content-in {
  from { opacity: .08; }
  to { opacity: 1; }
}

@keyframes lite-spotlight-photo {
  0% { opacity: 0; transform: translateY(5vh) scale(.92); }
  15%, 84% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(3vh) scale(.96); }
}

@keyframes lite-moment-background {
  0%, 16% { opacity: 0; }
  26%, 64% { opacity: 1; }
  88%, 100% { opacity: 0; }
}

@keyframes lite-moment-copy {
  0%, 18% { opacity: 0; transform: translate(-50%, -47%); }
  30%, 72% { opacity: 1; transform: translate(-50%, -50%); }
  86%, 100% { opacity: 0; transform: translate(-50%, -52%); }
}

@keyframes lite-gallery-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lite-gallery-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-height: 800px) and (orientation: landscape) {
  html[data-display-quality="lite"] .wall-identity {
    top: 3vh;
    left: 3vw;
    max-width: min(42vw, 31rem);
    gap: .1rem;
    padding: .65rem .85rem;
  }

  html[data-display-quality="lite"] .wall-kicker {
    font-size: clamp(.52rem, .7vw, .72rem);
  }

  html[data-display-quality="lite"] .wall-event-name {
    font-size: clamp(1.35rem, 2.15vw, 2.15rem);
  }

  html[data-display-quality="lite"] .wall-moment-copy {
    margin-top: .28rem;
    font-size: clamp(.88rem, 1.25vw, 1.2rem);
  }

  html[data-display-quality="lite"] .wall-marquee {
    padding: clamp(7rem, 20vh, 9rem) 2.5vw clamp(4.5rem, 12vh, 6rem);
  }

  html[data-display-quality="lite"] .wall-marquee.is-static {
    padding-bottom: clamp(5rem, 14vh, 7rem);
  }

  html[data-display-quality="lite"] .wall-marquee.is-static .wall-photo-card {
    height: min(100%, 48vh);
  }

  html[data-display-quality="lite"] .wall-scene .qr-card {
    right: 2.5vw;
    bottom: 2.5vh;
    max-width: 22vw;
  }

  html[data-display-quality="lite"] .wall-scene .qr-image {
    width: clamp(5.25rem, 7.5vw, 6.75rem);
    height: clamp(5.25rem, 7.5vw, 6.75rem);
  }

  html[data-display-quality="lite"] .photo-counter {
    bottom: 2.5vh;
    left: 2.5vw;
    font-size: clamp(.7rem, 1vw, 1rem);
  }

  html[data-display-quality="lite"] .photo-moment-label--wall {
    padding: .42rem .56rem;
    font-size: clamp(.56rem, .72vw, .75rem);
  }
}

@media (max-width: 900px) {
  .thank-you-content { inset: 15vh 8vw 18vh; }
  .thank-you-qr-panel { max-width: 46vw; }
}

@media (prefers-reduced-motion: reduce) {
  .moment-interlude,
  .moment-interlude-background,
  .moment-interlude-copy,
  .moment-interlude-hashtag,
  .moment-interlude-title,
  .moment-interlude-ornament,
  .thank-you-background,
  .thank-you-content {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  .new-memory-preview {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}