.tdl-rotate .tdl-word {
    transition: opacity 0.22s ease, transform 0.22s ease;
    display: inline-block;
    will-change: opacity, transform;
}
.tdl-rot-fade-out { opacity: 0; transform: translateY(-0.15em); }
.tdl-rot-fade-in  { opacity: 1; transform: translateY(0); }

.tdl-rotate .tdl-word.tdl-hover-underline { text-decoration: none; }
.tdl-rotate .tdl-word.tdl-hover-underline:hover,
.tdl-rotate .tdl-word.tdl-hover-underline a:hover { text-decoration: underline; }

.tdl-rotate .tdl-ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity 0.28s ease, transform 0.28s ease;
    white-space: pre;
}
.tdl-rotate .tdl-ch.tdl-ch-in { opacity: 1; transform: translateY(0); }

.tdl-rotate .tdl-link { color: inherit; text-decoration: inherit; }

/* Prevent initial flicker: keep container hidden until JS reveals it */
.tdl-rotate{visibility:hidden}



.tdl-rotate{
  /* hide until JS marks ready; still reserves space via min-height */
  visibility:hidden;
  /* Reserve space approximately for 2 lines even before JS */
  min-height:2.6em;
  /* Prefer two lines max to avoid accidental 3rd-line wrap before JS */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-wrap:balance;
}
.tdl-rotate[data-ready="1"]{ visibility:visible; }



.tdl-rotate{
  /* Always visible; prevent line-jump to 3 lines */
  visibility:visible !important;
  opacity:1 !important;
  /* Reserve space roughly for 2 lines */
  min-height:2.8em;
  /* Hide any accidental 3rd line */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-wrap:balance;
  /* Firefox fallback */
  max-height:3.2em;
}

/* 3DL Rotating Word – SAFE CLS FIX */
.tdl-rotate{
  display:inline-block;
  overflow:hidden;
  max-height:3.2em; /* ~2 lines for typical lh */
}