/* ============================================================
   PAK ANONYMOUS AI — animations.css  v6.0.0
   All keyframe animations & animation utility classes
   ============================================================ */

/* ----------------------------------------------------------
   1. FADE ANIMATIONS
   ---------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ----------------------------------------------------------
   2. SCALE ANIMATIONS
   ---------------------------------------------------------- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.88); }
}

@keyframes scalePop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ----------------------------------------------------------
   3. SLIDE ANIMATIONS
   ---------------------------------------------------------- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-100%); }
}

@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* ----------------------------------------------------------
   4. SIDEBAR ANIMATIONS
   ---------------------------------------------------------- */
@keyframes sidebarSlideIn {
  from { transform: translateX(-100%); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes sidebarSlideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}

/* ----------------------------------------------------------
   5. BOUNCE
   ---------------------------------------------------------- */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 0.9; transform: scale(1.05); }
  70%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bounceY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ----------------------------------------------------------
   6. PULSE ANIMATIONS
   ---------------------------------------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(var(--p-rgb), 0.3),
                0 0 12px rgba(var(--p-rgb), 0.15);
  }
  50% {
    box-shadow: 0 0 14px rgba(var(--p-rgb), 0.7),
                0 0 28px rgba(var(--p-rgb), 0.35),
                0 0 48px rgba(var(--p-rgb), 0.12);
  }
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

@keyframes textGlowPulse {
  0%, 100% { text-shadow: 0 0 4px rgba(var(--p-rgb), 0.5); }
  50%      { text-shadow: 0 0 12px rgba(var(--p-rgb), 0.9), 0 0 24px rgba(var(--p-rgb), 0.4); }
}

/* ----------------------------------------------------------
   7. SCAN-LINE EFFECT
   ---------------------------------------------------------- */
@keyframes scanLine {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

@keyframes scanSweep {
  0%   { top: -4px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}

/* ----------------------------------------------------------
   8. MATRIX RAIN / THINKING
   ---------------------------------------------------------- */
@keyframes matrixRain {
  0%   { opacity: 0; transform: translateY(-10px); filter: brightness(2); }
  20%  { opacity: 1; }
  80%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(40px); filter: brightness(0.5); }
}

@keyframes thinkingDots {
  0%         { content: "·"; opacity: 0.3; }
  16.6%      { content: "··"; opacity: 0.6; }
  33.3%      { content: "···"; opacity: 1; }
  50%        { content: "····"; opacity: 0.8; }
  66.6%      { content: "·····"; opacity: 0.6; }
  83.3%      { content: "······"; opacity: 0.4; }
  100%       { content: "·"; opacity: 0.3; }
}

@keyframes thinkBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.1; }
}

@keyframes matrixChar {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ----------------------------------------------------------
   9. TYPING CURSOR
   ---------------------------------------------------------- */
@keyframes caretBlink {
  0%, 49% { border-right-color: var(--p); }
  50%, 100% { border-right-color: transparent; }
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ----------------------------------------------------------
   10. TYPE-IN (character reveal)
   ---------------------------------------------------------- */
@keyframes typeIn {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes streamText {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------
   11. SHIMMER (loading states)
   ---------------------------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes shimmerBg {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* ----------------------------------------------------------
   12. ROTATE / ORBIT / SPIN
   ---------------------------------------------------------- */
@keyframes rotateGlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orbitSlow {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.18; }
  25%  { transform: translate(60px, -40px) scale(1.1); opacity: 0.25; }
  50%  { transform: translate(30px, 60px) scale(0.9); opacity: 0.18; }
  75%  { transform: translate(-50px, 20px) scale(1.05); opacity: 0.22; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.18; }
}

@keyframes orbitSlowReverse {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.14; }
  25%  { transform: translate(-70px, 50px) scale(0.92); opacity: 0.2; }
  50%  { transform: translate(-20px, -60px) scale(1.08); opacity: 0.16; }
  75%  { transform: translate(60px, -30px) scale(0.98); opacity: 0.2; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.14; }
}

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

/* ----------------------------------------------------------
   13. TOAST NOTIFICATIONS
   ---------------------------------------------------------- */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(120%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(120%) scale(0.9);
  }
}

/* ----------------------------------------------------------
   14. RIPPLE (button click effect)
   ---------------------------------------------------------- */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.7; }
  100% { transform: scale(4); opacity: 0; }
}

/* ----------------------------------------------------------
   15. SPLASH SCREEN
   ---------------------------------------------------------- */
@keyframes splashFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes splashFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

@keyframes splashLogo {
  0%   { opacity: 0; transform: scale(0.7) translateY(20px); filter: brightness(0.5); }
  50%  { opacity: 1; transform: scale(1.05) translateY(0); filter: brightness(1.5); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: brightness(1); }
}

