/* ── KEYFRAMES ── */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes bounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
  }
  
  /* ── Donation Coming Soon Fade-In ── */
  .py-5.bg-light.text-center {
    animation: fadeIn 1s ease-out forwards;
  }
  
  /* ── Card Hover Lift & Shadow ── */
  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  }
  
  /* ── Support the Sanctuary Icons Bounce ── */
  .py-5.bg-light .d-flex img {
    display: block;
    animation: bounce 2.5s infinite ease-in-out;
  }
  
  /* ── Support Section Text Fade-In ── */
  .py-5.bg-light .container > h2,
  .py-5.bg-light .container > .row.g-4 .d-flex > div {
    opacity: 0;
    animation: fadeIn 1s ease-out forwards;
  }
  .py-5.bg-light .container > h2 {
    animation-delay: 0.2s;
  }
  .py-5.bg-light .container > .row.g-4 .d-flex:nth-child(1) > div {
    animation-delay: 0.4s;
  }
  .py-5.bg-light .container > .row.g-4 .d-flex:nth-child(2) > div {
    animation-delay: 0.6s;
  }
  /* ── Add extra gap under the “Support the Sanctuary in Other Ways” heading ── */
.py-5.bg-light .row.g-4 {
    margin-top: 2rem;
  }
  
  /* ── Scroll‑triggered slide‑up for “What Your Gift Provides” ── */
  /* remove any on‑load slideUp animations */
  .py-5 > .container > .row.g-4 > .col-md-4 {
    animation: none !important;
  }
  
  /* base hidden state */
  .py-5 .row.g-4 .col-md-4.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  /* staggered delays when .visible is added */
  .py-5 .row.g-4 .col-md-4.fade-in-on-scroll:nth-of-type(1).visible {
    transition-delay: 0.2s;
  }
  .py-5 .row.g-4 .col-md-4.fade-in-on-scroll:nth-of-type(2).visible {
    transition-delay: 0.4s;
  }
  .py-5 .row.g-4 .col-md-4.fade-in-on-scroll:nth-of-type(3).visible {
    transition-delay: 0.6s;
  }
  
  /* final visible state */
  .py-5 .row.g-4 .col-md-4.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* ── Scroll‑triggered slide‑in for section titles ── */
.py-5 .container > h2.fade-in-on-scroll {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  
  /* Reverse direction for the bg‐light section */
  .py-5.bg-light .container > h2.fade-in-on-scroll {
    transform: translateX(30px);
  }
  
  /* When scrolled into view */
  .py-5 .container > h2.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateX(0);
  }