/* assets/styles/animations.css */

/* 
   The Magic: Gooey Effect using Contrast/Blur Trick
   Reference: https://css-tricks.com/gooey-effect/
*/

/* Canvas Positioning & Layering */
#lava-lamp {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: var(--z-canvas);

   /* 
       Gooey Filter:
       1. Blur: Smooths the edges of the circles.
       2. Contrast: sharpens the alpha channel, making the blurred edges solid again.
          When blurred circles overlap, their alpha adds up. 
          The contrast filter cuts off the low-alpha feathering and merges the high-alpha centers.
    */
   /* 
      CRITICAL FIX: 
      Blur mixes the pixels. 
      High Contrast (20) snaps the gradient to sharp edges. 
      Brightness (1.2) boosts the color against the dark threshold.
      Blur 60px + Contrast 20 = Giant Gooey Stretching
   */
   filter: blur(60px) contrast(20) brightness(1.2);
   background-color: var(--bg-color);
   /* Dynamic Theme Background */
   /* Ensure mixing against black */

   /* 
       Opacity:
       Slight transparency to blend with the background color if needed,
       or just to give it a ghostly feel.
    */
   opacity: 0.8;

   /* Performance hint */
   will-change: filter;
   transition: opacity 0.5s ease;
}