/* === DSEG14: registro local (ajusta nombres si tus archivos cambian) === */

@font-face {
  font-family: "DSEG14";
  src: url("fonts/DSEG14Classic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Utilidad para aplicar la fuente tipo “calculadora” */
.font-seg {
  font-family: "DSEG14", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* === Typewriter para el H1 (.hero-title) === */
.hero-title {
  /* No necesitamos white-space: nowrap ni overflow: hidden aquí */
}

/* La clase que activa la animación */
.hero-title.typewriter {
  /* Anima la opacidad del texto para simular la escritura */
  animation: reveal var(--type-dur, 3.2s) steps(var(--chars)) forwards;
}

/* El pseudo-elemento que crea el cursor */
.hero-title.typewriter::after {
  content: "";
  display: inline-block;
  width: 0.12em; /* Ancho del cursor */
  height: 1em; /* Altura del cursor */
  background-color: currentColor;
  vertical-align: top;
  margin-left: 0.12em;
  animation: blink 0.9s step-end infinite;
}

/* Animación que revela el texto carácter a carácter */
@keyframes reveal {
  from {
    /* La magia ocurre aquí: el texto se revela carácter a carácter */
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Animación del cursor */
@keyframes blink {
  50% {
    background-color: transparent;
  }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .hero-title.typewriter {
    animation: none;
    clip-path: none;
  }
  .hero-title.typewriter::after {
    display: none;
    animation: none;
  }
}