/* ─────────────────────────────────────────────────────────────────
   Lievo Animations — typewriter
   Versione: v1.0 (2026-06-12)

   Due varianti:
   1. .lv-typewriter             — singola riga, CSS-only (per testi corti)
   2. .lv-typewriter-line        — multi-riga sequenziale, JS-driven

   Entrambe rispettano prefers-reduced-motion.

   Dipendenze: tokens.css (--lv-c-accent, --lv-c-bg).
   JS opzionale: typewriter.js (richiesto solo per --line sequenza).
   ───────────────────────────────────────────────────────────────── */


/* ── Variante 1: singola riga, CSS-only ───────────────────────────────
   Uso: <p class="lv-typewriter" style="--lv-typewriter-chars: 26">
          Respira. Stiamo arrivando.
        </p>
   Note: il numero di char va passato come --lv-typewriter-chars,
   altrimenti default 30. Solo per testi monoline su monospace.
   ──────────────────────────────────────────────────────────────────── */

.lv-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    border-right: 0.55ch solid var(--lv-c-accent, var(--accent, #9D4EDD));
    animation:
        lv-typewriter-type  2.6s steps(var(--lv-typewriter-chars, 30), end) 0.4s forwards,
        lv-typewriter-blink 1s   step-end infinite 0.4s;
}

@keyframes lv-typewriter-type {
    from { width: 0; }
    to   { width: calc(var(--lv-typewriter-chars, 30) * 1ch); }
}

@keyframes lv-typewriter-blink {
    0%, 49%   { border-color: var(--lv-c-accent, var(--accent, #9D4EDD)); }
    50%, 100% { border-color: transparent; }
}


/* ── Variante 2: multi-riga sequenziale ────────────────────────────────
   Markup atteso:
     <div data-lv-typewriter-sequence
          data-lv-typewriter-speed="35"      (default 35 char/sec)
          data-lv-typewriter-pause="350">    (pausa fra righe, ms; default 350)
       <p class="lv-typewriter-line" data-text="Per chi …">Per chi …</p>
       <p class="lv-typewriter-line" data-text="Per chi …">Per chi …</p>
       <p class="lv-typewriter-line" data-text="Per chi …">Per chi …</p>
     </div>

   Il JS:
     1. legge data-text di ogni riga, svuota il textContent,
        nasconde la riga (visibility:hidden via .is-pending);
     2. all'IntersectionObserver entry, anima riga 1, poi 2, ecc.;
     3. cursor visibile solo sulla riga attualmente in scrittura;
     4. se prefers-reduced-motion: applica tutto subito senza animare;
     5. se la riga wrappa (multi-line per viewport stretta), salta typing
        e fa fade-in (.lv-typewriter-line.is-fade).
   ──────────────────────────────────────────────────────────────────── */

[data-lv-typewriter-sequence] .lv-typewriter-line {
    display: inline-block;
    max-width: 100%;
}

/* Stato pre-animazione: testo invisibile (occupa già lo spazio) */
.lv-typewriter-line.is-pending {
    visibility: hidden;
}

/* Stato in scrittura: cursor lampeggiante */
.lv-typewriter-line.is-typing {
    visibility: visible;
    border-right: 0.55ch solid var(--lv-c-accent, var(--accent, #9D4EDD));
    animation: lv-typewriter-blink 1s step-end infinite;
}

/* Stato terminato: niente cursor */
.lv-typewriter-line.is-done {
    visibility: visible;
    border-right: 0.55ch solid transparent;
}

/* Fallback per righe che andrebbero a wrappare (degrade graceful) */
.lv-typewriter-line.is-fade {
    visibility: visible;
    opacity: 0;
    border-right: none;
    animation: lv-typewriter-fade 0.6s ease-out forwards;
}

@keyframes lv-typewriter-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Reduced motion: tutto immediato ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lv-typewriter,
    .lv-typewriter-line {
        animation: none !important;
        width: auto !important;
        white-space: normal;
        visibility: visible !important;
        opacity: 1 !important;
        border-right: none !important;
    }
}