/* WM Animations CSS */
/* Define CSS variables for animations */
:root {
  --wm-animation-duration: 1.4s;
  --wm-animation-delay: 0s;
}

/* Base styles for all animation types */
[data-animate] {
  will-change: opacity, transform;
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  transition-duration: var(--wm-animation-duration, 1.4s);
  transition-delay: var(--wm-animation-delay, 0s);
}

/* 
  Note: attr() in calc() has limited browser support
  We'll rely on the specific value fallbacks below instead
*/

/* When animation is active */
[data-animate][data-animation-state="animated"] {opacity: 1;transform: translate(0, 0) !important;}

/* Initial states for different animation types */
[data-animate="fade-in"] {opacity: 0;}
[data-animate="fade-in-up"] {transform: translateY(150px);}
[data-animate="fade-in-left"] {transform: translateX(-150px);}
[data-animate="fade-in-right"] {transform: translateX(150px);}

/* These fallbacks are still useful for when JavaScript is disabled
or for static CSS styling without relying on JS */
[data-duration="0.5"] { --wm-animation-duration: 0.5s; }
[data-duration="0.6"] { --wm-animation-duration: 0.6s; }
[data-duration="0.7"] { --wm-animation-duration: 0.7s; }
[data-duration="0.8"] { --wm-animation-duration: 0.8s; }
[data-duration="0.9"] { --wm-animation-duration: 0.9s; }
[data-duration="1.0"] { --wm-animation-duration: 1.0s; }
[data-duration="1.1"] { --wm-animation-duration: 1.1s; }
[data-duration="1.2"] { --wm-animation-duration: 1.2s; }
[data-duration="1.3"] { --wm-animation-duration: 1.3s; }
[data-duration="1.4"] { --wm-animation-duration: 1.4s; }
[data-duration="1.5"] { --wm-animation-duration: 1.5s; }
[data-duration="1.6"] { --wm-animation-duration: 1.6s; }
[data-duration="1.7"] { --wm-animation-duration: 1.7s; }
[data-duration="1.8"] { --wm-animation-duration: 1.8s; }
[data-duration="1.9"] { --wm-animation-duration: 1.9s; }
[data-duration="2.0"] { --wm-animation-duration: 2.0s; }
[data-duration="2.5"] { --wm-animation-duration: 2.5s; }
[data-duration="3.0"] { --wm-animation-duration: 3.0s; }

[data-delay="0"] { --wm-animation-delay: 0s; }
[data-delay="0.1"] { --wm-animation-delay: 0.1s; }
[data-delay="0.2"] { --wm-animation-delay: 0.2s; }
[data-delay="0.3"] { --wm-animation-delay: 0.3s; }
[data-delay="0.4"] { --wm-animation-delay: 0.4s; }
[data-delay="0.5"] { --wm-animation-delay: 0.5s; }
[data-delay="0.6"] { --wm-animation-delay: 0.6s; }
[data-delay="0.7"] { --wm-animation-delay: 0.7s; }
[data-delay="0.8"] { --wm-animation-delay: 0.8s; }
[data-delay="0.9"] { --wm-animation-delay: 0.9s; }
[data-delay="1.0"] { --wm-animation-delay: 1.0s; }
[data-delay="1.5"] { --wm-animation-delay: 1.5s; }
[data-delay="2.0"] { --wm-animation-delay: 2.0s; }