/* ══════════════════════════════════════════════════════════════
   Jeevdayamai Foundation — motion.css
   Premium motion & animation layer
   ══════════════════════════════════════════════════════════════ */

/* ── 1. REVEAL SYSTEM ─────────────────────────────────────────
   Elements start hidden and animate in when scrolled into view.
   Add data-reveal="fade|up|left|right|zoom|flip" to any element.
   data-delay="100" adds stagger delay in ms.
──────────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal="down"]  { transform: translateY(-40px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="zoom"]  { transform: scale(0.88); }
[data-reveal="flip"]  { transform: perspective(600px) rotateY(18deg) translateX(32px); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── 2. HERO ENTRANCE ANIMATIONS ─────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroPillSlide {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroCardPop {
  from { opacity: 0; transform: translateY(32px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-pill         { animation: heroPillSlide 0.6s cubic-bezier(0.16,1,0.3,1) 0.15s both; }
.hero-h1           { animation: heroFadeUp    0.8s cubic-bezier(0.16,1,0.3,1) 0.3s  both; }
.hero-desc         { animation: heroFadeUp    0.8s cubic-bezier(0.16,1,0.3,1) 0.48s both; }
.hero-actions      { animation: heroFadeUp    0.8s cubic-bezier(0.16,1,0.3,1) 0.62s both; }
.hero-trust-row    { animation: heroFadeUp    0.8s cubic-bezier(0.16,1,0.3,1) 0.74s both; }

.hero-stat-card:nth-child(1) { animation: heroCardPop 0.7s cubic-bezier(0.16,1,0.3,1) 0.5s  both; }
.hero-stat-card:nth-child(2) { animation: heroCardPop 0.7s cubic-bezier(0.16,1,0.3,1) 0.65s both; }
.hero-stat-card:nth-child(3) { animation: heroCardPop 0.7s cubic-bezier(0.16,1,0.3,1) 0.8s  both; }
.hero-stat-card:nth-child(4) { animation: heroCardPop 0.7s cubic-bezier(0.16,1,0.3,1) 0.95s both; }

.hero-scroll { animation: heroFadeUp 1s ease 1.2s both; }

/* ── 3. BUTTON PREMIUM HOVER & ACTIVE ───────────────────────── */
.ha-primary,
.ha-secondary,
.asc-btn-primary,
.asc-btn-outline,
.vcta-btn-primary,
.vcta-btn-ghost,
.acta-btn,
.nav-donate-btn,
.uec-register-btn,
.float-donate-btn {
  position: relative;
  overflow: hidden;
}
.ha-primary::after,
.ha-secondary::after,
.asc-btn-primary::after,
.vcta-btn-primary::after,
.acta-btn.acta-primary::after,
.nav-donate-btn::after,
.uec-register-btn::after,
.float-donate-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}
.ha-primary:hover::after,
.ha-secondary:hover::after,
.asc-btn-primary:hover::after,
.vcta-btn-primary:hover::after,
.acta-btn.acta-primary:hover::after,
.nav-donate-btn:hover::after,
.uec-register-btn:hover::after,
.float-donate-btn:hover::after {
  transform: translateX(100%);
}

/* Scale-down on click (active) */
.ha-primary:active,
.vcta-btn-primary:active,
.acta-btn.acta-primary:active,
.uec-register-btn:active { transform: scale(0.97); }

/* ── 4. CARD TILT / 3D LIFT (applied via JS) ────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.35s ease;
}
.tilt-card:hover {
  box-shadow: 0 28px 60px rgba(0,0,0,.18);
}
/* Inner content lifts slightly in Z */
.tilt-card-inner {
  transform: translateZ(12px);
  transition: transform 0.15s ease;
}

/* ── 5. FLOATING BADGE ANIMATIONS ───────────────────────────── */
@keyframes floatY {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(0.5deg); }
  66%       { transform: translateY(-6px) rotate(-0.3deg); }
}
@keyframes floatY2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(-0.4deg); }
}
.abs-floating-card   { animation: floatY  5s ease-in-out infinite !important; }
.abs-floating-card-2 { animation: floatY2 6s ease-in-out 1s infinite !important; }