@keyframes splashBar {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes splashBarGlow {
  0%   { box-shadow: 0 0 8px rgba(var(--p-rgb), 0.4); }
  50%  { box-shadow: 0 0 20px rgba(var(--p-rgb), 0.9), 0 0 40px rgba(var(--p-rgb), 0.4); }
  100% { box-shadow: 0 0 8px rgba(var(--p-rgb), 0.4); }
}

/* ----------------------------------------------------------
   16. BRAND ICON RING
   ---------------------------------------------------------- */
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

/* ----------------------------------------------------------
   17. INPUT / FOCUS
   ---------------------------------------------------------- */
@keyframes inputFocusLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ----------------------------------------------------------
   18. MODULE BUTTON ACTIVE INDICATOR
   ---------------------------------------------------------- */
@keyframes activeIndicator {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(1.5); opacity: 0.7; }
}

/* ----------------------------------------------------------
   19. VOICE RECORDING
   ---------------------------------------------------------- */
@keyframes voiceRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes voicePulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.6); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(255, 51, 102, 0); }
}

/* ----------------------------------------------------------
   20. SEND BUTTON LAUNCH
   ---------------------------------------------------------- */
@keyframes sendLaunch {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-4px) scale(1.1); }
  60%  { transform: translateY(2px) scale(0.95); }
  100% { transform: translateY(0) scale(1); }
}

/* ----------------------------------------------------------
   21. SEARCH OVERLAY
   ---------------------------------------------------------- */
@keyframes searchIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----------------------------------------------------------
   22. PROGRESS / PROCESSING
   ---------------------------------------------------------- */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--progress, 70%); }
}

@keyframes processingBar {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 0; }
}

/* ----------------------------------------------------------
   ANIMATION UTILITY CLASSES
   ---------------------------------------------------------- */

/* Durations */
.anim-100  { animation-duration: 100ms  !important; }
.anim-200  { animation-duration: 200ms  !important; }
.anim-300  { animation-duration: 300ms  !important; }
.anim-400  { animation-duration: 400ms  !important; }
.anim-500  { animation-duration: 500ms  !important; }
.anim-600  { animation-duration: 600ms  !important; }
.anim-700  { animation-duration: 700ms  !important; }
.anim-800  { animation-duration: 800ms  !important; }
.anim-1000 { animation-duration: 1000ms !important; }
.anim-1200 { animation-duration: 1200ms !important; }
.anim-1500 { animation-duration: 1500ms !important; }
.anim-2000 { animation-duration: 2000ms !important; }

/* Fill modes */
.anim-fill-both     { animation-fill-mode: both !important; }
.anim-fill-forward  { animation-fill-mode: forwards !important; }

/* Easing */
.anim-ease-out    { animation-timing-function: ease-out !important; }
.anim-ease-in-out { animation-timing-function: ease-in-out !important; }
.anim-spring      { animation-timing-function: cubic-bezier(0.34,1.56,0.64,1) !important; }

/* Delays */
.anim-delay-50   { animation-delay: 50ms !important; }
.anim-delay-100  { animation-delay: 100ms !important; }
.anim-delay-150  { animation-delay: 150ms !important; }
.anim-delay-200  { animation-delay: 200ms !important; }
.anim-delay-300  { animation-delay: 300ms !important; }
.anim-delay-400  { animation-delay: 400ms !important; }
.anim-delay-500  { animation-delay: 500ms !important; }
.anim-delay-600  { animation-delay: 600ms !important; }
.anim-delay-700  { animation-delay: 700ms !important; }
.anim-delay-800  { animation-delay: 800ms !important; }
.anim-delay-1000 { animation-delay: 1000ms !important; }

/* Infinite */
.anim-infinite { animation-iteration-count: infinite !important; }

/* Apply */
.animate-fadeIn       { animation: fadeIn        0.35s ease-out both; }
.animate-fadeUp       { animation: fadeUp        0.4s  ease-out both; }
.animate-fadeDown     { animation: fadeDown      0.4s  ease-out both; }
.animate-fadeLeft     { animation: fadeLeft      0.4s  ease-out both; }
.animate-fadeRight    { animation: fadeRight     0.4s  ease-out both; }
.animate-scaleIn      { animation: scaleIn       0.3s  ease-out both; }
.animate-bounceIn     { animation: bounceIn      0.5s  ease-out both; }
.animate-slideInLeft  { animation: slideInLeft   0.35s ease-out both; }
.animate-slideInRight { animation: slideInRight  0.35s ease-out both; }
.animate-slideInUp    { animation: slideInUp     0.4s  ease-out both; }
.animate-streamText   { animation: streamText    0.25s ease-out both; }
.animate-pulse        { animation: pulse         1.5s  ease-in-out infinite; }
.animate-glowPulse    { animation: glowPulse     2s    ease-in-out infinite; }
.animate-shimmer      {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0)    0%,
    rgba(var(--p-rgb),0.1) 50%,
    rgba(255,255,255,0)    100%
  );
  background-size: 200% auto;
  animation: shimmer 1.8s linear infinite;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}