/* premium-motion : text FX  (premium-motion 2.0, Phase 5)
   Pair with texts.js.
     <span class="md-type" data-text="one line|two line|three"></span>  typewriter (| = new line to cycle)
     <span class="md-rotate" data-words="secure,fast,managed"></span>    rotating words
   ============================================================ */
.md-type{ white-space:pre; }
.md-type::after{ content:""; display:inline-block; width:.6ch; height:1.05em; vertical-align:-.15em;
  background: var(--red,#C8102E); margin-left:2px; animation: md-caret 1s steps(1) infinite; }
@keyframes md-caret{ 50%{ opacity:0; } }
[data-motion="off"] .md-type::after{ display:none; }

.md-rotate{ display:inline-grid; overflow:hidden; vertical-align:bottom; }
.md-rotate > span{ grid-area:1/1; transition: transform .5s cubic-bezier(.22,.61,.2,1), opacity .5s; }
.md-rotate > span[data-st="out"]{ transform: translateY(-110%); opacity:0; }
.md-rotate > span[data-st="in"] { transform: translateY(110%); opacity:0; }
.md-rotate > span[data-st="on"] { transform: translateY(0); opacity:1; }