/* ── 6. PROGRAMS CARD SEQUENTIAL STAGGER ─────────────────────── */
.pgn-card { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, background 0.3s, box-shadow 0.4s !important; }
.pgn-card:hover { transform: translateY(-10px) scale(1.02) !important; box-shadow: 0 24px 52px rgba(0,0,0,.28) !important; }

/* Icon spin on hover */
.pgn-card:hover .pgn-icon i {
  animation: iconSpin 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes iconSpin {
  from { transform: rotate(-20deg) scale(0.8); }
  to   { transform: rotate(0deg) scale(1); }
}

/* ── 7. SECTION TITLE UNDERLINE DRAW ─────────────────────────── */
.section-title-lined {
  position: relative;
  display: inline-block;
}
.section-title-lined::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 3px;
  background: var(--orange);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
.section-title-lined.is-visible::after { width: 100%; }

/* ── 8. TESTIMONIAL CARD STAGGER ─────────────────────────────── */
.testi-card {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), background 0.3s, border-color 0.3s !important;
}
.testi-card:hover { transform: translateY(-8px) !important; }

/* Quote mark pulse on hover */
.testi-card:hover .testi-ql i {
  animation: quotePulse 0.4s ease;
}
@keyframes quotePulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.4) rotate(-8deg); color: #7ee8a2; }
}

/* ── 9. GALLERY ITEM ZOOM + OVERLAY ──────────────────────────── */
.gng-item {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s !important;
}
.gng-item:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 48px rgba(0,0,0,.25);
  z-index: 2;
}
.gng-item img {
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
}
.gng-overlay {
  transition: opacity 0.4s ease !important;
}
.gng-overlay span {
  transform: translateY(8px);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.gng-item:hover .gng-overlay span { transform: translateY(0); }

/* ── 10. STATS STRIP COUNTER GLOW ────────────────────────────── */
@keyframes statGlow {
  0%,100% { text-shadow: none; }
  50%     { text-shadow: 0 0 24px rgba(157,232,184,.8), 0 0 48px rgba(157,232,184,.4); }
}
.stat-number.is-counting { animation: statGlow 1.8s ease infinite; }

/* ── 11. MARQUEE HOVER PAUSE ─────────────────────────────────── */
.marquee-track:hover .marquee-content { animation-play-state: paused; }

/* Marquee shimmer label */
@keyframes labelPulse {
  0%,100% { background: rgba(0,0,0,.2); }
  50%     { background: rgba(0,0,0,.35); }
}
.marquee-label { animation: labelPulse 3s ease-in-out infinite; }

/* ── 12. NAV LOGO HOVER WOBBLE ───────────────────────────────── */
@keyframes logoWobble {
  0%,100% { transform: rotate(0deg) scale(1); }
  20%     { transform: rotate(-3deg) scale(1.05); }
  60%     { transform: rotate(2deg) scale(1.05); }
  80%     { transform: rotate(-1deg) scale(1.02); }
}
.logo-wrap:hover img { animation: logoWobble 0.5s ease; }

/* ── 13. HEART ICON PULSE on donate buttons ───────────────────── */
@keyframes heartBeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.3); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.2); }
  70%     { transform: scale(1); }
}
.ha-primary:hover i,
.vcta-btn-primary:hover i,
.acta-btn.acta-primary:hover i,
.footer-donate-btn:hover i,
.float-donate-btn:hover i {
  animation: heartBeat 0.8s ease;
}

/* ── 14. EVENT CARDS IMAGE PARALLAX-STYLE ────────────────────── */
.en-card { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s !important; }
.en-card:hover { transform: translateY(-10px) !important; box-shadow: 0 24px 56px rgba(0,0,0,.14) !important; }

