/* Reliable CSS celebration — no canvas / confetti dependency */

.celebration-page-body {
  position: relative;
  overflow-x: hidden;
}

.celebration-page-body .card {
  position: relative;
  z-index: 2;
}

.celebration-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.celebration-page-body.is-ready .celebration-backdrop {
  opacity: 1;
  transition: opacity 0.35s ease;
}

.celebration-page-body.is-ready {
  animation: celebration-bg-flash 1.4s ease-out;
}

@keyframes celebration-bg-flash {
  0% { background: #ffffff; }
  35% { background: #f0fdf8; }
  100% { background: #ffffff; }
}

.celebration-glow {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(320px, 90vw);
  height: min(320px, 90vw);
  margin: calc(min(320px, 90vw) / -2) 0 0 calc(min(320px, 90vw) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 214, 168, 0.42) 0%, rgba(93, 214, 168, 0.08) 45%, transparent 70%);
  animation: celebration-glow-pulse 2.6s ease-in-out infinite;
}

@keyframes celebration-glow-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.75; }
  50% { transform: scale(1.08); opacity: 1; }
}

.celebration-rings {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 0;
  height: 0;
}

.celebration-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 2.5px solid rgba(93, 214, 168, 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: celebration-ring-expand 2.4s ease-out infinite;
}

.celebration-ring:nth-child(2) { animation-delay: 0.55s; }
.celebration-ring:nth-child(3) { animation-delay: 1.1s; }

@keyframes celebration-ring-expand {
  0% { transform: scale(0.5); opacity: 0.85; }
  100% { transform: scale(5); opacity: 0; }
}

.celebration-sparks {
  position: absolute;
  inset: 0;
}

.celebration-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint, #5dd6a8);
  opacity: 0;
  animation: celebration-spark-burst 1.9s ease-out infinite;
}

.celebration-spark:nth-child(1) { top: 28%; left: 18%; --sx: -28px; --sy: -36px; animation-delay: 0.05s; }
.celebration-spark:nth-child(2) { top: 22%; left: 72%; --sx: 32px; --sy: -28px; animation-delay: 0.2s; background: #3fc491; }
.celebration-spark:nth-child(3) { top: 42%; left: 12%; --sx: -40px; --sy: 8px; animation-delay: 0.35s; }
.celebration-spark:nth-child(4) { top: 38%; left: 84%; --sx: 36px; --sy: 12px; animation-delay: 0.15s; }
.celebration-spark:nth-child(5) { top: 52%; left: 24%; --sx: -22px; --sy: 34px; animation-delay: 0.45s; background: #7ee8c0; }
.celebration-spark:nth-child(6) { top: 48%; left: 78%; --sx: 26px; --sy: 30px; animation-delay: 0.3s; }
.celebration-spark:nth-child(7) { top: 32%; left: 50%; --sx: 0; --sy: -44px; animation-delay: 0.1s; width: 9px; height: 9px; }
.celebration-spark:nth-child(8) { top: 58%; left: 50%; --sx: 0; --sy: 38px; animation-delay: 0.5s; width: 6px; height: 6px; }

@keyframes celebration-spark-burst {
  0% { transform: translate(0, 0) scale(0); opacity: 0; }
  12% { opacity: 1; transform: scale(1); }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
}

.celebration-stage {
  position: relative;
  min-height: 64px;
  margin-bottom: 4px;
}

.celebration-heart {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  opacity: 0;
  will-change: transform;
  color: var(--mint, #5DD6A8);
}
.celebration-heart .fi-svg {
  width: clamp(48px, 14vw, 58px);
  height: clamp(48px, 14vw, 58px);
}

.celebration-page-body.is-ready .celebration-heart,
.home-received-popup.is-ready .celebration-heart,
.scr.is-celebrating .celebration-heart {
  animation:
    celebration-heart-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    celebration-heart-beat 1.3s ease-in-out 0.72s infinite;
}

@keyframes celebration-heart-pop {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  50% { transform: scale(1.22) rotate(5deg); opacity: 1; }
  70% { transform: scale(0.94) rotate(-2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes celebration-heart-beat {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(93, 214, 168, 0)); }
  18% { transform: scale(1.16); filter: drop-shadow(0 0 14px rgba(93, 214, 168, 0.5)); }
  36% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(93, 214, 168, 0.15)); }
  52% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(93, 214, 168, 0.35)); }
  68% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(93, 214, 168, 0)); }
}

.celebration-content .flow-bounce-in {
  opacity: 0;
}

.celebration-page-body.is-ready .celebration-content .flow-bounce-in {
  animation: flow-bounce-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes flow-bounce-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* In-app sent / received screens */
.scr .celebration-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.scr.is-celebrating .celebration-backdrop {
  opacity: 1;
}

/* Creator payment-received celebration */

.received-celebration-logo,
.home-received-popup-inner .received-celebration-logo {
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 12px;
  background: var(--mint, #5dd6a8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
}

.received-celebration-hero {
  background: var(--mint, #5dd6a8);
  padding: 24px 24px 28px;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.received-celebration-headline {
  font-size: clamp(24px, 6.5vw, 30px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 8px 0 10px;
}

.received-celebration-amount {
  font-size: clamp(48px, 14vw, 64px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
  margin: 0 0 12px;
}

.received-celebration-sub {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  margin: 0;
}

.received-celebration-first {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.received-celebration-body {
  padding: 20px 24px;
  position: relative;
  z-index: 1;
  flex: 1;
}

.received-celebration-message {
  background: var(--mint-light, #e8faf3);
  border: 1px solid rgba(93, 214, 168, 0.4);
  border-radius: 16px;
  padding: 14px 16px;
  text-align: left;
}

.received-celebration-message-label,
.home-received-popup-message-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mint-dark, #3fc491);
  margin-bottom: 6px;
}

.received-celebration-message-text,
.home-received-popup-message {
  font-size: 15px;
  font-weight: 600;
  font-style: italic;
  color: var(--text, #111827);
  line-height: 1.5;
  margin: 0;
}

.received-celebration-actions {
  position: relative;
  z-index: 1;
  gap: 10px;
}

.received-thanks-composer {
  text-align: left;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 16px;
  background: var(--surface, #fff);
}

.received-thanks-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text, #111827);
}

.received-thanks-input {
  width: 100%;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  resize: vertical;
  margin-bottom: 10px;
  background: var(--bg, #f8fafc);
  color: var(--text, #111827);
}

.home-received-popup-amount-hero {
  font-size: clamp(42px, 12vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--mint-dark, #3fc491);
  line-height: 1;
  margin: 4px 0 12px;
}

.home-received-popup-first {
  font-size: 14px;
  font-weight: 800;
  color: var(--mint-dark, #3fc491);
  margin: -6px 0 14px;
}

.home-received-popup-message-wrap {
  text-align: left;
  background: var(--mint-light, #e8faf3);
  border: 1px solid rgba(93, 214, 168, 0.4);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 14px;
}

.home-received-popup-sender {
  display: none;
}

/* Payer celebration — secondary guest signup */

.cel-guest-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
}

.cel-guest-note-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text, #111827);
  margin: 0 0 4px;
}

.cel-guest-note-body {
  font-size: 13px;
  font-weight: 600;
  color: var(--sub, #6b7280);
  line-height: 1.45;
  margin: 0 0 10px;
}

.cel-guest-note-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--mint-dark, #3fc491);
  text-decoration: none;
}

.cel-guest-note-link:hover {
  text-decoration: underline;
}