/* Celebration: flat navy, four stars lighting up one by one on a thin line,
   then the passport presented as a certificate. Quiet motion only. */
.celebration { background: var(--ipsen-navy); color: #ffffff; }
.celebration .page { gap: 22px; }
.celebration h1 { color: #ffffff; font-size: 30px; }
.celebration .lead { color: rgba(255,255,255,.72); font-size: 15px; }
.eyebrow.on-dark { color: rgba(255,255,255,.6); }

.star-line { position: relative; display: flex; justify-content: space-between; padding: 0 28px; }
.star-line::before {
  content: ""; position: absolute; left: 40px; right: 40px; top: 50%; height: 1px;
  background: rgba(255,255,255,.3); transform-origin: left; animation: draw 1.2s var(--ease) .1s both;
}
.star-line .star-wrap { position: relative; z-index: 1; padding: 0 6px; background: var(--ipsen-navy); }
.star-line .star-svg { width: 26px; height: 26px; animation: light .6s var(--ease) both; }
.star-line .star-wrap:nth-child(1) .star-svg { animation-delay: .3s; }
.star-line .star-wrap:nth-child(2) .star-svg { animation-delay: .55s; }
.star-line .star-wrap:nth-child(3) .star-svg { animation-delay: .8s; }
.star-line .star-wrap:nth-child(4) .star-svg { animation-delay: 1.05s; }
@keyframes light { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }

.reveal { animation: rise .7s var(--ease) 1.2s both; }
.reveal.d1 { animation-delay: 1.35s; }
.reveal.d2 { animation-delay: 1.5s; }

.certificate { background: #ffffff; border-radius: 4px; padding: 10px; color: var(--ink); }
.certificate-inner {
  border: 1px solid var(--ink); padding: 20px 16px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.certificate .eyebrow { font-size: 9px; margin-top: 4px; }
.cert-small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.certificate-inner > .cert-small:first-of-type { margin-top: 8px; }
.cert-name { font-size: 28px; line-height: 1.15; font-weight: 700; font-style: italic; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; margin-top: 2px; }
.certificate .text-link { min-height: 32px; }
.name-field { width: 100%; margin: 2px 0 6px; }
.name-field input { min-height: 44px; text-align: center; }
.cert-stars { display: flex; gap: 6px; margin: 6px 0 2px; }
.cert-stars .star-svg { width: 12px; height: 12px; }

.celebration-actions { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.text-actions { display: flex; justify-content: center; gap: 24px; }