/* Slide 2's stable header and intentionally gentle finale transition. */
.appreciation-heading {
  position: absolute;
  z-index: 12;
  top: clamp(4.75rem, 8vh, 6.5rem);
  left: 50%;
  width: min(90vw, 48rem);
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: clamp(0.78rem, 1vw, 0.98rem);
  font-weight: 720;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 14px var(--shadow);
  transform: translateX(-50%);
  transition: opacity 500ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.scene-appreciation[data-current-beat="4"] .appreciation-heading {
  opacity: 0;
  transform: translate(-50%, -0.5rem);
}

.scene-appreciation[data-current-beat="4"] .note-four,
.scene-appreciation[data-current-beat="4"] .note-four.is-current {
  animation: slide-two-finale-settle 1100ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

.scene-appreciation[data-current-beat="4"] .note-four p {
  width: 100%;
  max-width: none;
  overflow: visible;
  color: #451832;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.26;
  text-shadow: 0 1px 6px rgba(255, 235, 239, 0.3);
}

.scene-appreciation[data-current-beat="4"] .note-four {
  width: min(88vw, 72rem);
  overflow: visible !important;
  border: 0 !important;
  color: #6f3159;
  background:
    radial-gradient(circle at 100% 100%, rgba(250, 207, 218, 0.82) 0%, rgba(242, 177, 197, 0.5) 21%, transparent 48%),
    radial-gradient(circle at 100% 0%, rgba(128, 48, 83, 0.42) 0%, rgba(159, 72, 107, 0.28) 28%, transparent 58%),
    linear-gradient(135deg, rgba(224, 157, 177, 0.96) 0%, rgba(193, 111, 143, 0.95) 56%, rgba(234, 171, 190, 0.96) 100%);
}

.scene-appreciation[data-current-beat="4"] .note-four::before {
  display: none;
  animation: none !important;
}

.scene-appreciation[data-current-beat="4"] .note-four::after {
  background: radial-gradient(ellipse, rgba(237, 135, 171, 0.3), transparent 68%);
  animation: none !important;
}

.scene-appreciation[data-current-beat="4"] .appreciation-layout::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(116, 42, 75, 0.14);
  content: "";
  pointer-events: none;
}

.finale-initial {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  -webkit-text-fill-color: currentColor;
}

.finale-initial::after {
  display: none;
  content: none;
}

.key-phrase {
  display: inline-block;
  padding: 0.02em 0.18em 0.08em;
  color: #fff1f4;
  background: radial-gradient(ellipse at center, rgba(255, 232, 238, 0.3) 0%, transparent 72%);
  -webkit-text-fill-color: currentColor;
  font-family: Didot, "Bodoni MT", Baskerville, "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.025em;
  text-shadow:
    0 1px 3px rgba(76, 25, 52, 0.58),
    0 0 18px rgba(255, 225, 234, 0.72),
    0 0 36px rgba(255, 205, 221, 0.45);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Slide 2/3 gift hint. */
.pencil-bag-note {
  position: absolute;
  z-index: 10;
  bottom: clamp(5.2rem, 9vh, 7rem);
  right: clamp(1.25rem, 4vw, 4rem);
  display: grid;
  width: min(43vw, 36rem);
  min-height: 10rem;
  grid-template-columns: clamp(6rem, 9vw, 8.5rem) minmax(0, 1fr);
  gap: clamp(0.9rem, 1.7vw, 1.35rem);
  align-items: center;
  padding: clamp(0.8rem, 2vw, 1.5rem);
  border: 0;
  border-radius: 1.7rem;
  background: rgba(255, 250, 244, 0.18);
  box-shadow: none;
  backdrop-filter: none;
}

.pencil-bag-note img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 1.35rem !important;
  clip-path: inset(0 round 1.35rem);
  object-fit: contain;
}

.pencil-bag-note p {
  margin: 0;
  color: #693252;
  font-family: "Segoe Print", "Bradley Hand", var(--sans);
  font-size: clamp(0.9rem, 1.25vw, 1.12rem);
  font-weight: 600;
  line-height: 1.3;
}

.scene-appreciation .pencil-bag-note.is-current {
  animation: pencil-bag-arrive 850ms 180ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.scene-appreciation[data-current-beat="4"] .pencil-bag-note {
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
}

@keyframes pencil-bag-arrive {
  from { opacity: 0; filter: blur(5px); transform: translate3d(-1.4rem, 1rem, 0) rotate(-2deg) scale(0.94); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotate(-1deg) scale(1); }
}

@media (max-width: 620px) {
  .scene-appreciation[data-current-beat="4"] .note-four {
    width: 94vw;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .pencil-bag-note {
    bottom: 5.2rem;
    right: 4vw;
    width: min(90vw, 36rem);
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }
}

/* A lighter, more romantic opening treatment. */
.scene-opening .opening-title,
.scene-opening .opening-title span {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 18px rgba(66, 30, 60, 0.28);
}

.scene-opening .opening-name::after {
  position: absolute;
  right: 8%;
  bottom: 0.04em;
  left: 13%;
  height: 0.16em;
  border-top: 0.025em solid currentColor;
  border-bottom: 0.012em solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.72;
  transform: rotate(-2.5deg) skewX(-22deg);
}

.scene-opening .opening-name::before {
  position: absolute;
  right: 3%;
  bottom: -0.015em;
  width: 0.42em;
  height: 0.24em;
  border-bottom: 0.022em solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.68;
  transform: rotate(-12deg);
}

/* Preserve the Lilac Heart artwork's angle between slide 2 beats. */
.scene-appreciation .appreciation-artwork {
  transform: rotate(-2deg) !important;
}

.scene-appreciation .appreciation-artwork img {
  transform: none !important;
}

.scene-appreciation[data-current-beat="4"] .note-one,
.scene-appreciation[data-current-beat="4"] .note-two,
.scene-appreciation[data-current-beat="4"] .note-three {
  animation: slide-two-supporting-soften 850ms ease both !important;
}

@keyframes slide-two-finale-settle {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(1.5rem) scale(0.96);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes slide-two-supporting-soften {
  from { opacity: 0.72; }
  to { opacity: 0.28; }
}

@media (max-width: 620px) {
  .appreciation-heading {
    top: 4.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-appreciation[data-current-beat="4"] .note-four,
  .scene-appreciation[data-current-beat="4"] .note-one,
  .scene-appreciation[data-current-beat="4"] .note-two,
  .scene-appreciation[data-current-beat="4"] .note-three {
    animation: none !important;
  }
}

/* Handmade emphasis for the closing thought on slide 3. */
.handmade-emphasis {
  position: relative;
  z-index: 0;
  display: inline;
  padding: 0 0.08em 0.08em;
  font-weight: 680;
  background: linear-gradient(
    176deg,
    transparent 48%,
    rgba(255, 211, 132, 0.52) 49%,
    rgba(255, 211, 132, 0.52) 88%,
    transparent 89%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.handmade-emphasis::after {
  position: absolute;
  z-index: -1;
  right: -0.08em;
  bottom: -0.09em;
  left: -0.08em;
  height: 0.18em;
  border-top: 0.09em solid currentColor;
  border-radius: 48% 55% 42% 60%;
  content: "";
  opacity: 0.7;
  transform: rotate(-0.8deg) skewX(-10deg);
}

/* Let "In conclusion," land before the main slide 4 message. */
.scene-heart .heart-statement.is-current {
  animation-delay: 1400ms !important;
}

/* Slide 5: let the sign-off arrive as its own final gesture. */
.scene-closing:not(.is-active) .signature {
  opacity: 0;
  animation: none !important;
}

.scene-closing.is-active .signature {
  font-size: clamp(2.15rem, 3.35vw, 3.65rem);
  line-height: 1.08;
  animation: love-signature-in 1050ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms both !important;
}

@keyframes love-signature-in {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(1.5rem, 2.2rem, 0) rotate(-1deg) scale(0.9);
  }
  70% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-0.15rem, -0.1rem, 0) rotate(-5.5deg) scale(1.025);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }
}

@media (max-width: 620px) {
  .scene-closing .signature {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-closing .signature {
    opacity: 1;
    animation: none !important;
  }
}

/* Keep scene changes reliable on slow displays and constrained devices. */
body[data-performance="reduced"] *,
body[data-performance="reduced"] *::before,
body[data-performance="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}

body[data-performance="reduced"] .scene.is-entering,
body[data-performance="reduced"] .scene.is-exiting,
body[data-performance="reduced"] .scene.has-focus .beat.is-current {
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body[data-performance="reduced"] .scene.has-focus .beat.is-past {
  filter: none !important;
}

body[data-performance="reduced"] .cloud-field,
body[data-performance="reduced"] .sky-image,
body[data-performance="reduced"] .atmosphere,
body[data-performance="reduced"] .film-grain,
body[data-performance="reduced"] .travel-veil,
body[data-performance="reduced"] .travel-image,
body[data-performance="reduced"] .travel-light {
  animation: none !important;
}