/* ==========================================================================
   PROSNAPGROW - ANIMATIONS & KEYFRAMES
   3D Animations, Motion Graphics & Keyframe Rules
   ========================================================================== */

/* 1. FLOATING ANIMATION (3D Subtle Vertical Motion) */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* 2. NEON PULSE GLOW */
@keyframes pulse-glow {
  0% { box-shadow: 0 0 15px rgba(255, 252, 0, 0.2); }
  50% { box-shadow: 0 0 35px rgba(255, 252, 0, 0.6), 0 0 15px rgba(255, 252, 0, 0.4); }
  100% { box-shadow: 0 0 15px rgba(255, 252, 0, 0.2); }
}

/* 3. FADE IN UP (SCROLL & LOAD ENTRANCE) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 35px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 4. 3D SPINNING ROTATION */
@keyframes spin3d {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}

/* 5. GRADIENT BACKGROUND SHIFT */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 6. LOADING SHIMMER EFFECT */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 7. BOUNCE IN ENTRANCE */
@keyframes bounce-in {
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 0.9; transform: scale3d(1.08, 1.08, 1.08); }
  70% { transform: scale3d(0.92, 0.92, 0.92); }
  100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

/* 8. SNAPCHAT GHOST PULSE */
@keyframes ghost-pulse {
  0% { filter: drop-shadow(0 0 10px rgba(255, 252, 0, 0.4)); }
  50% { filter: drop-shadow(0 0 25px rgba(255, 252, 0, 0.8)); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 252, 0, 0.4)); }
}

/* 9. WHATSAPP FLOATING PULSE RING */
@keyframes whatsapp-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* 10. GLOW BEAM SWEEP */
@keyframes glow-sweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* 11. BG ORB FLOAT */
@keyframes orb-float {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.1); }
  66% { transform: translate(-20px, 30px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}


/* ==========================================================================
   ANIMATION UTILITY CLASSES
   ========================================================================== */
.animate-float { animation: float 5s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }
.animate-fadeInUp { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-ghost { animation: ghost-pulse 3s infinite ease-in-out; }
.animate-bounce-in { animation: bounce-in 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }

/* ==========================================================================
   SCROLL REVEAL (Driven by IntersectionObserver in 3d-effects.js)
   ========================================================================== */

/* .reveal — the class used in HTML */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* .scroll-reveal — legacy alias (same behavior) */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger Delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
