/*!
 * Mia FlipWords — styles.
 * Keeps the hero rhythm intact: rotating word sits on the same baseline as the
 * prefix, colored with the brand terracotta accent.
 */
.hero-tag .flip {
  display: inline-block;
  position: relative;
  color: var(--mia-terracotta);
  vertical-align: baseline;
  white-space: nowrap;
  will-change: transform, opacity, filter;
}

.hero-tag .flip .fw-letter {
  display: inline-block;
  transform: translateY(0.45em);
  opacity: 0;
  filter: blur(5px);
  transition:
    transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 30ms);
}

.hero-tag .flip.in .fw-letter {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}

.hero-tag .flip.out {
  transform: translateY(-0.35em);
  opacity: 0;
  filter: blur(6px);
  transition:
    transform 0.32s cubic-bezier(0.5, 0, 0.75, 0),
    opacity 0.32s cubic-bezier(0.5, 0, 0.75, 0),
    filter 0.32s cubic-bezier(0.5, 0, 0.75, 0);
}

@media (prefers-reduced-motion: reduce) {
  .hero-tag .flip .fw-letter {
    transform: none;
    opacity: 1;
    filter: none;
    transition: none;
  }
}