cleaner animations

src/lib/components/Battle/BattleEffects.svelte

@@ -25,7 +25,7 @@
   
   // Particle system configuration
   const PARTICLES_PER_EFFECT = 6; // Number of emoji particles per effect
-  const SPAWN_RADIUS = 80; // Increased radius around piclet where particles spawn
+  const SPAWN_RADIUS = 45; // Radius around piclet where particles spawn (reduced for better containment)
   
   // Generate multiple particles for each effect
   $: particleList = effects.flatMap((effect, effectIndex) => {
@@ -33,19 +33,18 @@
     for (let i = 0; i < PARTICLES_PER_EFFECT; i++) {
       // More varied spawn positions for better coverage
       const angle = (Math.PI * 2 * i) / PARTICLES_PER_EFFECT + (Math.random() - 0.5) * 1.2;
-      const distance = SPAWN_RADIUS * (0.5 + Math.random() * 0.8); // Wider distance variation
+      const distance = SPAWN_RADIUS * (0.4 + Math.random() * 0.6); // Tighter distance variation for better containment
       const x = Math.cos(angle) * distance;
       const y = Math.sin(angle) * distance;
       
-      // Enhanced animation properties for more dynamic effects
-      const scale = 0.6 + Math.random() * 0.6; // 0.6x to 1.2x initial size
-      const rotation = (Math.random() - 0.5) * 30; // Much smaller initial rotation range (-15deg to +15deg)
+      // Enhanced animation properties for more dynamic effects (no rotation)
+      const scale = 0.7 + Math.random() * 0.5; // 0.7x to 1.2x initial size
       const duration = Math.max(effect.duration * 1.8, 1800) + (Math.random() - 0.5) * 400; // Longer base duration
       const delay = Math.random() * 200; // More staggered animation starts
       
-      // Additional movement properties for more dynamic motion
-      const moveDistance = 40 + Math.random() * 60; // How far the particle travels
-      const moveAngle = angle + (Math.random() - 0.5) * Math.PI * 0.8; // Movement direction
+      // Additional movement properties for more dynamic motion (reduced range)
+      const moveDistance = 20 + Math.random() * 30; // Further reduced movement distance for better containment
+      const moveAngle = angle + (Math.random() - 0.5) * Math.PI * 0.4; // Further reduced movement angle variation
       
       particles.push({
         id: `${effectIndex}-${i}`,
@@ -54,7 +53,6 @@
         x,
         y,
         scale,
-        rotation,
         duration,
         delay,
         moveDistance,
@@ -162,12 +160,11 @@
     <div 
       class="effect-particle {particle.type}" 
       style="
-        left: {particle.x}px; 
-        top: {particle.y}px;
+        left: calc(50% + {particle.x}px); 
+        top: calc(50% + {particle.y}px);
         animation-duration: {particle.duration}ms;
         animation-delay: {particle.delay}ms;
         --initial-scale: {particle.scale};
-        --initial-rotation: {particle.rotation}deg;
         --move-x: {Math.cos(particle.moveAngle) * particle.moveDistance}px;
         --move-y: {Math.sin(particle.moveAngle) * particle.moveDistance}px;
       "
@@ -181,6 +178,11 @@
   .effects-wrapper {
     position: relative;
     display: inline-block;
+    /* Ensure wrapper contains particles even during resize */
+    overflow: visible;
+    /* Create a proper containing block for particles */
+    width: 100%;
+    height: 100%;
   }
   
   .effects-container {
@@ -196,13 +198,15 @@
     z-index: 10;
     animation-fill-mode: forwards;
     transform-origin: center center;
+    /* Position relative to the Piclet center */
   }
   
   .effect-emoji {
     font-size: 24px;
     display: block;
     filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
-    transform: scale(var(--initial-scale, 1)) rotate(var(--initial-rotation, 0deg));
+    transform: scale(var(--initial-scale, 1));
+    /* Remove rotation - emojis stay upright */
   }
   
   /* Status effects - floating with rotation */
@@ -268,123 +272,123 @@
       opacity: 1;
     }
     25% {
-      transform: translate(calc(-50% + var(--move-x) * 0.3), calc(-50% + var(--move-y) * 0.3)) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 5deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.3), calc(-50% + var(--move-y) * 0.3)) scale(var(--initial-scale));
       opacity: 0.95;
     }
     50% {
-      transform: translate(calc(-50% + var(--move-x) * 0.6), calc(-50% + var(--move-y) * 0.6)) scale(calc(var(--initial-scale) * 1.3)) rotate(calc(var(--initial-rotation) - 8deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.6), calc(-50% + var(--move-y) * 0.6)) scale(calc(var(--initial-scale) * 1.3));
       opacity: 0.8;
     }
     75% {
-      transform: translate(calc(-50% + var(--move-x) * 0.9), calc(-50% + var(--move-y) * 0.9)) scale(calc(var(--initial-scale) * 0.7)) rotate(calc(var(--initial-rotation) + 3deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.9), calc(-50% + var(--move-y) * 0.9)) scale(calc(var(--initial-scale) * 0.7));
       opacity: 0.5;
     }
     100% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.3) rotate(calc(var(--initial-rotation) - 5deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.3);
       opacity: 0;
     }
   }
   
   @keyframes statusPoison {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.4);
