/**
 * Liquid Text Effect - Standalone CSS
 * Original CodePen: https://codepen.io/daniel-mu-oz/pen/qEbdZvV
 *
 * WebGL-powered liquid text animation with interactive hover effects
 * Unique prefix: "liquidtext" to prevent naming conflicts
 */

/* Base HTML and body styling - ONLY for standalone usage */
/* Commented out to prevent conflicts when integrated into main site */
/*
html, body {
  height: 100%;
  margin: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}
*/

/* Main container for liquid text effect */
.liquidtext-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Canvas element styling */
#liquidtext-canvas {
  max-width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Hover scale effect on canvas */
#liquidtext-canvas:hover {
  transform: scale(1.05);
}