/* ╔══════════════════════════════════════════════════════════════╗
   ║  animations.css — All scroll animations & transitions       ║
   ╠══════════════════════════════════════════════════════════════╣
   ║  BEGINNER TIPS:                                             ║
   ║  • To make an element animate on scroll, add class="fu"    ║
   ║    (fade up) or class="anim-slide-left" to any HTML element ║
   ║  • Animation speed → find the transition/animation values  ║
   ║  • To disable all animations → add class="no-anim" to body ║
   ╚══════════════════════════════════════════════════════════════╝ */
/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--gold2));
  width: 0%; transition: width .1s linear;
  box-shadow: 0 0 8px rgba(232,160,32,.6);
}

/* ── Keyframes ── */
@keyframes fadeInUp    { from { opacity:0; transform:translateY(36px) } to { opacity:1; transform:none } }
@keyframes fadeInLeft  { from { opacity:0; transform:translateX(-48px) } to { opacity:1; transform:none } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(48px) } to { opacity:1; transform:none } }
@keyframes zoomIn      { from { opacity:0; transform:scale(.88) } to { opacity:1; transform:scale(1) } }
@keyframes shimmer     { 0%{ background-position:200% center } 100%{ background-position:-200% center } }
@keyframes pulseGlow   { 0%,100%{ box-shadow:0 0 0 0 rgba(26,107,60,.35) } 50%{ box-shadow:0 0 0 12px rgba(26,107,60,0) } }
@keyframes floatY      { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes rippleOut   { to { transform:scale(4); opacity:0 } }
@keyframes counterPop  { 0%{ transform:scale(1) } 50%{ transform:scale(1.12) } 100%{ transform:scale(1) } }
@keyframes gradShift   { 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
@keyframes borderFlow  { 0%{ border-color:var(--green) } 50%{ border-color:var(--gold) } 100%{ border-color:var(--green) } }
@keyframes wiggle      { 0%,100%{ transform:rotate(0deg) } 25%{ transform:rotate(-4deg) } 75%{ transform:rotate(4deg) } }
@keyframes fabEntrance { from { opacity:0; transform:translateY(30px) scale(.85) } to { opacity:1; transform:translateY(0) scale(1) } }
@keyframes fl          { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-22px) } }

/* ── Page entrance ── */
.page-enter { animation: fadeInUp .55s cubic-bezier(.4,0,.2,1) both; }

/* ── Fade-up on scroll ── */
.fu {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
  transition-delay: var(--fd, 0s);
}
.fu.v { opacity: 1; transform: none; }

/* ── Directional slide-ins ── */
.anim-slide-left  { opacity:0; transform:translateX(-52px); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.anim-slide-right { opacity:0; transform:translateX(52px);  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.anim-zoom-in     { opacity:0; transform:scale(.9);         transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.anim-slide-left.v, .anim-slide-right.v, .anim-zoom-in.v { opacity:1; transform:none; }

/* ── Stagger delay helpers ── */
.stag-1 { --fd:.05s } .stag-2 { --fd:.12s } .stag-3 { --fd:.19s }
.stag-4 { --fd:.26s } .stag-5 { --fd:.33s } .stag-6 { --fd:.4s }

/* ── Text color helpers ── */
.text-gold  { color: var(--gold2); }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }

/* ── Shimmer text ── */
.text-shimmer {
  background: linear-gradient(90deg, var(--green) 0%, var(--gold) 40%, var(--green2) 60%, var(--gold2) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: shimmer 4s linear infinite;
}

/* ── Animated underline ── */
.anim-underline { position:relative; display:inline-block; }
.anim-underline::after { content:''; position:absolute; bottom:-4px; left:0; height:3px; width:0; background:var(--gold); border-radius:2px; transition:width .4s ease; }
.anim-underline:hover::after { width:100%; }

/* ── Ripple on buttons ── */
.btn .ripple { position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.35); animation:rippleOut .55s linear; pointer-events:none; }

/* ── Floating ── */
.float-anim { animation: floatY 3.5s ease-in-out infinite; }

/* ── Counter pop ── */
.stat-n.popped { animation: counterPop .4s ease-out; }

/* ── Auto stagger for grids ── */
.impact-grid .imp:nth-child(1) { --fd:.05s } .impact-grid .imp:nth-child(2) { --fd:.14s }
.impact-grid .imp:nth-child(3) { --fd:.23s } .impact-grid .imp:nth-child(4) { --fd:.32s }
.blog-grid .bl:nth-child(1)  { --fd:.03s } .blog-grid .bl:nth-child(2)  { --fd:.09s }
.blog-grid .bl:nth-child(3)  { --fd:.15s } .blog-grid .bl:nth-child(4)  { --fd:.21s }
.blog-grid .bl:nth-child(5)  { --fd:.27s } .blog-grid .bl:nth-child(6)  { --fd:.33s }
.blog-grid .bl:nth-child(7)  { --fd:.39s } .blog-grid .bl:nth-child(8)  { --fd:.45s }
.blog-grid .bl:nth-child(9)  { --fd:.51s } .blog-grid .bl:nth-child(10) { --fd:.57s }

/* ── Back-to-top pulse ── */
#btt.show { animation: pulseGlow 2.5s ease infinite; }

/* ── Responsive: reduce motion on small screens ── */
@media (max-width: 768px) {
  .anim-slide-left, .anim-slide-right { transform: translateY(28px); }
}