.word-pill {
      transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      line-height: 1;
      position: relative;
    }

    /* Shine effect overlay */
    .word-pill::after {
      content: "";
      position: absolute;
      top: 0;
      left: -150%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
      );
      transform: skewX(-20deg);
    }

    .pill-shine::after {
      animation: shine 0.75s ease-out;
    }

    @keyframes shine {
      100% { left: 150%; }
    }

    @keyframes letter-in {
      0% { opacity: 0; filter: blur(10px); transform: translateY(10px) scale(0.8); }
      100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
    }

    @keyframes letter-out {
      to { opacity: 0; filter: blur(10px); transform: translateY(-10px) scale(0.8); }
    }

    .letter { display: inline-block; animation: letter-in 0.4s forwards; }
    .letter-exit { animation: letter-out 0.35s forwards; }

    #word-target, #measurer {
  font-size: 1.25rem; /* mobile default */
}

@media (min-width: 640px) {
  #word-target, #measurer { font-size: 1.5rem; }
}
@media (min-width: 768px) {
  #word-target, #measurer { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  #word-target, #measurer { font-size: 3rem; }
}
@media (min-width: 1280px) {
  #word-target, #measurer { font-size: 3.75rem; }
}


/* fade up animation */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  animation: fade-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Stagger delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }
.delay-4 { animation-delay: 0.7s; }


/* REVEAL ON SCROLL */
/* The initial state (Hidden) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* The active state (Visible) */
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}



/* Cloud icons */

        @keyframes orbit {
            from { transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg)); }
            to { transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * 1deg + 360deg) * -1)); }
        }
        .animate-orbit {
            animation: orbit linear infinite;
            animation-duration: calc(var(--duration) * 1s);
        }
        .direction-reverse { animation-direction: reverse; }