/* ============================================================
   Shattering Text Entrance Animation
   Inspired by: https://codepen.io/ARS/pen/pjypwd

   Each character of the target element starts at a random
   scattered position (translate + rotate + scale-down) and
   converges to its final place, creating a "shattering" effect.
   ============================================================ */

/* Gradient colour preserved on individual chars inside
   .gradient-text when they are wrapped into .char spans */
.gradient-text .char {
  background: linear-gradient(135deg, var(--clr-cyan, #06b6d4), var(--clr-teal, #14b8a6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Non-breaking space between words */
.shatter-text .char-space {
  --shatter-space: 0.25em;
  display: inline-block;
  width: var(--shatter-space);
}

/* Single animated character */
.shatter-text .char {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: shatter-char-in 0.50s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

/* ── Keyframe ──────────────────────────────────────────────── */
@keyframes shatter-char-in {
  0% {
    opacity: 0;
    transform:
      translate(var(--shatter-tx, 0px), var(--shatter-ty, -60px))
      rotate(var(--shatter-r,  0deg))
      scale(var(--shatter-s,   0.1));
    filter: blur(8px);
  }

  55% {
    opacity: 1;
    filter: blur(0);
  }

  /* Slight overshoot for a spring feel */
  80% {
    transform: translate(0, 0) rotate(0deg) scale(1.04);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}