+      transform: translate(-50%, -50%) scale(0.4);
       opacity: 0;
     }
     20% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 8deg)) scale(1.1);
+      transform: translate(-50%, -50%) scale(1.1);
       opacity: 1;
     }
     40% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(0.9);
+      transform: translate(-50%, -50%) scale(0.9);
       opacity: 0.8;
     }
     60% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 6deg)) scale(1.0);
+      transform: translate(-50%, -50%) scale(1.0);
       opacity: 0.6;
     }
     80% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 4deg)) scale(0.7);
+      transform: translate(-50%, -50%) scale(0.7);
       opacity: 0.3;
     }
     100% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.5);
+      transform: translate(-50%, -50%) scale(0.5);
       opacity: 0;
     }
   }
   
   @keyframes statusParalyze {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.2);
+      transform: translate(-50%, -50%) scale(0.2);
       opacity: 0;
     }
     10% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 3deg)) scale(1.3);
+      transform: translate(-50%, -50%) scale(1.3);
       opacity: 1;
     }
     20% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 4deg)) scale(1.1);
+      transform: translate(-50%, -50%) scale(1.1);
       opacity: 0.9;
     }
     30% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 2deg)) scale(1.2);
+      transform: translate(-50%, -50%) scale(1.2);
       opacity: 0.8;
     }
     40% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 3deg)) scale(1.0);
+      transform: translate(-50%, -50%) scale(1.0);
       opacity: 0.7;
     }
     50% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 2deg)) scale(0.9);
+      transform: translate(-50%, -50%) scale(0.9);
       opacity: 0.6;
     }
     100% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.3);
+      transform: translate(-50%, -50%) scale(0.3);
       opacity: 0;
     }
   }
   
   @keyframes statusSleep {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.5);
+      transform: translate(-50%, -50%) scale(0.5);
       opacity: 0;
     }
     25% {
-      transform: translate(-50%, -55%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 4deg)) scale(1.1);
+      transform: translate(-50%, -55%) scale(1.1);
       opacity: 1;
     }
     50% {
-      transform: translate(-50%, -45%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 6deg)) scale(1.0);
+      transform: translate(-50%, -45%) scale(1.0);
       opacity: 0.9;
     }
     75% {
-      transform: translate(-50%, -55%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 3deg)) scale(0.9);
+      transform: translate(-50%, -55%) scale(0.9);
       opacity: 0.5;
     }
     100% {
-      transform: translate(-50%, -60%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.4);
+      transform: translate(-50%, -60%) scale(0.4);
       opacity: 0;
     }
   }
   
   @keyframes statusFreeze {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.3);
+      transform: translate(-50%, -50%) scale(0.3);
       opacity: 0;
     }
     30% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 2deg)) scale(1.4);
+      transform: translate(-50%, -50%) scale(1.4);
       opacity: 1;
     }
     60% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 1deg)) scale(1.2);
+      transform: translate(-50%, -50%) scale(1.2);
       opacity: 0.8;
     }
     90% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 1deg)) scale(0.8);
+      transform: translate(-50%, -50%) scale(0.8);
       opacity: 0.3;
     }
     100% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.6);
+      transform: translate(-50%, -50%) scale(0.6);
       opacity: 0;
     }
   }
@@ -399,42 +403,42 @@
       opacity: 1;
     }
     30% {
-      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 20px)) scale(calc(var(--initial-scale) * 1.2)) rotate(calc(var(--initial-rotation) + 4deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 20px)) scale(calc(var(--initial-scale) * 1.2));
       opacity: 0.95;
     }
     60% {
-      transform: translate(calc(-50% + var(--move-x) * 0.7), calc(-50% + var(--move-y) * 0.7 - 60px)) scale(calc(var(--initial-scale) * 1.0)) rotate(calc(var(--initial-rotation) - 6deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.7), calc(-50% + var(--move-y) * 0.7 - 60px)) scale(calc(var(--initial-scale) * 1.0));
       opacity: 0.7;
     }
     85% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 90px)) scale(calc(var(--initial-scale) * 0.6)) rotate(calc(var(--initial-rotation) + 3deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 90px)) scale(calc(var(--initial-scale) * 0.6));
       opacity: 0.3;
     }
     100% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 120px)) scale(0.2) rotate(calc(var(--initial-rotation) - 2deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 120px)) scale(0.2);
       opacity: 0;
     }
   }
   
   @keyframes statDecrease {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.4);
