/* ── RMWF Animations ────────────────────────────────────────── */

/* Fade up */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Scale in */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
/* Slide right */
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Slide left */
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Pulse glow green */
@keyframes pulseGreen {
  0%,100% { box-shadow: 0 0 0 0 rgba(27,107,58,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(27,107,58,0); }
}
/* Pulse glow red */
@keyframes pulseRed {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,16,46,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(200,16,46,0); }
}
/* Shimmer */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
/* Gradient shift */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Bounce */
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* Rotate */
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Wave */
@keyframes wave {
  0%  { transform: scaleY(1); }
  50% { transform: scaleY(.5); }
  100%{ transform: scaleY(1); }
}

/* ── Utility Animation Classes ──────────────────────────────── */
.anim-fade-up   { animation: fadeUp .6s ease both; }
.anim-fade-in   { animation: fadeIn .6s ease both; }
.anim-scale-in  { animation: scaleIn .5s ease both; }
.anim-slide-r   { animation: slideRight .6s ease both; }
.anim-slide-l   { animation: slideLeft .6s ease both; }
.anim-bounce    { animation: bounce 2s ease-in-out infinite; }

.anim-delay-1 { animation-delay: .1s; }
.anim-delay-2 { animation-delay: .2s; }
.anim-delay-3 { animation-delay: .3s; }
.anim-delay-4 { animation-delay: .4s; }
.anim-delay-5 { animation-delay: .5s; }
.anim-delay-6 { animation-delay: .6s; }

/* ── Gradient Text ──────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #1B6B3A 0%, #2ecc71 50%, #C8102E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-green {
  background: linear-gradient(135deg, #1B6B3A, #2ecc71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-anim {
  background: linear-gradient(270deg, #2ecc71, #1B6B3A, #C8102E, #2ecc71);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

/* ── Shimmer Button ─────────────────────────────────────────── */
.btn-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% auto;
  animation: shimmer 2s linear infinite;
}

/* ── Pulse buttons ──────────────────────────────────────────── */
.pulse-green { animation: pulseGreen 2s ease-in-out infinite; }
.pulse-red   { animation: pulseRed 2s ease-in-out infinite; }

/* ── Wave bars (for audio/progress indicators) ──────────────── */
.wave-bar {
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--green);
  border-radius: 2px;
  margin: 0 2px;
}
.wave-bar:nth-child(1) { animation: wave .8s ease-in-out infinite; }
.wave-bar:nth-child(2) { animation: wave .8s ease-in-out .15s infinite; }
.wave-bar:nth-child(3) { animation: wave .8s ease-in-out .30s infinite; }
.wave-bar:nth-child(4) { animation: wave .8s ease-in-out .45s infinite; }

/* ── Hover lift ─────────────────────────────────────────────── */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.15); }

/* ── Counting number ─────────────────────────────────────────── */
.counter-number { transition: all .5s ease; }

/* ── Progress bar animated ──────────────────────────────────── */
.progress-bar-anim {
  animation: progressFill 1.5s ease forwards;
}
@keyframes progressFill {
  from { width: 0%; }
}

/* ── Card flip ──────────────────────────────────────────────── */
.flip-card { perspective: 1000px; }
.flip-card-inner {
  transition: transform .6s ease;
  transform-style: preserve-3d;
  position: relative;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
}
.flip-back { transform: rotateY(180deg); }

/* ── Typed cursor ───────────────────────────────────────────── */
.typed-cursor {
  color: #2ecc71;
  font-weight: 300;
}

/* ── Animated Background Shapes from Source Template ─────────── */
.animated-shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.shape-pulse {
  animation: pulse 4s infinite ease-in-out;
}

.shape-pulse-sm {
  animation: pulseSm 4s infinite ease-in-out;
}

.shape-float-y {
  animation: moveUpDown 10s ease-in-out infinite alternate-reverse;
}

.shape-float-x {
  animation: moveLeftRight 6s ease-in-out infinite alternate;
}

.shape-fall {
  animation: fall 15s ease-in-out infinite;
}

.shape-rotate {
  animation: rotate360 20s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes pulseSm {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.9;
  }
}

@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-25px);
  }
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(25px);
  }
}

@keyframes fall {
  0% {
    top: -10%;
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(20px) rotate(-15deg);
  }
  50% {
    top: 50%;
    transform: translateX(-20px) rotate(15deg);
  }
  75% {
    transform: translateX(20px) rotate(-10deg);
  }
  100% {
    top: 110%;
    transform: translateX(0) rotate(0deg);
  }
}

/* ── Global Background Shapes ───────────────────────────────── */
.global-background-shapes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.global-background-shapes .animated-shape {
  position: absolute;
  opacity: 0.12; /* Subtle opacity so it doesn't overlap text */
  transition: opacity 0.3s ease;
}

/* Slightly decrease opacity in dark mode or on specific sections if needed */
.global-background-shapes .animated-shape img {
  width: 100%;
  height: auto;
}