/* ═══════════════════════════════════════════════
   RSC ANIMATIONS — scroll reveal, counters, hovers
   ═══════════════════════════════════════════════ */

/* ── SCROLL REVEAL BASE ── */
.rsc-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.rsc-reveal.rsc-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay variants */
.rsc-delay-1 { transition-delay: 0.1s; }
.rsc-delay-2 { transition-delay: 0.2s; }
.rsc-delay-3 { transition-delay: 0.3s; }
.rsc-delay-4 { transition-delay: 0.4s; }
.rsc-delay-5 { transition-delay: 0.5s; }

/* Slide from left */
.rsc-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.rsc-slide-left.rsc-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.rsc-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.rsc-slide-right.rsc-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.rsc-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.rsc-scale.rsc-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── HERO ANIMATIONS ── */
.hero-animate-1 {
  opacity: 0;
  transform: translateY(30px);
  animation: heroIn 0.9s ease 0.2s forwards;
}
.hero-animate-2 {
  opacity: 0;
  transform: translateY(30px);
  animation: heroIn 0.9s ease 0.45s forwards;
}
.hero-animate-3 {
  opacity: 0;
  transform: translateY(30px);
  animation: heroIn 0.9s ease 0.7s forwards;
}
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── STAT COUNTER ANIMATION ── */
.stat-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 50px 120px -30px rgba(0,0,0,0.3);
}
.stat-card .num {
  transition: color 0.3s ease;
}

/* ── DIVI BOX HOVER ── */
.divi-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.divi-box:hover {
  transform: translateY(-4px);
  box-shadow: 0px 50px 120px -20px rgba(0,0,0,0.28);
}

/* ── BLURB CARD HOVER ── */
.divi-blurb {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.divi-blurb:hover {
  transform: translateY(-6px);
  box-shadow: 0px 50px 120px -20px rgba(0,0,0,0.28);
}

/* ── BLOG CARD HOVER ── */
.blog-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 50px 120px -20px rgba(0,0,0,0.28);
}

/* ── CAUSE ITEM IMAGE ZOOM ── */
.cause-item img {
  transition: transform 0.5s ease;
  overflow: hidden;
}
.cause-item:hover img {
  transform: scale(1.05);
}

/* ── BUTTON PULSE on hover ── */
.btn-gold, .btn-mint, .btn-outline {
  position: relative;
  overflow: hidden;
}
.btn-gold::after, .btn-mint::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.btn-gold:hover::after, .btn-mint:hover::after {
  transform: translateX(0);
}

/* ── SPLIT IMAGE ZOOM ── */
.split-img img {
  transition: transform 0.8s ease;
}
.split-img:hover img {
  transform: scale(1.03);
}

/* ── NAV LINK UNDERLINE ANIMATION ── */
.nav-links li a {
  position: relative;
}
.nav-links li:not(.nav-cta) a::after {
  content: '';
  position: absolute;
  bottom: 14px;
  left: 20px; right: 20px;
  height: 2px;
  background: #f3cc2d;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.nav-links li:not(.nav-cta) a:hover::after,
.nav-links li:not(.nav-cta) a.active::after {
  transform: scaleX(1);
}

/* ── FOOTER BAND ENTRANCE ── */
.footer-band {
  position: relative;
  overflow: hidden;
}
.footer-band::before {
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(38, 198, 153, 0.06);
  animation: floatBubble 8s ease-in-out infinite;
}
.footer-band::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 250px; height: 250px;
  border-radius: 50%;
  background: rgba(243, 204, 45, 0.05);
  animation: floatBubble 10s ease-in-out infinite reverse;
}
@keyframes floatBubble {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(20px, -20px); }
}

/* ── PAGE HERO ZOOM BG ── */
.page-hero img.bg {
  transition: transform 8s ease;
}
.page-hero:hover img.bg {
  transform: scale(1.04);
}

/* ── TAB BUTTON ANIMATION ── */
.tab-btn {
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.tab-btn::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: #26c699;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.tab-btn:hover::before { transform: scaleX(1); }
.tab-btn.active::before { transform: scaleX(1); }

/* ── FAQ SMOOTH OPEN ── */
details.faq > p {
  animation: faqOpen 0.3s ease;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── LOADING SHIMMER for images ── */
.cause-item img,
.blog-card img,
.split-img img,
.page-hero img.bg {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
}

/* ── SCROLL PROGRESS BAR ── */
#scroll-progress {
  position: fixed;
  top: 66px;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, #26c699, #f3cc2d);
  z-index: 999;
  width: 0%;
  transition: width 0.1s linear;
}