/* =========================================
   GRC360 v3 — Animations & Keyframes
   ========================================= */

/* Hero gradient shift */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating blobs */
@keyframes blobFloat1 {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(40px, -50px) scale(1.08); }
  66%  { transform: translate(-30px, 30px) scale(0.94); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes blobFloat2 {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(-40px, 40px) scale(0.92); }
  66%  { transform: translate(50px, -20px) scale(1.06); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes blobFloat3 {
  0%   { transform: translate(0px, 0px) scale(1); }
  50%  { transform: translate(30px, 30px) scale(1.04); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(6px); opacity: 0.5; }
}

/* Badge pulse ring */
@keyframes badgePulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 143, 32, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(251, 143, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 143, 32, 0); }
}

/* Fade-in-up (for scroll reveals) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade-in (for delayed children) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Counter shimmer */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Gradient text flow */
@keyframes gradientText {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Navbar slide in */
@keyframes navSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Spin (for loading states) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Hero dashboard float */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

/* Floating stat badges */
@keyframes floatBadge1 {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50%       { transform: translateY(-10px) rotate(-2deg); }
}
@keyframes floatBadge2 {
  0%, 100% { transform: translateY(0px) rotate(2deg); }
  50%       { transform: translateY(-8px) rotate(2deg); }
}

/* Infinite marquee — forward (left) */
@keyframes marqueeForward {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Infinite marquee — reverse (right) */
@keyframes marqueeReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Tab content fade-in */
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo orbit rings */
@keyframes orbitRingCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orbitRingCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Logo glow pulse */
@keyframes logoPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

/* Individual orbit badge floats */
@keyframes orbitFloat1 {
  0%, 100% { transform: translate(0,    0); }
  50%       { transform: translate(-8px, -12px); }
}

@keyframes orbitFloat2 {
  0%, 100% { transform: translate(0,  0); }
  50%       { transform: translate(8px, -10px); }
}

@keyframes orbitFloat3 {
  0%, 100% { transform: translate(0,  0); }
  50%       { transform: translate(-6px, 10px); }
}

@keyframes orbitFloat4 {
  0%, 100% { transform: translate(0,  0); }
  50%       { transform: translate(7px, 9px); }
}

@keyframes orbitFloat5 {
  0%, 100% { transform: translate(0,  0); }
  50%       { transform: translate(10px, -8px); }
}

/* ————————————————————————————————
   Scroll-reveal utility classes
   (toggled by IntersectionObserver)
   ———————————————————————————————— */
[data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate][data-delay="100"] { transition-delay: 0.1s; }
[data-animate][data-delay="200"] { transition-delay: 0.2s; }
[data-animate][data-delay="300"] { transition-delay: 0.3s; }
[data-animate][data-delay="400"] { transition-delay: 0.4s; }