/* 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; }

/* flowing gradient text (CSS-only, Phase 8) — <span class="md-gradtext">phrase</span>
   Tune: --gt-c1/--gt-c2 (stops), --gt-dur (def 6s). Static gradient on lite/off/RM. */
.md-gradtext{
  background:linear-gradient(100deg,
    var(--gt-c1,#C8102E) 0%, var(--gt-c2,#ff7a8d) 28%,
    var(--gt-c1,#C8102E) 55%, var(--gt-c2,#ff7a8d) 82%, var(--gt-c1,#C8102E) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation: md-gradtext var(--gt-dur,6s) linear infinite;
}
@keyframes md-gradtext{ to{ background-position:-220% 0; } }
:root[data-motion="lite"] .md-gradtext, :root[data-motion="off"] .md-gradtext{ animation:none; }
@media (prefers-reduced-motion: reduce){ .md-gradtext{ animation:none; } }