/* ═══════════════════════════════════════════════════════════════
   HELGA · TEXT FX — Efectos de títulos
   Complemento de helga-premium.css · Requiere helga-text-fx.js
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   ESTADO INICIAL + FAILSAFE
   Si el JS no llega a ejecutarse (CDN caído, error),
   la animación de respaldo revela el texto a los 2.2 s.
   ─────────────────────────────────────────────── */
.js [data-text] {
    opacity: 0;
    animation: fxFailsafe 0s linear 2.2s forwards;
}
.js [data-text].fx-ready {
    opacity: 1;
    animation: none;
}
@keyframes fxFailsafe { to { opacity: 1; } }

/* ───────────────────────────────────────────────
   PIEZAS DEL SPLIT
   ─────────────────────────────────────────────── */
.fx-w {
    display: inline-block;
    white-space: nowrap;   /* la palabra nunca se parte */
    vertical-align: top;
}
.fx-c {
    display: inline-block;
    vertical-align: top;
    backface-visibility: hidden;
}
/* Palabra con máscara (modo words) */
.fx-w--mask { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-w-in { display: inline-block; }

/* Línea con máscara (modo lines) */
.fx-line {
    display: block;
    overflow: hidden;
    padding-bottom: .1em;
    margin-bottom: -.1em;
}
.fx-line-in { display: block; }

/* ───────────────────────────────────────────────
   1 · SCRUB — se "escribe" conforme haces scroll
   El texto siempre está presente, solo cambia su
   densidad: nunca se pierde legibilidad.
   ─────────────────────────────────────────────── */
[data-text="scrub"] .fx-c { will-change: opacity; }

/* ───────────────────────────────────────────────
   2 · TYPE — máquina de escribir con cursor
   ─────────────────────────────────────────────── */
[data-text="type"] { position: relative; }
[data-text="type"] .fx-c { visibility: hidden; }
.fx-caret {
    position: absolute;
    top: 0; left: 0;
    width: 2px;
    background: var(--rose);
    pointer-events: none;
    opacity: 0;
    will-change: transform;
}
.fx-caret.is-on { opacity: 1; animation: fxBlink 1s steps(2) infinite; }
.fx-caret.is-done { animation: fxBlink 1s steps(2) 3; opacity: 0; }
@keyframes fxBlink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }

/* ───────────────────────────────────────────────
   3 · SHIMMER — barrido de luz sobre el texto
   ─────────────────────────────────────────────── */
[data-text="shimmer"].fx-sweep {
    background-image: linear-gradient(
        100deg,
        currentColor 0%, currentColor 38%,
        var(--rose) 47%, var(--rose-lt) 52%, var(--rose) 57%,
        currentColor 66%, currentColor 100%
    );
    background-size: 280% 100%;
    background-position: 130% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fxSweep 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes fxSweep {
    from { background-position: 130% 0; }
    to   { background-position: -30% 0; }
}
/* Al terminar volvemos al color sólido para no dejar el texto "pintado" */
[data-text="shimmer"].fx-sweep-done {
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* ───────────────────────────────────────────────
   4 · HOVER WAVE — las letras se elevan al pasar el cursor
   ─────────────────────────────────────────────── */
[data-text-hover] .fx-c {
    transition: color .3s var(--ease-soft);
    will-change: transform;
}
[data-text-hover]:hover .fx-c { cursor: default; }

/* ───────────────────────────────────────────────
   5 · SUBRAYADO DIBUJADO A MANO
   Evoca el trazo caligráfico del logotipo
   ─────────────────────────────────────────────── */
.fx-underline-wrap {
    position: relative;
    display: inline-block;
}
.fx-underline {
    position: absolute;
    left: 0;
    bottom: -.34em;
    width: 100%;
    height: .38em;
    overflow: visible;
    pointer-events: none;
}
.fx-underline path {
    fill: none;
    stroke: var(--rose);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* ───────────────────────────────────────────────
   6 · CONTADOR / TEXTO SCRAMBLE
   ─────────────────────────────────────────────── */
[data-scramble] { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────
   ACCESIBILIDAD
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .js [data-text] { opacity: 1 !important; animation: none !important; }
    .fx-c, .fx-w, .fx-w-in, .fx-line-in {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
    }
    .fx-caret { display: none !important; }
    .fx-underline path { stroke-dashoffset: 0 !important; }
    [data-text="shimmer"].fx-sweep {
        background: none !important;
        -webkit-text-fill-color: currentColor !important;
        animation: none !important;
    }
}