/* ========================
   Keyframes
   ======================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(61, 220, 151, 0); }
}

@keyframes blink {
  0%, 49%  { opacity: 1; }
  50%, 100%{ opacity: 0; }
}

@keyframes rippleOut {
  from { width: 0; height: 0; opacity: 0.4; }
  to   { width: 500px; height: 500px; opacity: 0; }
}

/* ========================
   Scroll Reveal
   ======================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Stagger children */
.reveal-group.visible > * { animation: fadeInUp 0.5s ease both; }
.reveal-group.visible > *:nth-child(1) { animation-delay: 0s; }
.reveal-group.visible > *:nth-child(2) { animation-delay: 0.08s; }
.reveal-group.visible > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-group.visible > *:nth-child(4) { animation-delay: 0.24s; }
.reveal-group.visible > *:nth-child(5) { animation-delay: 0.32s; }
.reveal-group.visible > *:nth-child(6) { animation-delay: 0.4s; }

/* ========================
   Click ripple (contained to element, not full viewport)
   ======================== */
.click-ripple {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 220, 151, 0.25) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: rippleOut 0.6s ease-out forwards;
  z-index: 9999;
}