:root {
  color-scheme: dark;
  --midnight: #10172d;
  --navy: #202c49;
  --silver: #aebbd1;
  --soft-white: #e8eaf2;
  --muted-lavender: #c5b4d8;
  --dusty-rose: #c98f9d;
  --champagne: #d8b982;
  --moonlit-teal: #8eaaa6;
  --soft-blush: #e5c9b9;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--midnight); }

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  color: var(--soft-white);
  font-family: "DM Sans", sans-serif;
  background: var(--midnight);
}

button { font: inherit; }

.scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: 5rem 1.5rem 6rem;
  background:
    radial-gradient(ellipse 70% 57% at 52% 37%, rgba(69, 94, 131, .26) 0%, rgba(45, 60, 94, .12) 44%, transparent 76%),
    radial-gradient(ellipse 92% 72% at 50% 118%, rgba(39, 67, 84, .3), transparent 72%),
    linear-gradient(145deg, #202c49 0%, #17213a 30%, #10172d 70%, #0c1224 100%);
}

.scene::before, .scene::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.scene::before {
  inset: 0;
  z-index: 1;
  opacity: .54;
  background:
    radial-gradient(ellipse 51% 44% at 50% 47%, rgba(8, 14, 29, .4), rgba(8, 14, 29, .1) 58%, transparent 100%),
    radial-gradient(ellipse at 50% 44%, transparent 24%, rgba(5, 9, 21, .34) 100%),
    linear-gradient(90deg, rgba(6, 11, 25, .16), transparent 26%, transparent 74%, rgba(6, 11, 25, .16));
}

