/* ==========================================================================
   char-flip.css — 3D Character Flip Reveal (used on all H1/H2 titles)
   Source: Framer site — each char starts rotateY(90deg) opacity:0.001
   Animate to rotateY(0deg) opacity:1 with stagger via JS
   ========================================================================== */

.flip-title {
  display: inline-block;
  perspective: 1200px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.flip-title .word {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.18em;
}

.flip-title .word:last-child {
  margin-right: 0;
}

.flip-title .char {
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity;
}

html.js .flip-title .char {
  transform: rotateY(90deg);
  opacity: 0.001;
}

.flip-title.is-revealed .char {
  transform: rotateY(0deg);
  opacity: 1;
  transition:
    transform 1s cubic-bezier(0.44, 0, 0.56, 1),
    opacity 1s cubic-bezier(0.44, 0, 0.56, 1);
}