/* ============================================================
   typed-text.css — shared typed/deleted rotating-phrase text effect
   Used by: themes/alt/genesis (homepage hero mission line),
            any future page wanting a "types out, holds, deletes,
            moves to next phrase" effect.

   Markup contract:
     <span class="typed-text" style="--typed-text-min-height: ...">
       <span class="typed-text__static">Static lead-in</span>
       <span class="typed-text__rotating" data-typed-text
             data-phrases='["phrase one","phrase two"]'></span><span class="typed-text__cursor"></span>
     </span>
   See shared/js/typed-text.js for the self-initializing behavior.
   ============================================================ */

.typed-text {
  --typed-text-min-height: calc(1.5em * 2);
  display: block;
  min-height: var(--typed-text-min-height);
}

.typed-text__static {
  font-weight: 500;
  color: var(--typed-text-static-color, var(--text-3, inherit));
}

.typed-text__rotating {
  font-style: italic;
  font-weight: 600;
  color: var(--typed-text-color, var(--text-accent, #6d28d9));
}

.typed-text__cursor {
  display: inline-block;
  width: 1px;
  margin-left: 2px;
  height: 1.05em;
  vertical-align: -0.15em;
  background: currentColor;
  color: var(--typed-text-color, var(--text-accent, #6d28d9));
  animation: typed-text-cursor-blink 0.9s step-end infinite;
}

@keyframes typed-text-cursor-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typed-text__cursor { animation: none; }
}