/* Support page styles */

/* Staggered fade-up entrance */
.card-body .section { animation: fade-up .5s ease-out both; }
.card-body .section:nth-child(1) { animation-delay: .05s; }
.card-body .section:nth-child(2) { animation-delay: .13s; }
.card-body .section:nth-child(3) { animation-delay: .21s; }
.card-body .section:nth-child(4) { animation-delay: .29s; }
.card-body .section:nth-child(5) { animation-delay: .37s; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero — bobbing cup + floating hearts */
.sp-hero { text-align: center; }
.sp-hero-wrap { position: relative; display: inline-block; padding: 6px 30px 0; }
.sp-cup { display: block; width: 67px; height: 90px; animation: cup-bob 2.8s ease-in-out infinite; }
.sp-heart {
  position: absolute; bottom: 26px; font-size: .95rem;
  opacity: 0; pointer-events: none;
  animation: heart-float 4s ease-in infinite;
}
.sp-heart-1 { left: -4px; }
.sp-heart-2 { right: -2px; animation-delay: 1.3s; }
.sp-heart-3 { left: 50%; animation-delay: 2.6s; }
@keyframes cup-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes heart-float {
  0%   { opacity: 0; transform: translateY(0) scale(.7); }
  30%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.1); }
}

/* Thank-you letter — warm cream card */
.letter-box {
  background: linear-gradient(135deg, #fff8e6, #fff1d6);
  border: 2px solid #f5a623; border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.letter-title { font-size: 1rem; color: #8a5c00; font-weight: 700; margin-bottom: 10px; }
.letter-body  { font-size: .87rem; color: #7a5200; line-height: 1.65; }
.letter-body + .letter-body { margin-top: 10px; }
.letter-sign  { font-size: .84rem; color: #8a5c00; font-style: italic; text-align: right; margin-top: 12px; }

/* What your support goes toward */
.goes-rows { display: flex; flex-direction: column; gap: 10px; }
.goes-row {
  display: flex; align-items: center; gap: 14px;
  background: #f4f7fb; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.goes-row .gr-ico { font-size: 1.5rem; flex-shrink: 0; }
.goes-row .gr-txt { font-size: .86rem; color: #444; line-height: 1.5; }

/* Ko-fi CTA */
.cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px;
  background: linear-gradient(135deg, #cc0001, #e00001);
  color: #fff; border-radius: 12px; text-decoration: none;
  font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(204,0,1,.28);
  transition: transform .15s, box-shadow .15s;
}
.cta-btn:hover  { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(204,0,1,.38); }
.cta-btn:active { transform: scale(.98); }
.cta-btn .cta-cup { display: inline-block; animation: cup-bounce 1.6s ease-in-out infinite; }
@keyframes cup-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-4px); }
  60%      { transform: translateY(4px); }
}
.cta-cap { font-size: .82rem; color: #777; text-align: center; margin-top: 12px; }

/* Other ways to help */
.help-cards { display: flex; flex-direction: column; gap: 10px; }
.help-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: #f4f7fb; border-radius: 12px; padding: 16px 18px;
  text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: transform .15s, box-shadow .15s;
}
.help-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.help-card .hc-ico { font-size: 1.5rem; flex-shrink: 0; }
.help-card .hc-body strong { display: block; font-size: .9rem; color: #003580; margin-bottom: 3px; }
.help-card .hc-body span   { font-size: .82rem; color: #555; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .card-body .section, .sp-cup, .sp-heart, .cta-btn .cta-cup { animation: none; }
  .card-body .section { opacity: 1; }
  .sp-heart { opacity: 0; }
  .cta-btn, .help-card { transition: none; }
}