@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap");

.final-wishes {
  --fw-ink: #5b2d8a;
  --fw-soft: #8a6aa8;
  position: relative;
  min-height: 300px;
  padding: 1.6rem .6rem 1rem;
  box-sizing: border-box;
  color: var(--fw-ink);
  font-family: "Caveat", "Segoe Print", cursive;
}
.final-wishes .fw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; }
.final-wishes .fw-item {
  display: flex; align-items: baseline; gap: .5rem;
  margin-left: var(--fw-indent);
  transform: rotate(var(--fw-tilt));
  opacity: 1;
  animation: fw-ink-in .9s ease-out var(--fw-delay) forwards;
}
.final-wishes .fw-text {
  font-size: clamp(1.55rem, 2.3vw, 2rem); font-weight: 700; line-height: 1.1;
  background: linear-gradient(transparent 70%, #e9d3f6aa 70% 92%, transparent 92%);
  padding: 0 .15em;
}
.final-wishes .fw-doodle {
  flex: none; width: 30px; height: 30px; align-self: center;
  fill: none; stroke: var(--fw-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .7;
}
@keyframes fw-ink-in {
  from { opacity: 0; transform: translateY(4px) rotate(var(--fw-tilt)); }
  to { opacity: 1; transform: rotate(var(--fw-tilt)); }
}
@media (prefers-reduced-motion: reduce) {
  .final-wishes .fw-item { animation: none; opacity: 1; }
}
@media (max-width: 767px) {
  .final-wishes { min-height: 0; padding: 1rem .4rem 2.4rem; }
  .final-wishes .fw-list { gap: 1.6rem; }
  .final-wishes .fw-item { margin-left: calc(var(--fw-indent) / 3); }
}