+      transform: translate(-50%, -50%) scale(0.4);
       opacity: 0;
     }
     25% {
-      transform: translate(-50%, -30%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 8deg)) scale(1.2);
+      transform: translate(-50%, -30%) scale(1.2);
       opacity: 1;
     }
     50% {
-      transform: translate(-50%, -10%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 10deg)) scale(1.0);
+      transform: translate(-50%, -10%) scale(1.0);
       opacity: 0.8;
     }
     75% {
-      transform: translate(-50%, 10%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 5deg)) scale(0.8);
+      transform: translate(-50%, 10%) scale(0.8);
       opacity: 0.4;
     }
     100% {
-      transform: translate(-50%, 30%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 3deg)) scale(0.6);
+      transform: translate(-50%, 30%) scale(0.6);
       opacity: 0;
     }
   }
@@ -449,42 +453,42 @@
       opacity: 1;
     }
     20% {
-      transform: translate(calc(-50% + var(--move-x) * 0.1), calc(-50% + var(--move-y) * 0.1)) scale(calc(var(--initial-scale) * 1.8)) rotate(calc(var(--initial-rotation) + 8deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.1), calc(-50% + var(--move-y) * 0.1)) scale(calc(var(--initial-scale) * 1.8));
       opacity: 0.95;
     }
     40% {
-      transform: translate(calc(-50% + var(--move-x) * 0.4), calc(-50% + var(--move-y) * 0.4)) scale(calc(var(--initial-scale) * 1.5)) rotate(calc(var(--initial-rotation) - 12deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.4), calc(-50% + var(--move-y) * 0.4)) scale(calc(var(--initial-scale) * 1.5));
       opacity: 0.8;
     }
     70% {
-      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8)) scale(calc(var(--initial-scale) * 1.1)) rotate(calc(var(--initial-rotation) + 6deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8)) scale(calc(var(--initial-scale) * 1.1));
       opacity: 0.4;
     }
     100% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.2) rotate(calc(var(--initial-rotation) - 4deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(0.2);
       opacity: 0;
     }
   }
   
   @keyframes missSwirl {
     0% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(var(--initial-rotation)) scale(0.6);
+      transform: translate(-50%, -50%) scale(0.6);
       opacity: 0;
     }
     25% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 8deg)) scale(1.2);
+      transform: translate(-50%, -50%) scale(1.2);
       opacity: 0.7;
     }
     50% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 10deg)) scale(1.0);
+      transform: translate(-50%, -50%) scale(1.0);
       opacity: 0.5;
     }
     75% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) + 6deg)) scale(0.8);
+      transform: translate(-50%, -50%) scale(0.8);
       opacity: 0.3;
     }
     100% {
-      transform: translate(-50%, -50%) scale(var(--initial-scale)) rotate(calc(var(--initial-rotation) - 4deg)) scale(0.4);
+      transform: translate(-50%, -50%) scale(0.4);
       opacity: 0;
     }
   }
@@ -499,19 +503,19 @@
       opacity: 1;
     }
     25% {
-      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 40px)) scale(calc(var(--initial-scale) * 1.3)) rotate(calc(var(--initial-rotation) + 5deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.2), calc(-50% + var(--move-y) * 0.2 - 40px)) scale(calc(var(--initial-scale) * 1.3));
       opacity: 0.95;
     }
     50% {
-      transform: translate(calc(-50% + var(--move-x) * 0.5), calc(-50% + var(--move-y) * 0.5 - 70px)) scale(calc(var(--initial-scale) * 1.1)) rotate(calc(var(--initial-rotation) - 7deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.5), calc(-50% + var(--move-y) * 0.5 - 70px)) scale(calc(var(--initial-scale) * 1.1));
       opacity: 0.8;
     }
     75% {
-      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8 - 100px)) scale(calc(var(--initial-scale) * 0.8)) rotate(calc(var(--initial-rotation) + 4deg));
+      transform: translate(calc(-50% + var(--move-x) * 0.8), calc(-50% + var(--move-y) * 0.8 - 100px)) scale(calc(var(--initial-scale) * 0.8));
       opacity: 0.5;
     }
     100% {
-      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 130px)) scale(0.3) rotate(calc(var(--initial-rotation) - 3deg));
+      transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y) - 130px)) scale(0.3);
       opacity: 0;
     }
   }