/* ============================================
   ROOTS GROUP — ANIMATION KEYFRAMES
   ============================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(40px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes loadBar { from { width: 0%; } to { width: 100%; } }
@keyframes splashExit { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes typewriter { from { width: 0; } to { width: 100%; } }
@keyframes blink { 0%,100% { border-color: var(--clr-gold-400); } 50% { border-color: transparent; } }
@keyframes skillFill { from { width: 0%; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }

/* ============================================
   SCROLL REVEAL SYSTEM
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.reveal--left  { transform: translateX(-36px); }
.reveal.reveal--right { transform: translateX(36px); }
.reveal.reveal--scale { transform: scale(0.93); }
.reveal.visible { opacity: 1; transform: none; }

/* Stagger for grid children */
.stagger .reveal:nth-child(1) { transition-delay: 0.05s; }
.stagger .reveal:nth-child(2) { transition-delay: 0.15s; }
.stagger .reveal:nth-child(3) { transition-delay: 0.25s; }
.stagger .reveal:nth-child(4) { transition-delay: 0.35s; }
.stagger .reveal:nth-child(5) { transition-delay: 0.45s; }
.stagger .reveal:nth-child(6) { transition-delay: 0.55s; }

/* ============================================
   FLOATING WHATSAPP BUTTON PULSE
   ============================================ */
.whatsapp-float::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-full);
  background: #25D366;
  animation: pulse-ring 2.2s ease-out infinite;
  z-index: -1;
}