/* ── 15. SCROLL PROGRESS BAR ────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-mid), var(--orange));
  width: 0%;
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(232,86,42,.4);
}

/* ── 16. SECTION ENTRY BLUR FADE ────────────────────────────── */
@keyframes blurFadeIn {
  from { opacity: 0; filter: blur(8px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
.blur-reveal { animation: blurFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) both; }

/* ── 17. FLOATING BUTTONS PULSE RING ─────────────────────────── */
@keyframes floatRing {
  0%   { box-shadow: 0 0 0 0 rgba(26,92,56,.4); }
  70%  { box-shadow: 0 0 0 12px rgba(26,92,56,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,92,56,0); }
}
@keyframes floatRingWa {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.4); }
  70%  { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.float-call-btn { animation: floatRing   2.5s ease-in-out 2s infinite; }
.float-wa-btn   { animation: floatRingWa 2.5s ease-in-out 2.8s infinite; }

/* ── 18. ABOUT SPLIT IMAGE PARALLAX ──────────────────────────── */
.about-split-img { overflow: hidden; }
.about-split-img img {
  transform-origin: center center;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1) !important;
}

/* ── 19. VCTA STAT RING ITEMS ────────────────────────────────── */
.vsr-item {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s, box-shadow 0.35s !important;
}
.vsr-item:hover {
  transform: translateY(-6px) scale(1.04) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.25) !important;
}
.vsr-big:hover { transform: translateY(-4px) scale(1.02) !important; }

/* ── 20. PAGE HERO TITLE SHIMMER ─────────────────────────────── */
@keyframes shimmerText {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.page-hero h1 {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #9de8b8 40%,
    #ffffff 60%,
    #9de8b8 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 4s linear infinite;
}
/* em inside page-hero h1 stays the accent colour */
.page-hero h1 em {
  -webkit-text-fill-color: #9de8b8;
  background: none;
  animation: none;
}

/* ── 21. DONATE FORM MINI — CARD GLOW ────────────────────────── */
.donate-form-mini {
  transition: box-shadow 0.4s ease !important;
}
.donate-form-mini:hover {
  box-shadow: 0 32px 80px rgba(0,0,0,.3), 0 0 0 1px rgba(232,86,42,.15) !important;
}

/* ── 22. IMPACT PILL COUNTER HIGHLIGHT ───────────────────────── */
@keyframes pillPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.ei-pill.pop { animation: pillPop 0.35s cubic-bezier(0.34,1.56,0.64,1); }

/* ── 23. CURSOR TRAIL DOTS (desktop only) ────────────────────── */
.cursor-dot {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 99999;
  mix-blend-mode: exclusion;
}
.cursor-dot-main {
  width: 10px; height: 10px;
  background: #7ee8a2;
  transition: transform 0.12s ease;
  margin: -5px 0 0 -5px;
}
.cursor-dot-ring {
  width: 36px; height: 36px;
  border: 2px solid rgba(126,232,162,0.5);
  transition: transform 0.35s ease, width 0.3s, height 0.3s, opacity 0.3s;
  margin: -18px 0 0 -18px;
}
.cursor-dot-ring.hover-link {
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(232,86,42,.6);
  background: rgba(232,86,42,.06);
}
@media (max-width: 1023px) {
  .cursor-dot { display: none; }
}

/* ── 24. FOOTER SOCIAL ICON BOUNCE ───────────────────────────── */
@keyframes socialBounce {
  0%,100% { transform: translateY(0) scale(1); }
  30%     { transform: translateY(-6px) scale(1.1); }
  60%     { transform: translateY(-2px) scale(1.04); }
}
.footer-social a:hover { animation: socialBounce 0.4s ease; }

/* ── 25. LINE DRAW — SECTION DIVIDER ────────────────────────── */
.draw-line {
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--green-mid));
  width: 0;
  border-radius: 1px;
  transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
  margin: 12px 0 32px;
}
.draw-line.is-visible { width: 64px; }

/* ── 26. AMBIENT SECTION BACKGROUNDS ────────────────────────── */
@keyframes ambientShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.testi-section {
  background-size: 200% 200% !important;
  animation: ambientShift 12s ease infinite;
}
.vcta-section {
  background-size: 200% 200% !important;
  animation: ambientShift 10s ease 2s infinite;
}

/* ── 27. REDUCE MOTION SUPPORT ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .page-hero h1 { background: none; -webkit-text-fill-color: #fff; animation: none; }
  .cursor-dot { display: none; }
}