/* ==========================================================================
   BUTTERY SMOOTH TYPOGRAPHY — ELLIS AUSTIN
   Silky, organic character animation with soft silver hover glow
   Zero harsh tech artifacts, clean luxury minimalism
   ========================================================================== */

.buttery-text-wrap {
  position: relative;
  display: inline-block;
  user-select: none;
}

.buttery-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8.5vw, 6.8rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}

.buttery-title.buttery-subpage-title {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  margin-bottom: 0.5rem;
}

.buttery-word {
  display: inline-flex;
  position: relative;
}

.buttery-space {
  width: 0.32em;
  display: inline-block;
}

.buttery-char {
  display: inline-block;
  position: relative;
  cursor: default;
  will-change: transform, filter, opacity;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              color 0.3s ease, 
              text-shadow 0.4s ease;
}

.buttery-char:hover {
  transform: translateY(-4px);
  color: #ffffff;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
}

/* Fluid Entrance Animation (GSAP handles this dynamically with blur) */
.char-initial-hidden {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(12px);
}

/* Organic Soft Click Ripple */
@keyframes butteryRipple {
  0% {
    transform: translateY(0);
  }
  35% {
    transform: translateY(-8px);
  }
  70% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}

.buttery-char.ripple-active {
  animation: butteryRipple 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}