/* =========================================
   IBHHR Ministries — animations.css
   Page-wide animation library
   ========================================= */

/* -------------------------------------------------------
   PAGE ENTRANCE
------------------------------------------------------- */
body {
  animation: pageFadeIn 0.5s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -------------------------------------------------------
   PAGE HERO — inner pages
------------------------------------------------------- */
.page-hero h1 {
  animation: slideInDown 0.75s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.page-hero p {
  animation: slideInDown 0.75s cubic-bezier(0.22,1,0.36,1) 0.25s both;
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------
   SCROLL REVEAL BASE
------------------------------------------------------- */
.reveal-ready {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-ready.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- Reveal from left --- */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* --- Reveal from right --- */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* --- Reveal scale up --- */
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* -------------------------------------------------------
   CARD HOVER EFFECTS
------------------------------------------------------- */
.service-card,
.location-card,
.leader-card,
.tier-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.service-card:hover,
.location-card:hover,
.leader-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* --- Sliding bottom accent bar on cards --- */
.service-card,
.location-card {
  position: relative;
  overflow: hidden;
}
.service-card::after,
.location-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.service-card:hover::after,
.location-card:hover::after {
  transform: scaleX(1);
}

/* --- Leader avatar spin on hover --- */
.leader-avatar {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.leader-card:hover .leader-avatar {
  transform: rotate(8deg) scale(1.1);
}

/* -------------------------------------------------------
   HISTORY PAGE — timeline
------------------------------------------------------- */
.timeline-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.timeline-item.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* -------------------------------------------------------
   MISSION PAGE — pillar cards
------------------------------------------------------- */
.pillar-card {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
}
.pillar-card.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.pillar-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}

/* -------------------------------------------------------
   PRAYER PAGE — form field focus glow
------------------------------------------------------- */
.contact-form input,
.contact-form textarea,
.contact-form select {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  transform: translateY(-1px);
}

/* -------------------------------------------------------
   DONATION PAGE — tier card pop on select
------------------------------------------------------- */
.tier-card.selected {
  animation: tierPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes tierPop {
  from { transform: scale(1); }
  50%  { transform: scale(1.06) translateY(-6px); }
  to   { transform: scale(1) translateY(-4px); }
}

/* -------------------------------------------------------
   VISION PAGE — list items stagger
------------------------------------------------------- */
.vision-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.vision-item.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* -------------------------------------------------------
   LEADERSHIP PAGE — grid stagger pop-in
------------------------------------------------------- */
.leader-card {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.3,0.64,1),
              box-shadow 0.28s ease;
}
.leader-card.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* -------------------------------------------------------
   RIPPLE BUTTON
------------------------------------------------------- */
.btn {
  overflow: hidden;
  position: relative;
}
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleAnim 0.55s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* -------------------------------------------------------
   PROGRESS BAR GLOW
------------------------------------------------------- */
#scroll-progress {
  box-shadow: 0 0 8px rgba(200,146,42,0.7);
}

/* -------------------------------------------------------
   BACK-TO-TOP hover
------------------------------------------------------- */
#back-to-top:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(200,146,42,0.4) !important;
}

/* -------------------------------------------------------
   FOOTER link indent
------------------------------------------------------- */
.footer-links ul li a {
  transition: padding-left 0.2s ease, color 0.2s ease;
}
.footer-links ul li a:hover {
  padding-left: 6px;
}

/* -------------------------------------------------------
   HEADER scrolled accent
------------------------------------------------------- */
#site-header.scrolled {
  border-bottom: 2px solid var(--color-accent);
}

/* -------------------------------------------------------
   IMAGE WIPE REVEAL
------------------------------------------------------- */
.col-image {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77,0,0.18,1);
}
.col-image.img-wipe {
  clip-path: inset(0 0% 0 0);
}

/* -------------------------------------------------------
   PULSE-IN (scripture sections)
------------------------------------------------------- */
.pulse-in {
  animation: pulseBg 0.7s ease;
}
@keyframes pulseBg {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.1); }
  100% { filter: brightness(1); }
}

/* -------------------------------------------------------
   NAV active dot
------------------------------------------------------- */
.nav-list > li > a.active::after {
  content: '';
  display: block;
  width: 4px; height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
  margin: 2px auto 0;
}

/* -------------------------------------------------------
   HERO zoom loop
------------------------------------------------------- */
.hero {
  animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { background-size: 105%; }
  to   { background-size: 110%; }
}

/* -------------------------------------------------------
   FLOATING PARTICLES (injected by JS)
------------------------------------------------------- */
@keyframes floatParticle {
  0%   { transform: translateY(0) translateX(0) scale(1);     opacity: 0.6; }
  50%  { transform: translateY(-30px) translateX(15px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-60px) translateX(-10px) scale(0.8); opacity: 0.3; }
}

/* -------------------------------------------------------
   PAGE CONTENT — headings draw-in underline
------------------------------------------------------- */
.page-content h2 {
  position: relative;
  display: inline-block;
}
.page-content h2::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width 0.5s ease 0.2s;
}
.page-content h2.revealed::after {
  width: 100%;
}

/* -------------------------------------------------------
   QUOTE BLOCK float
------------------------------------------------------- */
blockquote {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
blockquote:hover {
  transform: translateY(-3px);
}

/* -------------------------------------------------------
   SECTION entrance shimmer overlay (once)
------------------------------------------------------- */
.section-shimmer {
  position: relative;
  overflow: hidden;
}
.section-shimmer::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: shimmerSlide 1s ease forwards;
  pointer-events: none;
  z-index: 1;
}
@keyframes shimmerSlide {
  from { left: -100%; }
  to   { left: 150%; }
}