.scene::after {
  inset: 0;
  z-index: 1;
  opacity: .045;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.scene-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transform-origin: 70% 22%;
  animation: cinematic-zoom 78s ease-in-out infinite alternate;
  pointer-events: none;
}
.moon-glow {
  position: absolute;
  z-index: 2;
  top: 22%;
  left: 70%;
  width: clamp(250px, 29vw, 470px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, rgba(232, 234, 242, .12) 51%, rgba(216, 185, 130, .16) 60%, rgba(232, 234, 242, .04) 68%, transparent 77%);
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: moonlight-breathe 11s ease-in-out infinite alternate;
}
.water-shimmer {
  position: absolute;
  z-index: 2;
  top: 63%;
  left: 59%;
  width: 31%;
  height: 34%;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(232, 234, 242, .17) 10px, rgba(142, 170, 166, .12) 11px, transparent 13px 22px);
  -webkit-mask-image: radial-gradient(ellipse at 59% 24%, #000 0%, rgba(0, 0, 0, .78) 35%, transparent 76%);
  mask-image: radial-gradient(ellipse at 59% 24%, #000 0%, rgba(0, 0, 0, .78) 35%, transparent 76%);
  opacity: .42;
  pointer-events: none;
  animation: water-shimmer 7s ease-in-out infinite alternate;
}
.firefly-field { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.firefly-field span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f0d9a4;
  box-shadow: 0 0 5px 2px rgba(216, 185, 130, .42), 0 0 15px 4px rgba(216, 185, 130, .2);
  opacity: .48;
  animation: firefly-drift 13s ease-in-out var(--delay, 0s) infinite alternate;
}
.firefly-field span:nth-child(1) { left: 28%; top: 70%; --drift-x: 8px; --drift-y: -14px; --delay: -3s; }
.firefly-field span:nth-child(2) { left: 48%; top: 77%; --drift-x: -11px; --drift-y: -9px; --delay: -8s; }
.firefly-field span:nth-child(3) { left: 80%; top: 61%; --drift-x: 9px; --drift-y: -18px; --delay: -5s; }
.firefly-field span:nth-child(4) { left: 88%; top: 75%; --drift-x: -7px; --drift-y: -11px; --delay: -1s; }
.firefly-field span:nth-child(5) { left: 61%; top: 84%; --drift-x: 12px; --drift-y: -13px; --delay: -9s; }
.firefly-field span:nth-child(6) { left: 39%; top: 59%; --drift-x: -8px; --drift-y: -16px; --delay: -6s; }
.star-field { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.star {
  position: absolute;
  width: var(--size, 2px);
  height: var(--size, 2px);
  border-radius: 50%;
  background: var(--soft-white);
  opacity: var(--opacity, .5);
  box-shadow: 0 0 7px rgba(206, 219, 244, .24);
  animation: twinkle var(--duration, 5s) ease-in-out var(--delay, 0s) infinite alternate;
}

.horizon-glow {
  position: absolute;
  z-index: 2;
  top: 17%;
  left: 50%;
  width: min(78vw, 820px);
  height: 48%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(112, 132, 172, .105);
  filter: blur(90px);
  pointer-events: none;
  animation: ambient-drift 24s ease-in-out infinite alternate;
}

.panel {
  position: relative;
  z-index: 3;
  grid-area: 1 / 1;
  width: min(100%, 800px);
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1), visibility 0s linear .65s;
}

.landing {
  width: min(100%, 720px);
  justify-self: center;
  margin-inline: auto;
  text-align: center;
}
.panel.is-hidden { visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none; transition-delay: 0s, 0s, .65s; }
.panel.is-active { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }

.eyebrow {
  margin: 0 0 1.4rem;
  color: var(--silver);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .34em;
}

h1, h2 {
  margin: 0;
  color: var(--soft-white);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.75rem, 6.3vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.16;
  text-wrap: balance;
  text-shadow: 0 2px 38px rgba(217, 223, 236, .11);
}

h1 em, h2 em {
  color: var(--muted-lavender);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: .005em;
}

.supporting {
  margin: 1.7rem 0 2.7rem;
  color: #c4ccdc;
  font-size: clamp(.91rem, 1.8vw, 1.02rem);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1.7;
}

.enter-button {
  position: relative;
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  overflow: hidden;
  padding: .95rem 1.4rem .95rem 1.65rem;
  border: 1px solid rgba(240, 241, 248, .75);
  border-radius: 2px;
  color: #151d32;
  background: linear-gradient(112deg, #b7c3d8 0%, #eef0f7 28%, #d8deeb 58%, #aebbd1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -1px 0 rgba(70, 84, 111, .22), 0 7px 22px rgba(4, 8, 19, .17);
  cursor: pointer;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease, filter .35s ease;
}
.enter-button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 38%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  content: "";
  transition: left .65s ease;
}
.enter-button:hover, .enter-button:focus-visible {
  transform: translateY(-2px);
  border-color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 25px rgba(198, 211, 234, .24), 0 8px 24px rgba(4, 8, 19, .2);
  filter: brightness(1.04);
}
.enter-button:hover::before, .enter-button:focus-visible::before { left: 120%; }
.enter-button:focus-visible, .back-button:focus-visible { outline: 2px solid var(--soft-white); outline-offset: 5px; }
.button-arrow { position: relative; font-size: 1rem; font-weight: 400; transition: transform .3s ease; }
.enter-button:hover .button-arrow { transform: translate(2px, -2px); }
.hint { margin: 1.25rem 0 0; color: #929fb7; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1rem; font-style: italic; }

.next-screen { visibility: hidden; opacity: 0; transform: translateY(15px); }
.next-screen h2 { font-size: clamp(2.5rem, 5.5vw, 4.6rem); }
.back-button {
  padding: .7rem .2rem;
  border: 0;
  border-bottom: 1px solid rgba(205, 216, 237, .4);
  color: var(--silver);
  background: transparent;
  cursor: pointer;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.15rem;
  transition: color .25s ease, border-color .25s ease;
}
.back-button:hover { color: var(--soft-white); border-color: var(--soft-white); }

.footer {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 1.7rem;
  left: 1.5rem;
  color: #8996ad;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  letter-spacing: .05em;
  text-align: center;
}

@keyframes twinkle { from { opacity: calc(var(--opacity, .5) * .45); transform: scale(.82); } to { opacity: var(--opacity, .5); transform: scale(1.1); } }
@keyframes ambient-drift { from { transform: translate(-50%, -1.5%) scale(.96); opacity: .75; } to { transform: translate(-48%, 2%) scale(1.04); opacity: 1; } }
@keyframes cinematic-zoom { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes moonlight-breathe { from { opacity: .54; scale: .96; } to { opacity: .92; scale: 1.04; } }
@keyframes water-shimmer { from { opacity: .28; translate: 0 -2px; } to { opacity: .55; translate: 0 2px; } }
@keyframes firefly-drift { from { opacity: .28; transform: translate3d(0, 0, 0) scale(.72); } to { opacity: .88; transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.24); } }

@media (max-width: 520px) {
  .scene { padding: 4.5rem 1.25rem 5.5rem; }
  .landing { width: min(100%, 720px); margin-inline: auto; }
  .eyebrow { margin-bottom: 1.2rem; font-size: .56rem; letter-spacing: .25em; }
  h1 { font-size: clamp(2.35rem, 10.2vw, 3.25rem); line-height: 1.2; letter-spacing: -.035em; }
  .supporting { max-width: 300px; margin: 1.3rem auto 2.15rem; line-height: 1.7; }
  .enter-button { max-width: 100%; gap: .9rem; padding-inline: 1.05rem; font-size: .6rem; letter-spacing: .15em; }
  .footer { bottom: 1.2rem; font-size: .95rem; }
  .scene-art { object-position: 65% center; transform-origin: 72% 22%; animation-duration: 90s; }
  .moon-glow { top: 22%; left: 82%; width: clamp(205px, 49vw, 300px); }
  .water-shimmer { top: 64%; left: 59%; width: 38%; height: 31%; }
  .firefly-field span:nth-child(1) { left: 24%; top: 69%; }
  .firefly-field span:nth-child(2) { left: 43%; top: 81%; }
  .firefly-field span:nth-child(3) { left: 84%; top: 58%; }
  .firefly-field span:nth-child(4) { left: 91%; top: 74%; }
  .firefly-field span:nth-child(5) { left: 67%; top: 83%; }
  .firefly-field span:nth-child(6) { left: 36%; top: 57%; }
}

@media (min-width: 521px) and (max-width: 1100px) {
  .scene-art { object-position: 62% center; }
  .moon-glow { left: 75%; top: 22%; width: clamp(260px, 33vw, 380px); }
  .water-shimmer { left: 61%; width: 34%; }
}

@media (min-aspect-ratio: 1.9/1) {
  .moon-glow { top: 17%; }
}

@media (max-height: 700px) and (min-width: 521px) {
  .scene { padding-top: 3.5rem; padding-bottom: 4.5rem; }
  .supporting { margin-top: 1.1rem; margin-bottom: 1.7rem; }
}

/* Stage 2: the birthday challenge */
.next-screen .supporting { max-width: 39rem; margin-right: auto; margin-left: auto; }
.next-screen .back-button { display: block; margin: 1.35rem auto 0; }

.challenge-screen {
  width: min(100%, 880px);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(174, 187, 209, .45) transparent;
}
.challenge-layout { width: min(100%, 820px); margin-inline: auto; }
.challenge-header { margin-bottom: clamp(1rem, 3vh, 1.6rem); }
.challenge-header > .eyebrow { margin-bottom: .9rem; }
.challenge-progress { display: grid; justify-items: center; gap: .85rem; }
.progress-label, .question-kicker {
  margin: 0;
  color: var(--silver);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .24em;
}
.token-track, .reward-tokens {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.35rem, 1.3vw, .75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.challenge-token, .reward-token {
  display: grid;
  width: clamp(2rem, 4.2vw, 2.55rem);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(174, 187, 209, .34);
  border-radius: 50%;
  color: rgba(217, 223, 236, .6);
  background: rgba(16, 23, 45, .35);
  font-size: .56rem;
  letter-spacing: .04em;
  transition: color .45s ease, border-color .45s ease, background .45s ease, box-shadow .45s ease, transform .45s ease;
}
.challenge-token.is-earned, .reward-token {
  border-color: rgba(232, 234, 242, .82);
  color: #18213a;
  background: linear-gradient(145deg, #e8eaf2, #aebbd1 78%, #d8b982);
  box-shadow: 0 0 18px rgba(206, 219, 244, .28), inset 0 1px 1px rgba(255, 255, 255, .78);
  transform: translateY(-1px);
}

.question-card {
  padding: clamp(1.25rem, 4.2vw, 2.65rem);
  border: 1px solid rgba(205, 216, 237, .2);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(32, 44, 73, .69), rgba(16, 23, 45, .64));
  box-shadow: 0 24px 70px rgba(4, 8, 20, .24), inset 0 1px 0 rgba(240, 241, 248, .065);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease;
}
.question-card.is-switching { opacity: 0; transform: translateY(9px); }
.question-kicker { margin-bottom: 1rem; color: var(--muted-lavender); }
.question-text {
  max-width: 700px;
  margin: 0 auto;
  font-size: clamp(1.8rem, 4vw, 3.15rem);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.answer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin-top: clamp(1.5rem, 4vh, 2.2rem);
}
.answer-card {
  display: flex;
  min-height: 5.25rem;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(174, 187, 209, .25);
  border-radius: 5px;
  color: var(--soft-white);
  background: linear-gradient(135deg, rgba(232, 234, 242, .075), rgba(32, 44, 73, .28));
  cursor: pointer;
  text-align: left;
  line-height: 1.55;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.answer-card:not(:disabled):hover, .answer-card:focus-visible {
  border-color: rgba(217, 223, 236, .68);
  background: linear-gradient(135deg, rgba(197, 180, 216, .15), rgba(32, 44, 73, .48));
  box-shadow: 0 0 22px rgba(174, 187, 209, .12);
  transform: translateY(-2px);
}
.answer-card:focus-visible { outline: 2px solid var(--soft-white); outline-offset: 3px; }
.answer-card:disabled { cursor: default; }
.answer-card.is-selected {
  border-color: rgba(232, 234, 242, .9);
  background: linear-gradient(125deg, rgba(217, 223, 236, .2), rgba(197, 180, 216, .15), rgba(32, 44, 73, .45));
  box-shadow: 0 0 26px rgba(197, 180, 216, .16), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.answer-letter {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 1.7rem;
  place-items: center;
  border: 1px solid rgba(174, 187, 209, .48);
  border-radius: 50%;
  color: var(--silver);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  line-height: 1;
}
.answer-copy { padding-top: .05rem; font-size: .92rem; }
.answer-reaction {
  margin: 1.35rem 0 0;
  color: var(--muted-lavender);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-style: italic;
  animation: reaction-arrive .45s ease both;
}
.answer-reaction[hidden] { display: none; }

.completion-content { width: min(100%, 720px); margin-inline: auto; }
.completion-content h2 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
.completion-content .supporting { margin-right: auto; margin-left: auto; }
.reward-tokens { margin: 1.9rem 0 2rem; }
.reward-token { width: clamp(2.5rem, 5vw, 3.1rem); box-shadow: 0 0 20px rgba(206, 219, 244, .32), 0 0 42px rgba(216, 185, 130, .1), inset 0 1px 1px rgba(255, 255, 255, .82); }

@keyframes reaction-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 520px) {
  .challenge-header { margin-bottom: 1rem; }
  .challenge-header > .eyebrow { margin-bottom: .65rem; }
  .challenge-progress { gap: .65rem; }
  .token-track { gap: .35rem; }
  .challenge-token { width: 1.9rem; }
  .question-card { padding: 1.25rem 1rem; }
  .question-text { font-size: clamp(1.7rem, 7.2vw, 2.25rem); }
  .answer-list { grid-template-columns: 1fr; gap: .65rem; margin-top: 1.2rem; }
  .answer-card { min-height: auto; padding: .8rem; }
  .answer-copy { font-size: .88rem; }
  .reward-tokens { gap: .4rem; margin: 1.5rem 0; }
  .reward-token { width: 2.4rem; }
}

/* Gift opening: isolated from the shared landing and challenge styles. */
.gift-screen {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  width: auto;
  max-height: none;
  align-content: start;
  justify-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(1.5rem, 5vh, 3.5rem) clamp(1rem, 5vw, 3rem);
  color: #59465f;
  background:
    radial-gradient(ellipse 52% 40% at 50% 36%, rgba(255, 249, 245, .94), transparent 100%),
    radial-gradient(ellipse 48% 40% at 12% 88%, rgba(217, 201, 232, .66), transparent 100%),
    radial-gradient(ellipse 42% 42% at 90% 82%, rgba(216, 185, 130, .2), transparent 100%),
    linear-gradient(145deg, #f4dde3 0%, #fff9f5 50%, #d9c9e8 100%);
  isolation: isolate;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(89, 70, 95, .35) transparent;
}
.gift-screen::before,
.gift-screen::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}
.gift-screen::before {
  opacity: .45;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .8) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 24%, rgba(255, 255, 255, .7) 0 1.5px, transparent 3px),
    radial-gradient(circle at 76% 78%, rgba(216, 185, 130, .42) 0 2px, transparent 3px),
    radial-gradient(circle at 25% 75%, rgba(255, 255, 255, .7) 0 2px, transparent 3px);
  animation: gift-atmosphere 14s ease-in-out infinite alternate;
}
.gift-screen::after {
  background: linear-gradient(115deg, rgba(255, 249, 245, .12), transparent 48%, rgba(255, 255, 255, .18));
}
.gift-content {
  position: relative;
  z-index: 1;
  width: min(100%, 680px);
  margin: auto;
  text-align: center;
}
.gift-eyebrow {
  margin: 0 0 .85rem;
  color: #8a7143;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .25em;
}
.gift-heading {
  max-width: 650px;
  margin: 0 auto;
  color: #59465f;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.15rem, 4.5vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.12;
  text-wrap: balance;
}
.gift-supporting {
  max-width: 32rem;
  margin: .95rem auto 0;
  color: #705d76;
  font-size: clamp(.95rem, 1.5vw, 1.08rem);
  line-height: 1.65;
}
.gift-visual {
  position: relative;
  width: clamp(190px, 25vw, 248px);
  height: clamp(220px, 30vw, 280px);
  margin: .35rem auto .15rem;
  animation: gift-hover 4.8s ease-in-out infinite;
}
.gift-shadow {
  position: absolute;
  bottom: 7%;
  left: 18%;
  width: 64%;
  height: 10%;
  border-radius: 50%;
  background: rgba(89, 70, 95, .18);
  filter: blur(10px);
  transform: scaleX(.92);
}
.gift-box-art { position: absolute; inset: 0; }
.gift-box-base {
  position: absolute;
  z-index: 2;
  right: 15%;
  bottom: 13%;
  left: 15%;
  height: 52%;
  overflow: hidden;
  border: 1px solid rgba(191, 139, 151, .56);
  border-radius: 3px 3px 9px 9px;
  background: linear-gradient(105deg, #e8bdc9 0%, #f5dce2 21%, #edc8d2 49%, #f7e0e4 72%, #d9b0bd 100%);
  box-shadow: inset 13px 0 20px rgba(255, 249, 245, .28), inset -15px 0 24px rgba(130, 83, 99, .12), 0 20px 32px rgba(89, 70, 95, .16);
}
.gift-ribbon-vertical,
.gift-ribbon-horizontal,
.gift-lid-ribbon {
  position: absolute;
  display: block;
  overflow: hidden;
  background: linear-gradient(90deg, #a9854e 0%, #e4d09e 20%, #f5e7bf 42%, #cfad6d 67%, #edd9a4 85%, #9c7743 100%);
  box-shadow: inset 1px 0 2px rgba(255, 255, 255, .62), inset -1px 0 2px rgba(113, 82, 39, .24);
}
.gift-ribbon-vertical { top: 0; bottom: 0; left: 42%; width: 16%; }
.gift-ribbon-horizontal { top: 43%; right: 0; left: 0; height: 16%; }
.gift-lid {
  position: absolute;
  z-index: 4;
  top: 29%;
  right: 8%;
  left: 8%;
  height: 19%;
  border: 1px solid rgba(191, 139, 151, .55);
  border-radius: 6px;
  background: linear-gradient(180deg, #f9e5e8 0%, #edc8d2 72%, #d6aab8 100%);
  box-shadow: 0 12px 20px rgba(89, 70, 95, .18), inset 0 2px 3px rgba(255, 255, 255, .78), inset 0 -3px 5px rgba(130, 83, 99, .12);
  transform-origin: 50% 100%;
}
.gift-lid-ribbon { inset: 0 auto 0 42%; width: 16%; }
.gift-bow-loop {
  position: absolute;
  top: -42%;
  width: 30%;
  height: 65%;
  border: 1px solid rgba(159, 124, 65, .68);
  border-radius: 75% 75% 45% 45%;
  background: linear-gradient(135deg, #f8eac1 0%, #d5b674 38%, #f2dfae 62%, #a9854e 100%);
  box-shadow: inset 4px 3px 5px rgba(255, 255, 255, .55), 0 4px 8px rgba(89, 70, 95, .13);
}
.gift-bow-loop-left { left: 25%; transform: rotate(-32deg); }
.gift-bow-loop-right { right: 25%; transform: rotate(32deg); }
.gift-bow-tail {
  position: absolute;
  top: 14%;
  width: 18%;
  height: 62%;
  background: linear-gradient(90deg, #a9854e, #f4e4b8 42%, #d0ae6b 76%, #9c7743);
  clip-path: polygon(15% 0, 85% 0, 100% 100%, 50% 78%, 0 100%);
}
.gift-bow-tail-left { left: 37%; transform: rotate(-26deg); }
.gift-bow-tail-right { right: 37%; transform: rotate(26deg); }
.gift-bow-knot {
  position: absolute;
  z-index: 1;
  top: -25%;
  left: 50%;
  width: 17%;
  height: 43%;
  border: 1px solid rgba(159, 124, 65, .7);
  border-radius: 40%;
  background: linear-gradient(110deg, #b08e55, #f8edcc 40%, #d1ad68 75%, #9d7844);
  box-shadow: 0 2px 6px rgba(89, 70, 95, .18);
  transform: translateX(-50%);
}
.gift-light {
  position: absolute;
  z-index: 3;
  top: 55%;
  left: 50%;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 226, .98) 0%, rgba(248, 221, 157, .78) 22%, rgba(216, 185, 130, .3) 47%, transparent 72%);
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.12);
}
.gift-burst { position: absolute; z-index: 6; inset: -15%; pointer-events: none; }
.gift-spark, .gift-petal { position: absolute; top: 53%; left: 50%; opacity: 0; }
.gift-spark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff2c5;
  box-shadow: 0 0 10px 4px rgba(216, 185, 130, .58), 0 0 26px 9px rgba(216, 185, 130, .24);
}
.gift-petal {
  width: 10px;
  height: 16px;
  border-radius: 85% 15% 75% 25%;
  background: linear-gradient(145deg, #fff6f0, #e8bdc9 75%);
  box-shadow: 0 1px 5px rgba(89, 70, 95, .15);
}
.gift-spark:nth-child(1) { --gift-x: -145px; --gift-y: -82px; --gift-turn: 80deg; --gift-delay: 1.12s; }
.gift-spark:nth-child(2) { --gift-x: 138px; --gift-y: -108px; --gift-turn: -35deg; --gift-delay: 1.18s; }
.gift-spark:nth-child(3) { --gift-x: -174px; --gift-y: 27px; --gift-turn: 125deg; --gift-delay: 1.23s; }
.gift-spark:nth-child(4) { --gift-x: 183px; --gift-y: 18px; --gift-turn: 45deg; --gift-delay: 1.28s; }
.gift-spark:nth-child(5) { --gift-x: -112px; --gift-y: 137px; --gift-turn: -75deg; --gift-delay: 1.34s; }
.gift-spark:nth-child(6) { --gift-x: 121px; --gift-y: 132px; --gift-turn: 90deg; --gift-delay: 1.39s; }
.gift-spark:nth-child(7) { --gift-x: -35px; --gift-y: -164px; --gift-turn: -20deg; --gift-delay: 1.16s; }
.gift-spark:nth-child(8) { --gift-x: 34px; --gift-y: 176px; --gift-turn: 170deg; --gift-delay: 1.43s; }
.gift-petal:nth-child(9) { --gift-x: -156px; --gift-y: -150px; --gift-turn: -80deg; --gift-delay: 1.25s; }
.gift-petal:nth-child(10) { --gift-x: 157px; --gift-y: -161px; --gift-turn: 45deg; --gift-delay: 1.33s; }
.gift-petal:nth-child(11) { --gift-x: -96px; --gift-y: 178px; --gift-turn: 125deg; --gift-delay: 1.42s; }
.gift-petal:nth-child(12) { --gift-x: 98px; --gift-y: 182px; --gift-turn: -45deg; --gift-delay: 1.48s; }
.gift-open-button {
  min-height: 54px;
  padding: .95rem 1.8rem;
  border: 1px solid rgba(158, 124, 67, .76);
  border-radius: 3px;
  color: #59465f;
  background: linear-gradient(110deg, #f4e4ba 0%, #fff6df 28%, #dec58f 61%, #f5e8c8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 10px 28px rgba(89, 70, 95, .15);
  cursor: pointer;
  font: 600 .7rem "DM Sans", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: transform .3s ease, box-shadow .3s ease, opacity .45s ease;
}
.gift-open-button:hover, .gift-open-button:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 26px rgba(216, 185, 130, .4), 0 12px 30px rgba(89, 70, 95, .18);
  transform: translateY(-2px);
}
.gift-open-button:focus-visible { outline: 2px solid #59465f; outline-offset: 5px; }
.gift-screen.is-opening .gift-open-button { opacity: 0; pointer-events: none; transform: translateY(8px); }
.gift-note {
  margin: .9rem 0 0;
  color: #806d84;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
}
.gift-screen.is-opening .gift-box-art { animation: gift-anticipation .58s ease-in-out both; }
.gift-screen.is-opening .gift-ribbon-vertical { animation: gift-ribbon-slip-vertical .7s ease .62s both; }
.gift-screen.is-opening .gift-ribbon-horizontal { animation: gift-ribbon-slip-horizontal .7s ease .62s both; }
.gift-screen.is-opening .gift-lid { animation: gift-lid-lift .9s cubic-bezier(.2,.75,.25,1) .76s both; }
.gift-screen.is-opening .gift-light { animation: gift-light-bloom 1.65s cubic-bezier(.16,.72,.23,1) 1.05s both; }
.gift-screen.is-opening .gift-spark,
.gift-screen.is-opening .gift-petal { animation: gift-particle-burst 1.45s cubic-bezier(.16,.62,.25,1) var(--gift-delay) both; }

@keyframes gift-atmosphere { from { opacity: .3; transform: translateY(-.5%); } to { opacity: .48; transform: translateY(.5%); } }
@keyframes gift-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes gift-anticipation { 0%, 100% { transform: translateX(0) rotate(0); } 18% { transform: translateX(-3px) rotate(-1deg); } 40% { transform: translateX(4px) rotate(1.2deg); } 62% { transform: translateX(-2px) rotate(-.7deg); } 82% { transform: translateX(1px) rotate(.3deg); } }
@keyframes gift-ribbon-slip-vertical { to { opacity: 0; transform: translateX(-70%) rotate(-12deg); } }
@keyframes gift-ribbon-slip-horizontal { to { opacity: 0; transform: translateY(85%) scaleX(.35); } }
@keyframes gift-lid-lift { 0% { transform: translate(0, 0) rotate(0); } 60% { transform: translate(-9%, -77%) rotate(-7deg); } 100% { transform: translate(-16%, -105%) rotate(-11deg); } }
@keyframes gift-light-bloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.12); } 28% { opacity: .95; transform: translate(-50%, -50%) scale(2.8); } 72% { opacity: .9; transform: translate(-50%, -50%) scale(8.5); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(17); } }
@keyframes gift-particle-burst { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.35); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--gift-x)), calc(-50% + var(--gift-y))) rotate(var(--gift-turn)) scale(1); } }

