/* =============================================
   BLUR TEXT — Text reveal animation effect
   Ported from React Bits <BlurText /> component
   ============================================= */

:root {
  --blur-text-duration: 0.55s;
}

.blur-text-container {
  display: inline;
}

.blur-text-container--flex {
  display: inline-flex;
  flex-wrap: wrap;
}

.blur-text-word {
  display: inline-block;
  white-space: pre-wrap;
  filter: blur(12px);
  opacity: 0;
  transform: translateY(-28px);
  will-change: filter, opacity, transform;
  transition: filter var(--blur-text-duration, 0.55s) cubic-bezier(0.25, 1, 0.5, 1),
              opacity var(--blur-text-duration, 0.55s) cubic-bezier(0.25, 1, 0.5, 1),
              transform var(--blur-text-duration, 0.55s) cubic-bezier(0.25, 1, 0.5, 1);
}

.blur-text-word.blur-text-direction-bottom {
  transform: translateY(28px);
}

.blur-text-container.animated .blur-text-word {
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0);
}