:root {
  --bg-top: #fde8ee;
  --bg-bottom: #fff6ea;
  --ink: #5a3446;
  --ink-soft: #8d6577;
  --rose: #e9849f;
  --rose-deep: #d0607f;
  --card: rgba(255, 255, 255, 0.72);
  --cloud: #ffffff;
  --star: #f6c96b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg-top) 0%, #fdeff2 45%, var(--bg-bottom) 100%);
  background-color: var(--bg-top);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  display: grid;
  place-items: center;
  padding: 48px 16px;
  position: relative;
}

/* drifting clouds */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.cloud {
  position: absolute;
  width: 160px; height: 52px;
  background: var(--cloud);
  border-radius: 60px;
  opacity: .85;
  filter: drop-shadow(0 6px 10px rgba(233, 132, 159, .12));
  animation: drift linear infinite;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: var(--cloud); border-radius: 50%;
}
.cloud::before { width: 70px; height: 70px; top: -34px; left: 26px; }
.cloud::after  { width: 52px; height: 52px; top: -22px; left: 82px; }
.c1 { top: 9%;  animation-duration: 70s; animation-delay: -10s; transform: scale(.9); }
.c2 { top: 32%; animation-duration: 95s; animation-delay: -60s; transform: scale(.6); opacity: .7; }
.c3 { top: 72%; animation-duration: 80s; animation-delay: -35s; transform: scale(.75); }
.c4 { top: 88%; animation-duration: 110s; animation-delay: -80s; transform: scale(.5); opacity: .6; }
@keyframes drift {
  from { left: -220px; }
  to   { left: calc(100% + 220px); }
}

.star {
  position: absolute;
  color: var(--star);
  font-size: 18px;
  animation: twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.8) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.1) rotate(15deg); }
}

/* card */
main {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px;
  background: var(--card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 36px;
  padding: 56px 32px 40px;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(208, 96, 127, .35);
  animation: rise 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.moon {
  width: 104px; height: 104px; margin: 0 auto 22px;
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-8px) rotate(4deg); }
}

.hello {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--rose-deep);
  letter-spacing: .02em;
}
h1 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100;
  font-weight: 650;
  font-size: clamp(44px, 12.5vw, 88px);
  white-space: nowrap;
  line-height: 1;
  margin: 6px 0 22px;
  color: var(--ink);
  text-wrap: balance;
}
h1 .name { color: var(--rose-deep); }

.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 auto;
  text-wrap: pretty;
}
.lede strong { font-weight: 700; white-space: nowrap; }
.lede .parents { font-size: 1.12em; }

.birth {
  margin: 30px auto 0;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 28px;
  border-radius: 22px;
  background: #fff;
  border: 2px dashed #f3b9c8;
}
.birth .label {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.birth .date {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 100;
  font-size: 26px; font-weight: 600; color: var(--ink);
}

.age {
  margin-top: 22px;
  font-size: 16px;
  color: var(--ink-soft);
  min-height: 1.5em;
}
.age b { color: var(--rose-deep); font-weight: 700; font-variant-numeric: tabular-nums; }

.hearts { margin-top: 26px; font-size: 20px; letter-spacing: 10px; }
.hearts span { display: inline-block; animation: beat 1.6s ease-in-out infinite; }
.hearts span:nth-child(2) { animation-delay: .2s; }
.hearts span:nth-child(3) { animation-delay: .4s; }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.25); }
}

footer {
  position: relative; z-index: 1;
  margin-top: 28px;
  font-size: 14px; color: var(--ink-soft);
  text-align: center;
}

/* star positions (kept out of style="" so the CSP needs no unsafe-inline) */
.s1 { top:14%; left:12%; }
.s2 { top:22%; left:84%; animation-delay:.8s;  font-size:14px; }
.s3 { top:58%; left:6%;  animation-delay:1.6s; font-size:12px; }
.s4 { top:64%; left:90%; animation-delay:.4s; }
.s5 { top:84%; left:20%; animation-delay:2.2s; font-size:14px; }
.s6 { top:6%;  left:58%; animation-delay:1.2s; font-size:12px; }

@media (max-width: 480px) {
  main { padding: 44px 22px 32px; border-radius: 28px; }
  .lede { font-size: 17px; }
  .birth .date { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}