/* ============================================================
   SECCIÓN NUEVA — efectos de entrada y cursor del título tipeado.
   El JS (assets/efectos.js) sólo agrega y saca clases; el movimiento vive acá.
   ============================================================ */

/* La clase .rev la pone el JS, no el HTML: si el script no corre, el
   contenido queda visible igual en lugar de esconderse para siempre. */
.rev {
  opacity: 0; transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22, .8, .3, 1),
              transform .62s cubic-bezier(.22, .8, .3, 1);
  will-change: opacity, transform;
}
.rev-on { opacity: 1; transform: none }

/* variantes, para que no todo entre igual */
.rev[data-rev="izq"]  { transform: translateX(-26px) }
.rev[data-rev="der"]  { transform: translateX(26px) }
.rev[data-rev="zoom"] { transform: scale(.965) }
.rev-on[data-rev="izq"], .rev-on[data-rev="der"], .rev-on[data-rev="zoom"] { transform: none }

/* cursor del texto que se escribe */
.tipeo::after {
  content: ''; display: inline-block; width: .06em; height: 1em;
  margin-left: .06em; vertical-align: -.12em;
  background: currentColor; animation: tipeo-cursor 1s steps(2, start) infinite;
}
@keyframes tipeo-cursor { to { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .rev, .rev-on { opacity: 1; transform: none; transition: none }
  .tipeo::after { display: none }
}