/* ═══════════════════════════════════════════
   GAMYX — animations.css
══════════════════════════════════════════════ */

/* ─── FADE / SLIDE ─── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(36px);  } to { opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-36px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; }                              to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(0.86);       } to { opacity:1; transform:scale(1);     } }

/* ─── FLOAT ─── */
@keyframes float {
  0%,100% { transform: translateY(0)    rotate(0deg); }
  25%     { transform: translateY(-12px) rotate(1deg); }
  75%     { transform: translateY(-6px)  rotate(-0.8deg); }
}
@keyframes floatSlow {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-18px); }
}

/* ─── PULSE ─── */
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1);   }
  50%     { opacity:0.5; transform:scale(1.4); }
}
@keyframes glowPulse {
  0%,100% { filter: drop-shadow(0 0 14px rgba(108,70,255,0.55)) drop-shadow(0 0 40px rgba(108,70,255,0.25)); }
  50%     { filter: drop-shadow(0 0 30px rgba(40,200,255,0.7))  drop-shadow(0 0 80px rgba(40,200,255,0.3));  }
}

/* ─── SHIMMER (GAMYX title) ─── */
@keyframes shimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 300% center; }
}

/* ─── GLITCH ─── */
@keyframes glitch1 {
  0%  { clip-path:inset(75% 0 2%  0); transform:translateX(-5px); opacity:.8; }
  20% { clip-path:inset(15% 0 65% 0); transform:translateX( 5px); opacity:.9; }
  40% { clip-path:inset(45% 0 35% 0); transform:translateX(-3px); opacity:.7; }
  60% { clip-path:inset(5%  0 80% 0); transform:translateX( 4px); opacity:.8; }
  80% { clip-path:inset(55% 0 25% 0); transform:translateX(-2px); opacity:.9; }
  100%{ clip-path:inset(0   0 100% 0); transform:translateX(0);   opacity:0;  }
}
@keyframes glitch2 {
  0%  { clip-path:inset(8%  0 75% 0); transform:translateX( 5px); opacity:.7; }
  20% { clip-path:inset(55% 0 5%  0); transform:translateX(-5px); opacity:.8; }
  40% { clip-path:inset(25% 0 50% 0); transform:translateX( 3px); opacity:.9; }
  60% { clip-path:inset(68% 0 8%  0); transform:translateX(-4px); opacity:.7; }
  80% { clip-path:inset(18% 0 55% 0); transform:translateX( 2px); opacity:.8; }
  100%{ clip-path:inset(0   0 100% 0); transform:translateX(0);   opacity:0;  }
}

/* ─── GLITCH TEXT COMPONENT ─── */
.glitch {
  position: relative; display: inline-block;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; top:0; left:0; width:100%; height:100%;
  font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit;
  opacity: 0;
}
.glitch::before { color: var(--cyan); animation: glitch1 6s steps(1) infinite 3s; }
.glitch::after  { color: var(--pink); animation: glitch2 6s steps(1) infinite 3s; }
.glitch:hover::before,
.glitch:hover::after { opacity:.75; animation-duration:.35s; animation-delay:0s; }

/* ─── HERO LOGO ─── */
@keyframes logoReveal {
  0%   { opacity:0; transform:scale(0.5) rotate(-8deg); filter:brightness(3) blur(10px); }
  60%  { filter:brightness(1.4) blur(1px); }
  100% { opacity:1; transform:scale(1) rotate(0deg);   filter:brightness(1) blur(0);    }
}
.hero-logo {
  animation: logoReveal 1.3s cubic-bezier(0.34,1.56,0.64,1) 0.4s both,
             float 8s ease-in-out 1.7s infinite,
             glowPulse 5s ease-in-out 1.7s infinite;
}

/* ─── ORBIT RINGS ─── */
@keyframes orbitCW  { from { transform:rotate(0deg);   } to { transform:rotate(360deg);  } }
@keyframes orbitCCW { from { transform:rotate(360deg); } to { transform:rotate(0deg);    } }

/* ─── SCROLL WHEEL ─── */
@keyframes scrollWheel {
  0%,100% { transform:translateY(0);   opacity:1; }
  65%     { transform:translateY(10px); opacity:0; }
}

/* ─── STAGGER HERO ─── */
.hero-badge  { animation: fadeUp .7s cubic-bezier(.4,0,.2,1)  .1s  both; }
.hero-logo-w { animation: logoReveal 1.3s cubic-bezier(0.34,1.56,0.64,1) .4s both; }
.hero-h1     { animation: fadeUp .8s cubic-bezier(.4,0,.2,1)  .85s both; }
.hero-sub1   { animation: fadeUp .8s cubic-bezier(.4,0,.2,1) 1.0s  both; }
.hero-desc   { animation: fadeUp .8s cubic-bezier(.4,0,.2,1) 1.1s  both; }
.hero-ctas   { animation: fadeUp .8s cubic-bezier(.4,0,.2,1) 1.25s both; }
.hero-links  { animation: fadeUp .8s cubic-bezier(.4,0,.2,1) 1.4s  both; }
.hero-scroll { animation: fadeIn  1s ease                    1.7s  both; }

/* ─── STAT BAR FILL ─── */
@keyframes fillBar { from { width:0; } to { width:100%; } }
.stat-item.counted .stat-bar { animation: fillBar 1.6s cubic-bezier(.4,0,.2,1) both; }

/* ─── CARD SHIMMER SWEEP ─── */
.card-shimmer { position:relative; overflow:hidden; }
.card-shimmer::after {
  content:''; position:absolute; top:0; left:-100%; width:55%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform:skewX(-12deg); transition:left 0s; pointer-events:none;
}
.card-shimmer:hover::after { left:150%; transition:left .6s ease; }

/* ─── TEAM AVATAR RING ─── */
.avatar-ring  { animation: orbitCW  14s linear infinite; }
.avatar-ring2 { animation: orbitCCW 20s linear infinite; }