/* ===== Tipografía (opcional) ===== */
@import url('https://fonts.googleapis.com/css2?family=Jersey+25');

/* ====== 1) TYPE clásico (escritura + cursor que desaparece) ====== */
:is(.fx-type,[data-fx="type"]){
  --dur: 1.4s;         /* duración total */
  --delay: .15s;       /* retardo */
  --caret: #fc4b08;    /* color del cursor */
  --caret-w: 3px;      /* grosor del cursor */

  display:inline-block; position:relative;
  white-space:nowrap; overflow:hidden;

  font-family:"Jersey 25", system-ui;
  font-size:24px; color:rgba(255,255,255,.70);

  animation: fx-clip-reveal var(--dur) linear var(--delay) 1 both;
}
:is(.fx-type,[data-fx="type"])::after{
  content:""; position:absolute; top:0; left:0; height:1em;
  border-right:var(--caret-w) solid var(--caret);
  animation:
    fx-caret-move var(--dur) linear var(--delay) 1 both,
    fx-caret-blink .6s step-end var(--delay) infinite,
    fx-caret-hide .01s linear calc(var(--delay) + var(--dur)) 1 both;
}

/* ====== 2) TYPE-SOFT (escritura + cursor fino + “highlight” suave) ====== */
:is(.fx-type-soft,[data-fx="type-soft"]){
  --dur: 1.4s; --delay:.1s;
  --caret:#fc4b08; --caret-w:2px;
  --glow: rgba(255,255,255,.22); /* brillo suave */

  display:inline-block; position:relative;
  white-space:nowrap; overflow:hidden;

  font-family:"Jersey 25", system-ui;
  font-size:24px; color:rgba(255,255,255,.70);

  animation: fx-clip-reveal var(--dur) linear var(--delay) 1 both;
}
:is(.fx-type-soft,[data-fx="type-soft"])::after{
  content:""; position:absolute; top:0; left:0; height:1em;
  border-right:var(--caret-w) solid var(--caret);
  animation:
    fx-caret-move var(--dur) linear var(--delay) 1 both,
    fx-caret-blink .6s step-end var(--delay) infinite,
    fx-caret-hide .01s linear calc(var(--delay) + var(--dur)) 1 both;
}
:is(.fx-type-soft,[data-fx="type-soft"])::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:4ch;
  background:linear-gradient(90deg, transparent, var(--glow), transparent);
  pointer-events:none;
  animation: fx-highlight-move var(--dur) linear var(--delay) 1 both;
}

/* ====== 3) TYPE-BLOCK (cursor tipo bloque █) ====== */
:is(.fx-type-block,[data-fx="type-block"]){
  --dur: 1.4s; --delay:.15s;
  --caret:#fc4b08;          /* color del bloque */
  --block-w:.65ch;          /* ancho del bloque */
  --block-alpha:.18;        /* transparencia del bloque */

  display:inline-block; position:relative;
  white-space:nowrap; overflow:hidden;

  font-family:"Jersey 25", system-ui;
  font-size:24px; color:rgba(255,255,255,.70);

  animation: fx-clip-reveal var(--dur) linear var(--delay) 1 both;
}
:is(.fx-type-block,[data-fx="type-block"])::after{
  content:""; position:absolute; top:0; left:0; height:1em; width:var(--block-w);
  background: var(--caret); opacity: var(--block-alpha);
  animation:
    fx-caret-move var(--dur) linear var(--delay) 1 both,
    fx-caret-hide .01s linear calc(var(--delay) + var(--dur)) 1 both;
}

/* ====== 4) TYPE-UNDER (subrayado que “crece” con la escritura) ====== */
:is(.fx-type-under,[data-fx="type-under"]){
  --dur: 1.4s; --delay:.1s;
  --line:#fc4b08; --h:.15em;

  display:inline-block; position:relative;
  white-space:nowrap; overflow:hidden;

  font-family:"Jersey 25", system-ui;
  font-size:24px; color:rgba(255,255,255,.90);

  animation: fx-clip-reveal var(--dur) linear var(--delay) 1 both;
}
:is(.fx-type-under,[data-fx="type-under"])::after{
  content:""; position:absolute; left:0; bottom:-.1em; height:var(--h); width:100%;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  transform-origin:left center; transform:scaleX(0);
  animation:
    fx-underline-grow var(--dur) linear var(--delay) 1 both,
    fx-underline-fade .12s linear calc(var(--delay) + var(--dur)) 1 both;
}

/* ====== Animaciones compartidas ====== */
@keyframes fx-clip-reveal{ from{clip-path: inset(0 100% 0 0);} to{clip-path: inset(0 0 0 0);} }
@keyframes fx-caret-move{ from{transform:translateX(0%);} to{transform:translateX(100%);} }
@keyframes fx-caret-blink{ 0%,50%{opacity:1;} 50.01%,100%{opacity:.15;} }
@keyframes fx-caret-hide{ from{opacity:1;} to{opacity:0;} }
@keyframes fx-highlight-move{
  from{ transform: translateX(-2ch); opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  to  { transform: translateX(100%); opacity:0; }
}
@keyframes fx-underline-grow{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes fx-underline-fade{ from{opacity:1;} to{opacity:0;} }

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  :is(.fx-type,[data-fx="type"],
      .fx-type-soft,[data-fx="type-soft"],
      .fx-type-block,[data-fx="type-block"],
      .fx-type-under,[data-fx="type-under"]){
    animation:none !important; clip-path:none !important;
  }
  :is(.fx-type,[data-fx="type"],
      .fx-type-soft,[data-fx="type-soft"],
      .fx-type-block,[data-fx="type-block"],
      .fx-type-under,[data-fx="type-under"])::before,
  :is(.fx-type,[data-fx="type"],
      .fx-type-soft,[data-fx="type-soft"],
      .fx-type-block,[data-fx="type-block"],
      .fx-type-under,[data-fx="type-under"])::after{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* === Override: texto en azul oscuro para TODOS los efectos typewriter === */
:is(.fx-type,[data-fx="type"],
    .fx-type-soft,[data-fx="type-soft"],
    .fx-type-block,[data-fx="type-block"],
    .fx-type-under,[data-fx="type-under"]) {
  color: #0b1b3b; /* azul oscuro serio, sin transparencias */
}