/* signup.html — only styles not already in account.css */
.auth-page .auth-card .field .hint { margin: 0; font-size: .8rem; text-align: start; }
.auth-page .auth-card form { gap: 12px; }
.auth-page .auth-card .msg { text-align: start; }

.congrats { position: relative; padding: 8px 0 4px; }
.congrats[hidden] { display: none; }
.congrats-title {
  font-size: clamp(2rem, 9vw, 2.6rem); margin: 6px 0 10px; line-height: 1.2;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.congrats-text { font-size: 1.1rem; font-weight: 600; line-height: 1.7; margin: 0 0 8px; color: var(--ink); }
.congrats-note { font-size: .88rem; margin: 0 0 18px; }
.congrats .btn { width: 100%; text-decoration: none; }

.congrats.show .congrats-title { animation: pop .7s var(--ease) both; }
.congrats.show .congrats-text { animation: rise .6s .15s var(--ease) both; }
.congrats.show .congrats-note, .congrats.show .btn { animation: rise .6s .3s var(--ease) both; }
.auth-card:has(.congrats.show) .auth-logo::before { animation: glow 1.8s ease-out 1; }
@keyframes pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 40% { opacity: 1; transform: translateX(-50%) scale(1.5); } 100% { opacity: .8; transform: translateX(-50%) scale(1); } }

.confetti { position: absolute; inset: -40px -10px auto; height: 220px; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
  animation: fall var(--d, 2.4s) var(--dl, 0s) cubic-bezier(.3,.6,.5,1) forwards;
}
@keyframes fall {
  0% { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
  100% { opacity: 0; transform: translate3d(var(--x, 0), 230px, 0) rotate(var(--r, 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .congrats.show .congrats-title, .congrats.show .congrats-text,
  .congrats.show .congrats-note, .congrats.show .btn,
  .auth-card:has(.congrats.show) .auth-logo::before { animation: none; }
  .confetti { display: none; }
}