@media (max-width: 520px) {
  .gift-screen { padding: 1.5rem 1rem; }
  .gift-content { width: min(100%, 410px); }
  .gift-heading { font-size: clamp(1.95rem, 8vw, 2.7rem); }
  .gift-supporting { max-width: 22rem; font-size: .94rem; }
  .gift-visual { width: clamp(170px, 54vw, 220px); height: clamp(200px, 64vw, 260px); margin-block: .1rem; }
  .gift-open-button { min-height: 52px; padding-inline: 1.4rem; font-size: .66rem; }
}

/* Stage 3: birthday message and illustrated keepsake */
.birthday-reveal-screen {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  width: auto;
  max-height: none;
  align-content: start;
  justify-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 3.75rem) clamp(1rem, 4vw, 3.5rem);
  color: #59465f;
  background:
    radial-gradient(ellipse 48% 34% at 76% 9%, rgba(255, 249, 245, .92), transparent 100%),
    radial-gradient(ellipse 42% 46% at 7% 91%, rgba(217, 201, 232, .72), transparent 100%),
    radial-gradient(ellipse 38% 32% at 91% 78%, rgba(216, 185, 130, .18), transparent 100%),
    linear-gradient(135deg, #f4dde3 0%, #fff9f5 51%, #d9c9e8 100%);
  text-align: left;
  isolation: isolate;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(89, 70, 95, .35) transparent;
}
.birthday-reveal-screen::before,
.birthday-reveal-screen::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}
.birthday-reveal-screen::before {
  opacity: .42;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, .75) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 28%, rgba(255, 255, 255, .65) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 76%, rgba(216, 185, 130, .48) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 84%, rgba(255, 255, 255, .55) 0 1.5px, transparent 3px);
  animation: birthday-bokeh 12s ease-in-out infinite alternate;
}
.birthday-reveal-screen::after {
  background: linear-gradient(115deg, rgba(255, 249, 245, .12), transparent 45%, rgba(255, 249, 245, .16));
}
.floating-memories {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(54vw, 650px)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(.75rem, 2vw, 2rem);
  width: min(100%, 1480px);
  min-height: calc(100svh - 8rem);
  margin: auto;
}
.birthday-copy {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.birthday-eyebrow {
  margin: 0 0 .9rem;
  color: #8a7143;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .24em;
  opacity: 1;
}
.birthday-copy h2 {
  margin: 0 0 1.4rem;
  color: #59465f;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(3rem, 5.2vw, 4.8rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-shadow: 0 2px 22px rgba(89, 70, 95, .09);
  opacity: 1;
}
.birthday-message {
  max-width: 43rem;
  margin-inline: auto;
  color: #59465f;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1rem, 1.18vw, 1.12rem);
  font-weight: 400;
  line-height: 1.72;
  opacity: 1;
}
.birthday-message p { margin: 0 0 .9rem; }
.birthday-message p:last-child {
  margin-bottom: 0;
  color: #735c79;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3em;
  font-style: italic;
  font-weight: 500;
}
.memory-figure {
  position: relative;
  z-index: 1;
  width: min(100%, clamp(156px, 22vw, 292px));
  margin: 0;
  text-align: left;
  transform: translateY(0);
}
.memory-figure--top-left { grid-column: 1; grid-row: 1; align-self: start; justify-self: start; --memory-delay: .55s; }
.memory-figure--top-right { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; --memory-delay: .7s; text-align: right; }
.memory-figure--bottom-left { grid-column: 1; grid-row: 3; align-self: end; justify-self: start; --memory-delay: .95s; }
.memory-figure--bottom-right { grid-column: 3; grid-row: 3; align-self: end; justify-self: end; --memory-delay: 1.1s; text-align: right; }
.birthday-reveal-screen.is-active .memory-figure {
  animation: memory-float 10s ease-in-out calc(var(--memory-delay) + 1.2s) infinite;
}
.memory-figure img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  filter: none;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 96% 92% at 50% 49%, #000 70%, rgba(0, 0, 0, .98) 80%, rgba(0, 0, 0, .88) 90%, rgba(0, 0, 0, .45) 97%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 92% at 50% 49%, #000 70%, rgba(0, 0, 0, .98) 80%, rgba(0, 0, 0, .88) 90%, rgba(0, 0, 0, .45) 97%, transparent 100%);
}
.memory-figure figcaption {
  margin: .3rem .1rem 0;
  color: #735c79;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(.95rem, 1.3vw, 1.12rem);
  font-style: italic;
  line-height: 1.25;
  opacity: 1;
}
.birthday-reveal-screen.is-active .birthday-eyebrow { animation: memory-text-reveal .7s .18s ease-out both; }
.birthday-reveal-screen.is-active .birthday-copy h2 { animation: memory-text-reveal .8s .3s ease-out both; }
.birthday-reveal-screen.is-active .birthday-message { animation: memory-text-reveal .8s .5s ease-out both; }
.birthday-reveal-screen.is-active .memory-figure img { animation: memory-image-reveal .9s var(--memory-delay) cubic-bezier(.2,.75,.25,1) both; }
.birthday-reveal-screen.is-active .memory-figure figcaption {
  animation: memory-caption-reveal .6s calc(var(--memory-delay) + .9s) ease-out both;
}
@keyframes birthday-bokeh { from { opacity: .28; transform: translateY(-.35%); } to { opacity: .48; transform: translateY(.35%); } }
@keyframes memory-text-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes memory-image-reveal { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: .94; transform: scale(1) translateY(0); } }
@keyframes memory-caption-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes memory-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 900px) {
  .birthday-reveal-screen { padding: 2rem 1.15rem 2.75rem; }
  .floating-memories {
    display: flex;
    flex-direction: column;
    gap: 1.45rem;
    width: min(100%, 560px);
    min-height: 0;
    margin: 0 auto;
  }
  .birthday-copy { order: 0; }
  .birthday-copy h2 { font-size: clamp(2.8rem, 8vw, 4.2rem); }
  .birthday-message { font-size: 1rem; line-height: 1.75; }
  .memory-figure,
  .memory-figure--top-left,
  .memory-figure--top-right,
  .memory-figure--bottom-left,
  .memory-figure--bottom-right {
    position: relative;
    inset: auto;
    align-self: center;
    width: min(100%, 525px);
    text-align: center;
  }
  .memory-figure--top-left { order: 1; }
  .memory-figure--top-right { order: 2; }
  .memory-figure--bottom-left { order: 3; }
  .memory-figure--bottom-right { order: 4; }
  .memory-figure figcaption { margin-top: .25rem; font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-reveal-screen .birthday-eyebrow,
  .birthday-reveal-screen .birthday-copy h2,
  .birthday-reveal-screen .birthday-message,
  .birthday-reveal-screen .memory-figure,
  .birthday-reveal-screen .memory-figure img,
  .birthday-reveal-screen .memory-figure figcaption {
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
  .birthday-reveal-screen .memory-figure { transform: none !important; }
  .birthday-reveal-screen .memory-figure img { opacity: .94; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Stage 4: editorial Birthday Edition keepsake */
.birthday-reveal-screen .keepsake-continue {
  position: relative;
  z-index: 2;
  display: block;
  margin: 1.5rem auto .25rem;
  padding: .85rem 1.1rem;
  border: 1px solid rgba(138, 113, 67, .45);
  color: #59465f;
  background: rgba(255, 249, 245, .42);
  cursor: pointer;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.birthday-reveal-screen .keepsake-continue span { margin-left: .55rem; color: #8a7143; }
.birthday-reveal-screen .keepsake-continue:hover,
.birthday-reveal-screen .keepsake-continue:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 249, 245, .8);
  box-shadow: 0 5px 22px rgba(138, 113, 67, .16);
}
.birthday-reveal-screen .keepsake-continue:focus-visible,
.birthday-keepsake-screen button:focus-visible { outline: 2px solid #8a7143; outline-offset: 4px; }

.birthday-keepsake-screen {
  position: relative;
  z-index: 4;
  display: flex;
  width: min(100%, 900px);
  max-height: calc(100% + 6.2rem);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin-block: -3.1rem;
  padding: .55rem 1rem;
  color: #59465f;
  background:
    radial-gradient(ellipse at 20% 12%, rgba(229, 201, 185, .36), transparent 42%),
    radial-gradient(ellipse at 86% 78%, rgba(197, 180, 216, .48), transparent 48%);
  scrollbar-width: thin;
  scrollbar-color: rgba(89, 70, 95, .35) transparent;
}
.keepsake-cover {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: min(100%, 570px, calc((100svh - 11rem) * .75));
  aspect-ratio: 3 / 4;
  container-type: inline-size;
  overflow: hidden;
  color: #59465f;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.88), transparent 48%),
    linear-gradient(150deg, #fff9f5 0%, #f7e9e9 51%, #e8dff0 100%);
  box-shadow: 0 22px 70px rgba(70, 49, 73, .2), 0 3px 14px rgba(70, 49, 73, .1);
  animation: keepsake-arrive .8s cubic-bezier(.2,.75,.25,1) both;
}
.keepsake-cover::before {
  position: absolute;
  z-index: 2;
  inset: 2.2%;
  border: 1px solid rgba(160, 127, 78, .42);
  content: "";
  pointer-events: none;
}
.keepsake-cover::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,249,245,.28), transparent 28%, transparent 77%, rgba(255,249,245,.42));
  content: "";
  pointer-events: none;
}
.keepsake-masthead,
.keepsake-title,
.keepsake-headlines,
.keepsake-artwork,
.keepsake-footer-label { position: absolute; z-index: 1; }
.keepsake-masthead {
  top: 6%;
  right: 8%;
  left: 8%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 2.2%;
  border-bottom: 1px solid rgba(160, 127, 78, .46);
}
.keepsake-masthead p { margin: 0; }
.keepsake-publication { font-size: 1.9cqw; font-weight: 600; letter-spacing: .2em; }
.keepsake-volume { color: #8a7143; font-size: 1.54cqw; letter-spacing: .12em; }
.keepsake-title {
  top: 12.4%;
  right: 6%;
  left: 6%;
  margin: 0;
  color: #8a7143;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.79cqw;
  letter-spacing: .17em;
  text-align: center;
}
.keepsake-headlines {
  top: 17.2%;
  right: 7%;
  left: 7%;
  text-align: center;
}
.keepsake-headlines h2 {
  color: #59465f;
  font-size: 7.58cqw;
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.06;
  text-shadow: none;
}
.keepsake-headlines h2 span { display: block; white-space: nowrap; }
.keepsake-headlines p {
  max-width: 88%;
  margin: 1.54cqw auto 0;
  color: #735c79;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 3.23cqw;
  font-style: italic;
  line-height: 1.18;
}
.keepsake-headlines p span { display: block; }
.keepsake-artwork {
  top: 39%;
  right: 7%;
  left: 7%;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, #000 70%, rgba(0,0,0,.92) 85%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, #000 70%, rgba(0,0,0,.92) 85%, transparent 100%);
}
.keepsake-artwork img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.keepsake-footer-label {
  right: 8%;
  bottom: 5%;
  left: 8%;
  margin: 0;
  color: #8a7143;
  font-size: 1.82cqw;
  font-weight: 600;
  letter-spacing: .26em;
  text-align: center;
}
.keepsake-actions { min-height: 2.8rem; text-align: center; }
.keepsake-download {
  min-height: 44px;
  padding: .78rem 1.55rem;
  border: 1px solid rgba(160, 127, 78, .72);
  border-radius: 999px;
  color: #59465f;
  background: linear-gradient(115deg, #fff9f5, #ead9d6 48%, #f5ecd9);
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 5px 18px rgba(89,70,95,.12);
  cursor: pointer;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .17em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.keepsake-download:hover { transform: translateY(-2px); background: linear-gradient(115deg, #fffdfb, #f0dfd3 48%, #f8f0df); box-shadow: 0 8px 24px rgba(89,70,95,.2); }
.keepsake-download:disabled { cursor: wait; opacity: .72; }
.keepsake-status { min-height: 1em; margin: .35rem 0 0; color: #735c79; font-size: .78rem; }
@keyframes keepsake-arrive { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Stage 5 preview: all styles stay local to its entry control and screen. */
.birthday-keepsake-screen .keepsake-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.birthday-keepsake-screen .keepsake-invitation-entry {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: .35rem;
  padding: .72rem 1.35rem;
  border: 1px solid rgba(216, 185, 130, .76);
  border-radius: 999px;
  color: #f0e7d8;
  background: linear-gradient(120deg, rgba(32, 44, 73, .94), rgba(55, 54, 79, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 0 20px rgba(216, 185, 130, .13);
  cursor: pointer;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.birthday-keepsake-screen .keepsake-invitation-entry span { color: var(--champagne); font-size: .9rem; }
.birthday-keepsake-screen .keepsake-invitation-entry:hover {
  transform: translateY(-2px);
  border-color: var(--champagne);
  background: linear-gradient(120deg, #263452, #514762);
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 0 25px rgba(216, 185, 130, .24);
}
.birthday-keepsake-screen .keepsake-invitation-entry:active { transform: translateY(0) scale(.985); }
.birthday-keepsake-screen .keepsake-invitation-entry:focus-visible,
.invitation-preview-screen button:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }

.invitation-preview-screen {
  z-index: 5;
  display: grid;
  width: min(100%, 760px);
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  color: var(--soft-white);
}
.invitation-preview-content {
  position: relative;
  width: min(100%, 630px);
  padding: clamp(2rem, 7vw, 4.4rem) clamp(1.4rem, 7vw, 4.5rem);
  border: 1px solid rgba(216, 185, 130, .28);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(197, 180, 216, .13), transparent 58%),
    linear-gradient(145deg, rgba(32, 44, 73, .73), rgba(16, 23, 45, .72));
  box-shadow: 0 20px 70px rgba(4, 8, 20, .24), inset 0 1px rgba(255, 255, 255, .06);
}
.invitation-preview-screen.is-active .invitation-preview-content { animation: invitation-preview-arrive .75s cubic-bezier(.2, .75, .25, 1) both; }
.invitation-preview-eyebrow {
  margin: 0 0 1.4rem;
  color: var(--champagne);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
}
.invitation-preview-content h2 {
  margin: 0 auto;
  color: var(--soft-white);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.16;
  text-shadow: 0 0 28px rgba(197, 180, 216, .18);
}
.invitation-preview-copy {
  max-width: 34rem;
  margin: 1.4rem auto 2rem;
  color: var(--silver);
  font-size: clamp(.95rem, 2vw, 1.08rem);
  line-height: 1.8;
}
.invitation-preview-back {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(174, 187, 209, .62);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.5;
  text-decoration: none;
  transition: color .25s ease, opacity .25s ease;
}
.invitation-preview-back:hover { color: rgba(232, 234, 242, .86); }
.invitation-preview-screen .invitation-preview-back:focus-visible {
  outline: none;
  color: var(--silver);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@keyframes invitation-preview-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.invitation-round[hidden] { display: none; }
.invitation-round { transition: opacity .24s ease, transform .24s ease; }
.invitation-round.is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.invitation-round.is-entering { opacity: 0; transform: translateY(10px); }
.invitation-round h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.3; }
.invitation-action-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  margin: 1.65rem auto 0;
  text-align: center;
  touch-action: pan-y;
}
.invitation-choice {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.05rem;
  border: 1px solid rgba(216, 185, 130, .58);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}
.invitation-choice--yes {
  justify-self: end;
  color: #f4ecdf;
  background: linear-gradient(120deg, #5c5367, #8a7143);
  box-shadow: 0 0 22px rgba(216, 185, 130, .16), inset 0 1px rgba(255,255,255,.18);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.invitation-choice--yes:hover,
.invitation-choice--yes:focus-visible { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 0 28px rgba(216,185,130,.27); }
.invitation-choice--yes:active { transform: translateY(0) scale(.98); }
.invitation-choice--yes:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
.invitation-dodge-slot {
  position: relative;
  justify-self: start;
  width: min(100%, 330px);
  height: 132px;
}
.invitation-choice--no {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(calc(-50% + var(--dodge-x, 0px)), calc(-50% + var(--dodge-y, 0px)));
  border-color: rgba(197, 180, 216, .42);
  color: #c6bad4;
  background: rgba(16, 23, 45, .66);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
  cursor: default;
  opacity: 1;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.75,.25,1);
}
.invitation-reaction {
  min-height: 1.5em;
  margin: .2rem 0 0;
  color: var(--dusty-rose);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  opacity: 0;
  transition: opacity .25s ease;
}
.invitation-reaction.is-visible { opacity: 1; }
.invitation-round-support {
  margin: 1rem 0 0;
  color: var(--muted-lavender);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
}
.invitation-genuine-eyebrow { margin: 0 0 1rem; color: var(--champagne); font-size: .68rem; font-weight: 600; letter-spacing: .24em; }
.invitation-genuine-copy,
.invitation-goodbye-copy { max-width: 37rem; margin: 1.15rem auto 0; color: var(--silver); font-size: clamp(.92rem, 1.8vw, 1.04rem); line-height: 1.8; }
.invitation-genuine-note,
.invitation-planner-note { max-width: 34rem; margin: 1rem auto 0; color: var(--muted-lavender); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.12rem; font-style: italic; line-height: 1.55; }
.invitation-genuine-choices { display: grid; justify-items: center; gap: .75rem; margin: 1.7rem auto 0; }
.invitation-genuine-choices .invitation-choice { white-space: normal; }
.invitation-genuine-choice--yes { color: #f4ecdf; background: linear-gradient(120deg, #5c5367, #8a7143); box-shadow: 0 0 22px rgba(216, 185, 130, .16), inset 0 1px rgba(255,255,255,.18); cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.invitation-genuine-choice--yes:hover,
.invitation-genuine-choice--yes:focus-visible { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 0 28px rgba(216,185,130,.27); }
.invitation-genuine-choice--yes:active { transform: translateY(0) scale(.98); }
.invitation-genuine-choice--unsure { max-width: 100%; color: var(--soft-white); background: rgba(197, 180, 216, .1); border-color: rgba(197, 180, 216, .6); cursor: pointer; transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease; }
.invitation-genuine-choice--unsure:hover,
.invitation-genuine-choice--unsure:focus-visible { transform: translateY(-1px); color: #f0e7f8; background: rgba(197, 180, 216, .18); border-color: var(--muted-lavender); }
.invitation-genuine-choice--no { min-height: auto; padding: .5rem .8rem; border: 0; border-radius: 0; color: rgba(174, 187, 209, .72); background: transparent; cursor: pointer; transition: color .22s ease, text-decoration-color .22s ease; }
.invitation-genuine-choice--no:hover,
.invitation-genuine-choice--no:focus-visible { color: var(--soft-white); text-decoration: underline; text-underline-offset: 4px; }
.invitation-genuine-choices button:focus-visible,
.invitation-goodbye-back:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
.invitation-planner-venue { margin: .85rem 0 0; color: var(--champagne); font-size: .78rem; font-weight: 600; letter-spacing: .1em; }
.invitation-planner-copy { margin-top: .55rem; font-family: "DM Sans", sans-serif; font-size: clamp(.92rem, 1.8vw, 1.04rem); font-style: normal; line-height: 1.65; }
.invitation-planner-availability { margin: .55rem 0 0; color: rgba(174, 187, 209, .72); font-size: .75rem; line-height: 1.5; }
.invitation-suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 1.25rem auto 0; }
.invitation-suggestion {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  padding: .7rem .55rem;
  border: 1px solid rgba(174, 187, 209, .25);
  border-radius: 9px;
  color: var(--soft-white);
  background: rgba(16, 23, 45, .42);
  cursor: pointer;
  font-size: .7rem;
  line-height: 1.4;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.invitation-suggestion span { color: var(--muted-lavender); font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.invitation-suggestion:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(216, 185, 130, .62); background: rgba(32, 44, 73, .72); }
.invitation-suggestion.is-selected { border-color: var(--champagne); background: rgba(216, 185, 130, .13); box-shadow: 0 0 20px rgba(216, 185, 130, .12); }
.invitation-suggestion:disabled { color: rgba(174, 187, 209, .38); background: rgba(16, 23, 45, .2); cursor: not-allowed; opacity: .58; }
.invitation-suggestion:disabled span { color: rgba(197, 180, 216, .42); }
.invitation-custom-plan { margin: 1.3rem auto 0; padding-top: 1rem; border-top: 1px solid rgba(174, 187, 209, .14); text-align: left; }
.invitation-custom-plan > label { display: block; margin-bottom: .65rem; color: var(--champagne); font-size: .65rem; font-weight: 600; letter-spacing: .15em; }
.invitation-custom-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem .75rem; align-items: center; }
.invitation-custom-fields input,
.invitation-custom-fields select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: .65rem .7rem;
  border: 1px solid rgba(174, 187, 209, .3);
  border-radius: 7px;
  color: var(--soft-white);
  color-scheme: dark;
  background: rgba(16, 23, 45, .74);
  font: inherit;
  font-size: .8rem;
}
.invitation-custom-fields input:focus-visible,
.invitation-custom-fields select:focus-visible,
.invitation-suggestion:focus-visible,
.invitation-plan-continue:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
.invitation-time-label { grid-column: 2; grid-row: 1; color: var(--silver); font-size: .75rem; }
.invitation-custom-fields input { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
.invitation-custom-fields select { grid-column: 2; grid-row: 2; }
.invitation-custom-fields select:disabled { color: rgba(174, 187, 209, .52); cursor: not-allowed; }
.invitation-date-range,
.invitation-time-help { margin: .55rem 0 0; color: rgba(174, 187, 209, .68); font-size: .72rem; line-height: 1.5; }
.invitation-plan-selection { min-height: 1.5em; margin: .9rem 0 0; color: var(--muted-lavender); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.08rem; font-style: italic; }
.invitation-plan-continue { min-height: 46px; margin-top: .55rem; padding: .75rem 1.25rem; border: 1px solid rgba(216, 185, 130, .65); border-radius: 999px; color: #f4ecdf; background: linear-gradient(120deg, #5c5367, #8a7143); cursor: pointer; font-size: .65rem; font-weight: 600; letter-spacing: .13em; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.invitation-plan-continue:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 24px rgba(216, 185, 130, .23); }
.invitation-plan-continue:disabled { cursor: not-allowed; opacity: .42; }
.invitation-review-details { display: grid; gap: .8rem; max-width: 32rem; margin: 1.5rem auto 0; text-align: left; }
.invitation-review-details div { display: grid; grid-template-columns: 5rem 1fr; gap: .8rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(174, 187, 209, .16); }
.invitation-review-details dt { color: var(--champagne); font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.invitation-review-details dd { margin: 0; color: var(--soft-white); font-size: .92rem; line-height: 1.55; }
.invitation-review-message { max-width: 36rem; margin: 1.2rem auto 0; color: var(--silver); font-size: clamp(.9rem, 1.7vw, 1rem); line-height: 1.75; }
.invitation-review-prompt { margin: 1.1rem 0 0; color: var(--soft-white); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.25rem; font-style: italic; }
.invitation-review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; margin: 1.1rem auto 0; }
.invitation-review-confirm,
.invitation-review-back { min-height: 46px; padding: .7rem 1.1rem; border: 1px solid rgba(216, 185, 130, .56); border-radius: 999px; cursor: pointer; font-size: .64rem; font-weight: 600; letter-spacing: .1em; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.invitation-review-confirm { color: #f4ecdf; background: linear-gradient(120deg, #5c5367, #8a7143); box-shadow: 0 0 20px rgba(216, 185, 130, .15); }
.invitation-review-back { color: var(--soft-white); background: rgba(16, 23, 45, .4); }
.invitation-review-confirm:hover,
.invitation-review-back:hover { transform: translateY(-1px); border-color: var(--champagne); box-shadow: 0 0 22px rgba(216, 185, 130, .17); }
.invitation-review-note { max-width: 34rem; margin: .85rem auto 0; color: rgba(174, 187, 209, .72); font-size: .76rem; line-height: 1.55; }
.invitation-review-confirm:focus-visible,
.invitation-review-back:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
.invitation-final-copy { max-width: 36rem; margin: 1.25rem auto 0; color: var(--silver); font-size: clamp(.92rem, 1.8vw, 1.04rem); line-height: 1.8; }
.invitation-final-closing { margin: 1.2rem 0 0; color: var(--muted-lavender); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; font-style: italic; }
.invitation-final-details { margin-top: 1.3rem; }
.invitation-goodbye-back { margin-top: 1.7rem; padding: .25rem 0; border: 0; color: rgba(174, 187, 209, .66); background: transparent; cursor: pointer; font-size: 10.5px; letter-spacing: .08em; transition: color .2s ease; }
.invitation-goodbye-back:hover { color: var(--silver); }
.invitation-preview-back { margin-top: 1rem; }
@media (max-width: 600px) {
  .invitation-preview-screen { padding: 1rem; }
  .invitation-preview-content { padding: 2.2rem 1.15rem; }
  .invitation-round h2 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .invitation-action-area { grid-template-columns: 1fr; gap: .2rem; margin-top: 1.1rem; }
  .invitation-choice--yes { justify-self: center; }
  .invitation-dodge-slot { justify-self: center; width: 100%; max-width: 330px; height: 108px; }
  .invitation-choice { padding-inline: .8rem; font-size: .6rem; }
  .invitation-genuine-choices { gap: .6rem; margin-top: 1.2rem; }
  .invitation-genuine-choice--unsure { line-height: 1.55; }
  .invitation-suggestions { grid-template-columns: 1fr; gap: .5rem; }
  .invitation-suggestion { min-height: 58px; }
  .invitation-custom-fields { grid-template-columns: 1fr; }
  .invitation-custom-fields input,
  .invitation-time-label,
  .invitation-custom-fields select { grid-column: 1; grid-row: auto; }
  .invitation-time-label { margin-top: .25rem; }
  .invitation-review-details div { grid-template-columns: 4.4rem 1fr; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-keepsake-screen .keepsake-invitation-entry,
  .invitation-preview-screen button,
  .invitation-round { transition: none; }
  .invitation-genuine-choices button,
  .invitation-goodbye-back { transition: none; }
  .invitation-preview-screen.is-active .invitation-preview-content { animation: none; }
  .invitation-round.is-entering { opacity: 1; transform: none; }
}

@media (max-height: 680px) and (min-width: 521px) {
  .keepsake-cover { width: min(100%, 430px, calc((100svh - 11rem) * .75)); }
}
@media (max-width: 520px) {
  .birthday-keepsake-screen {
    max-height: 100%;
    justify-content: flex-start;
    margin-block: 0;
    padding: .8rem .8rem 1rem;
  }
  .keepsake-cover { width: min(100%, 470px); }
  .keepsake-artwork { top: 40%; }
  .keepsake-actions { margin-top: .1rem; }
}
@media (max-width: 360px) {
  .keepsake-title { letter-spacing: .13em; }
}
@media (prefers-reduced-motion: reduce) {
  .keepsake-cover { animation: none; }
}