/* =====================================================
   QUEUE WORLDS - Animations
   ===================================================== */

/* =====================================================
   ELEMENT ANIMATIONS
   ===================================================== */

/* Enqueue Animation */
.enqueue-anim {
  animation: enqueue-slide 0.5s ease-out;
}

@keyframes enqueue-slide {
  0% {
    transform: translateX(100px) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translateX(20px) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Dequeue Animation */
.dequeue-anim {
  animation: dequeue-slide 0.5s ease-in forwards;
}

@keyframes dequeue-slide {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-30px) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-100px) scale(0.5);
    opacity: 0;
  }
}

/* Peek Animation */
.peek-anim {
  animation: peek-highlight 0.8s ease-in-out;
}

@keyframes peek-highlight {
  0%,
  100% {
    transform: scale(1);
    box-shadow: none;
  }
  25% {
    transform: scale(1.15);
    box-shadow: 0 0 30px var(--color-gold);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 40px var(--color-gold);
  }
  75% {
    transform: scale(1.15);
    box-shadow: 0 0 30px var(--color-gold);
  }
}

/* Stack Push Animation */
.push-anim {
  animation: stack-push 0.5s ease-out;
}

@keyframes stack-push {
  0% {
    transform: translateY(-50px) scale(0.5);
    opacity: 0;
  }
  60% {
    transform: translateY(10px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Stack Pop Animation */
.pop-anim {
  animation: stack-pop 0.5s ease-in forwards;
}

@keyframes stack-pop {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateY(-10px) scale(1.1);
  }
  100% {
    transform: translateY(-50px) scale(0.5);
    opacity: 0;
  }
}

/* =====================================================
   DEQUE ANIMATIONS
   ===================================================== */

/* Add First Animation */
.add-first-anim {
  animation: add-first 0.5s ease-out;
}

@keyframes add-first {
  0% {
    transform: translateX(-100px) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translateX(-20px) scale(1.1);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Add Last Animation */
.add-last-anim {
  animation: add-last 0.5s ease-out;
}

@keyframes add-last {
  0% {
    transform: translateX(100px) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translateX(20px) scale(1.1);
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

/* Remove First Animation */
.remove-first-anim {
  animation: remove-first 0.5s ease-in forwards;
}

@keyframes remove-first {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-30px) scale(1.1);
  }
  100% {
    transform: translateX(-100px) scale(0.5);
    opacity: 0;
  }
}

/* Remove Last Animation */
.remove-last-anim {
  animation: remove-last 0.5s ease-in forwards;
}

@keyframes remove-last {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(30px) scale(1.1);
  }
  100% {
    transform: translateX(100px) scale(0.5);
    opacity: 0;
  }
}

/* =====================================================
   LINKED LIST ANIMATIONS
   ===================================================== */

/* Node Create Animation */
.node-create-anim {
  animation: node-create 0.6s ease-out;
}

@keyframes node-create {
  0% {
    transform: scale(0) rotate(-90deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Node Remove Animation */
.node-remove-anim {
  animation: node-remove 0.6s ease-in forwards;
}

@keyframes node-remove {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(-10deg);
  }
  100% {
    transform: scale(0) rotate(90deg);
    opacity: 0;
  }
}

/* Arrow Connect Animation */
.arrow-connect-anim {
  animation: arrow-connect 0.4s ease-out;
}

@keyframes arrow-connect {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 40px;
    opacity: 1;
  }
}

/* Random Pointer Animation */
.random-pointer-anim {
  animation: random-pointer 0.8s ease-out;
}

@keyframes random-pointer {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* =====================================================
   SLIDING WINDOW ANIMATIONS
   ===================================================== */

/* Window Slide Animation */
.window-slide-anim {
  animation: window-slide 0.4s ease-out;
}

@keyframes window-slide {
  0% {
    transform: translateX(-62px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Element Enter Window */
.enter-window-anim {
  animation: enter-window 0.4s ease-out;
}

@keyframes enter-window {
  0% {
    background: var(--color-bg-light);
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    background: linear-gradient(135deg, var(--realm8-color), #27ae60);
    transform: scale(1);
  }
}

/* Element Exit Window */
.exit-window-anim {
  animation: exit-window 0.4s ease-out;
}

@keyframes exit-window {
  0% {
    background: linear-gradient(135deg, var(--realm8-color), #27ae60);
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    background: var(--color-bg-light);
    transform: scale(1);
  }
}

/* Max Highlight Animation */
.max-highlight-anim {
  animation: max-highlight 0.6s ease-in-out;
}

@keyframes max-highlight {
  0%,
  100% {
    box-shadow: 0 0 10px var(--color-gold);
  }
  50% {
    box-shadow:
      0 0 40px var(--color-gold),
      0 0 60px var(--color-gold);
    transform: scale(1.15);
  }
}

/* =====================================================
   TRANSFER ANIMATIONS (TWO STACKS)
   ===================================================== */

/* Transfer Right to Left */
.transfer-left-anim {
  animation: transfer-left 0.6s ease-in-out;
}

@keyframes transfer-left {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(20px) translateY(-30px);
  }
  70% {
    transform: translateX(-150px) translateY(-30px);
  }
  100% {
    transform: translateX(-200px) translateY(0);
  }
}

/* Transfer Left to Right */
.transfer-right-anim {
  animation: transfer-right 0.6s ease-in-out;
}

@keyframes transfer-right {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-20px) translateY(-30px);
  }
  70% {
    transform: translateX(150px) translateY(-30px);
  }
  100% {
    transform: translateX(200px) translateY(0);
  }
}

/* =====================================================
   FREQUENCY MAP ANIMATIONS
   ===================================================== */

/* Frequency Increment */
.freq-increment-anim {
  animation: freq-increment 0.4s ease-out;
}

@keyframes freq-increment {
  0% {
    transform: scale(1);
    background: var(--color-bg-light);
  }
  50% {
    transform: scale(1.2);
    background: var(--color-fifo);
  }
  100% {
    transform: scale(1);
    background: var(--color-bg-light);
  }
}

/* Character Process Animation */
.char-process-anim {
  animation: char-process 0.5s ease-out;
}

@keyframes char-process {
  0% {
    transform: scale(1);
    background: var(--color-bg-light);
  }
  50% {
    transform: scale(1.3);
    background: var(--color-warning);
  }
  100% {
    transform: scale(1);
    background: var(--color-fifo);
  }
}

/* =====================================================
   FACTORY/CONVEYOR ANIMATIONS
   ===================================================== */

/* Conveyor Belt Movement */
.conveyor-move-anim {
  animation: conveyor-continuous 2s linear infinite;
}

@keyframes conveyor-continuous {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 0;
  }
}

/* Item Spawn Animation */
.item-spawn-anim {
  animation: item-spawn 0.5s ease-out;
}

@keyframes item-spawn {
  0% {
    transform: translateY(-50px) scale(0);
    opacity: 0;
  }
  60% {
    transform: translateY(10px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Item Process Animation */
.item-process-anim {
  animation: item-process 0.6s ease-in-out;
}

@keyframes item-process {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 30px var(--color-gold);
  }
}

/* =====================================================
   BOSS BATTLE ANIMATIONS
   ===================================================== */

/* Boss Attack Animation */
.boss-attack-anim {
  animation: boss-attack 1s ease-in-out;
}

@keyframes boss-attack {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-20px) rotate(-5deg);
  }
  50% {
    transform: translateX(100px) rotate(5deg);
  }
  75% {
    transform: translateX(-10px) rotate(-2deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

/* Power Up Animation */
.power-up-anim {
  animation: power-up 0.8s ease-out;
}

@keyframes power-up {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
    box-shadow: 0 0 50px var(--color-gold);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 20px var(--color-gold);
  }
}

/* Damage Flash Animation */
.damage-flash-anim {
  animation: damage-flash 0.3s ease-out;
}

@keyframes damage-flash {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(2) saturate(0);
  }
}

/* Health Bar Decrease */
.health-decrease-anim {
  animation: health-decrease 0.5s ease-out;
}

@keyframes health-decrease {
  0% {
    transform: scaleX(1);
  }
  30% {
    transform: scaleX(1.1);
  }
  100% {
    transform: scaleX(var(--health-percent));
  }
}

/* =====================================================
   UI ANIMATIONS
   ===================================================== */

/* Success Feedback */
.success-feedback {
  animation: success-feedback 0.6s ease-out;
}

@keyframes success-feedback {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.1);
    box-shadow: 0 0 30px var(--color-success);
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

/* Error Feedback */
.error-feedback {
  animation: error-feedback 0.5s ease-out;
}

@keyframes error-feedback {
  0%,
  100% {
    transform: translateX(0);
    border-color: inherit;
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
    border-color: var(--color-error);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
    border-color: var(--color-error);
  }
}

/* Score Increment */
.score-increment-anim {
  animation: score-increment 0.5s ease-out;
}

@keyframes score-increment {
  0% {
    transform: scale(1);
    color: var(--color-success);
  }
  50% {
    transform: scale(1.5);
    color: var(--color-gold);
  }
  100% {
    transform: scale(1);
    color: var(--color-success);
  }
}

/* Screen Transition */
.screen-enter {
  animation: screen-enter 0.5s ease-out;
}

@keyframes screen-enter {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.screen-exit {
  animation: screen-exit 0.3s ease-in forwards;
}

@keyframes screen-exit {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

/* =====================================================
   PARTICLE EFFECTS
   ===================================================== */

/* Sparkle Effect */
.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-gold);
  border-radius: 50%;
  animation: sparkle 1s ease-out forwards;
  pointer-events: none;
}

@keyframes sparkle {
  0% {
    transform: scale(0) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(var(--tx), var(--ty));
    opacity: 0;
  }
}

/* Glow Pulse */
.glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 10px var(--glow-color, var(--color-fifo));
  }
  50% {
    box-shadow: 0 0 30px var(--glow-color, var(--color-fifo));
  }
}

/* Float Animation */
.float-anim {
  animation: float 3s ease-in-out infinite;
}

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

/* Rotate Animation */
.rotate-anim {
  animation: rotate 10s linear infinite;
}

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

/* =====================================================
   SPECIAL EFFECTS
   ===================================================== */

/* Rainbow Border */
.rainbow-border {
  animation: rainbow-border 3s linear infinite;
}

@keyframes rainbow-border {
  0% {
    border-color: #ff0000;
  }
  16% {
    border-color: #ff8800;
  }
  33% {
    border-color: #ffff00;
  }
  50% {
    border-color: #00ff00;
  }
  66% {
    border-color: #0088ff;
  }
  83% {
    border-color: #8800ff;
  }
  100% {
    border-color: #ff0000;
  }
}

/* Typing Cursor */
.typing-cursor::after {
  content: '|';
  animation: blink 0.7s infinite;
}

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

/* Shake Animation */
.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

/* Bounce Animation */
.bounce {
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

/* Fade In Up */
.fade-in-up {
  animation: fade-in-up 0.5s ease-out;
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Out Down */
.fade-out-down {
  animation: fade-out-down 0.5s ease-in forwards;
}

@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Scale In */
.scale-in {
  animation: scale-in 0.3s ease-out;
}

@keyframes scale-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Scale Out */
.scale-out {
  animation: scale-out 0.3s ease-in forwards;
}

@keyframes scale-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}