/* PlayXcrew Animations - bouncy, fluid motion */

:root {
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 140ms;
  --dur-soft: 240ms;
  --dur-page: 380ms;
}

@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { transform: scale(1); }
}
.bounce-in { animation: bounce-in 280ms var(--ease-bounce) both; }

@keyframes spring-pop {
  0%   { opacity: 0; transform: scale(0.92) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.spring-pop { animation: spring-pop 200ms var(--ease-spring) both; }

@keyframes fade-up {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 220ms var(--ease-spring) both; }
.stagger > * { animation: fade-up 220ms var(--ease-spring) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 20ms; }
.stagger > *:nth-child(3) { animation-delay: 40ms; }
.stagger > *:nth-child(4) { animation-delay: 60ms; }
.stagger > *:nth-child(5) { animation-delay: 80ms; }
.stagger > *:nth-child(6) { animation-delay: 100ms; }
.stagger > *:nth-child(7) { animation-delay: 120ms; }
.stagger > *:nth-child(8) { animation-delay: 140ms; }

@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 12px rgba(139,92,246,0.35), 0 0 22px rgba(139,92,246,0.18); }
  50%     { box-shadow: 0 0 18px rgba(139,92,246,0.55), 0 0 36px rgba(139,92,246,0.25); }
}
.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.float { animation: float 3s ease-in-out infinite; }

@keyframes live-dot {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.55; }
}
.live-dot { animation: live-dot 1.6s ease-in-out infinite; }

@keyframes tilt-shimmer {
  0%,100% { transform: perspective(600px) rotateY(0deg); }
  50%     { transform: perspective(600px) rotateY(8deg); }
}
.tilt-hover { transition: transform 180ms var(--ease-spring); }
.tilt-hover:hover { transform: perspective(600px) rotateY(6deg) rotateX(3deg) scale(1.02); }

@keyframes neon-sweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  20%  { opacity: 0.5; }
  100% { transform: translateX(120%); opacity: 0; }
}
.neon-sweep { position: relative; overflow: hidden; }
.neon-sweep::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.3), transparent);
  transform: translateX(-120%);
  animation: neon-sweep 1.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}
.shake { animation: shake 240ms var(--ease-spring); }

@keyframes success-check {
  0%   { opacity: 0; transform: scale(0.6) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(0); }
  100% { transform: scale(1) rotate(0); }
}
.success-check { animation: success-check 280ms var(--ease-bounce) both; }

@keyframes press-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.press-pop:active { animation: press-pop 120ms var(--ease-spring); }

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 12s linear infinite; }

@keyframes wiggle {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(4deg); }
  75%     { transform: rotate(-4deg); }
}
.wiggle:hover { animation: wiggle 220ms ease-in-out; }

@keyframes px-notif-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
#px-notif-track { animation-duration: 60s !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .float, .glow-pulse, .live-dot, .neon-sweep::after { animation: none !important; }
}

/* Helper: animate when in view */
.in-view { animation-play-state: running !important; }